/* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-4989d1ca]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-4989d1ca] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-4989d1ca] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-4989d1ca]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-4989d1ca], .theme-mode-light[data-v-4989d1ca] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-4989d1ca], .theme-mode-dark[data-v-4989d1ca] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-4989d1ca]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-4989d1ca]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-4989d1ca] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-4989d1ca] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-4989d1ca]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-4989d1ca], input[disabled][data-v-4989d1ca] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-4989d1ca] { opacity: 0.9; } input[readonly][data-v-4989d1ca] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-4989d1ca] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-4989d1ca]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-4989d1ca]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-4989d1ca]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-4989d1ca] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-4989d1ca]:nth-child(odd), .list-card-desktop__wrapper[data-v-4989d1ca]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-4989d1ca]:nth-child(even), .list-card-desktop__wrapper[data-v-4989d1ca]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-4989d1ca]:nth-child(odd), .listCardDesktopWrapper[data-v-4989d1ca]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-4989d1ca]:nth-child(even), .listCardDesktopWrapper[data-v-4989d1ca]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-4989d1ca] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-4989d1ca] { cursor: pointer; } .card-layout--selectionnable[data-v-4989d1ca]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-4989d1ca] { cursor: auto; } .card-layout--drawer[data-v-4989d1ca] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-4989d1ca] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-4989d1ca] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-4989d1ca] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-4989d1ca] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-4989d1ca] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-4989d1ca]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-4989d1ca] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-4989d1ca] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-4989d1ca] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-4989d1ca] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-4989d1ca] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-4989d1ca] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-4989d1ca] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-4989d1ca] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-4989d1ca] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-4989d1ca] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-4989d1ca] { background-color: #eb1515; } .color-chip--dossiers[data-v-4989d1ca] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-4989d1ca] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-4989d1ca] { background-color: #00a79b; } .color-chip--virements[data-v-4989d1ca] { background-color: var(--secondary-400); } .color-chip--factures[data-v-4989d1ca] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-4989d1ca] { background-color: #eb1515; } .color-recherche-dossiers[data-v-4989d1ca] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-4989d1ca] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-4989d1ca] { background-color: #00a79b; } .color-recherche-virements[data-v-4989d1ca] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-4989d1ca] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-4989d1ca] { color: #00a79b; cursor: pointer; } .scrollable[data-v-4989d1ca] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-4989d1ca] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-4989d1ca] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-4989d1ca] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-4989d1ca] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-4989d1ca] { font-weight: 800; } .grid-cell--column[data-v-4989d1ca] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-4989d1ca] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-4989d1ca] { fill: #00a79b; } .grid-cell--disabled[data-v-4989d1ca] { color: #cccccc; } .grid-cell--disabled svg[data-v-4989d1ca] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-4989d1ca] { white-space: nowrap; } .grid-cell--danger svg[data-v-4989d1ca] { fill: #eb1515; } .grid-cell--span-1[data-v-4989d1ca] { grid-column: span 1; } .grid-cell--span-2[data-v-4989d1ca] { grid-column: span 2; } .grid-cell--span-3[data-v-4989d1ca] { grid-column: span 3; } .grid-cell--span-4[data-v-4989d1ca] { grid-column: span 4; } .grid-cell--span-5[data-v-4989d1ca] { grid-column: span 5; } .grid-cell--span-6[data-v-4989d1ca] { grid-column: span 6; } .grid-cell--span-7[data-v-4989d1ca] { grid-column: span 7; } .grid-cell--span-8[data-v-4989d1ca] { grid-column: span 8; } .grid-cell--span-9[data-v-4989d1ca] { grid-column: span 9; } .grid-cell--span-10[data-v-4989d1ca] { grid-column: span 10; } .grid-cell--span-12[data-v-4989d1ca] { grid-column: span 12; } .grid-cell--span-13[data-v-4989d1ca] { grid-column: span 13; } .grid-cell--span-14[data-v-4989d1ca] { grid-column: span 14; } .grid-cell--span-16[data-v-4989d1ca] { grid-column: span 16; } .grid-cell--span-18[data-v-4989d1ca] { grid-column: span 18; } .grid-cell--span-20[data-v-4989d1ca] { grid-column: span 20; } .grid-cell--span-32[data-v-4989d1ca] { grid-column: span 32; } .grid-cell--span-36[data-v-4989d1ca] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-4989d1ca] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-4989d1ca] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-4989d1ca] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-4989d1ca] { justify-content: center !important; } .elem--bold span[data-v-4989d1ca] { font-weight: 800; } .elem--column[data-v-4989d1ca] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-4989d1ca] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-4989d1ca] { fill: #00a79b; } .elem--clickable[data-v-4989d1ca]:hover { cursor: pointer; } .elem--disabled[data-v-4989d1ca] { color: #cccccc; } .elem--disabled svg[data-v-4989d1ca] { fill: #cccccc; } .elem--nowrap span[data-v-4989d1ca] { white-space: nowrap; } .elem--danger svg[data-v-4989d1ca] { fill: #eb1515; } .elem--span-1[data-v-4989d1ca] { grid-column: span 1; } .elem--span-2[data-v-4989d1ca] { grid-column: span 2; } .elem--span-3[data-v-4989d1ca] { grid-column: span 3; } .elem--span-4[data-v-4989d1ca] { grid-column: span 4; } .elem--span-5[data-v-4989d1ca] { grid-column: span 5; } .elem--span-6[data-v-4989d1ca] { grid-column: span 6; } .elem--span-7[data-v-4989d1ca] { grid-column: span 7; } .elem--span-8[data-v-4989d1ca] { grid-column: span 8; } .elem--span-9[data-v-4989d1ca] { grid-column: span 9; } .elem--span-10[data-v-4989d1ca] { grid-column: span 10; } .elem--span-12[data-v-4989d1ca] { grid-column: span 12; } .elem--span-13[data-v-4989d1ca] { grid-column: span 13; } .elem--span-14[data-v-4989d1ca] { grid-column: span 14; } .elem--span-16[data-v-4989d1ca] { grid-column: span 16; } .elem--span-18[data-v-4989d1ca] { grid-column: span 18; } .elem--span-20[data-v-4989d1ca] { grid-column: span 20; } .elem--span-32[data-v-4989d1ca] { grid-column: span 32; } .elem--span-36[data-v-4989d1ca] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-4989d1ca] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-4989d1ca] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-4989d1ca]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-4989d1ca] { display: flex; } /* flex-direction */ .flex-column[data-v-4989d1ca] { flex-direction: column; } .flex-row[data-v-4989d1ca] { flex-direction: row; } /* flex */ .flex-1[data-v-4989d1ca] { flex: 1 !important; } .flex-2[data-v-4989d1ca] { flex: 2; } .flex-3[data-v-4989d1ca] { flex: 3; } .flex-3[data-v-4989d1ca] { flex: 4; } .flex-5[data-v-4989d1ca] { flex: 5; } .flex-auto[data-v-4989d1ca] { flex: auto; } .flex-none[data-v-4989d1ca] { flex: none; } .flex-content[data-v-4989d1ca] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-4989d1ca] { flex-wrap: wrap; } .flex-nowrap[data-v-4989d1ca] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-4989d1ca] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-4989d1ca] { justify-content: flex-start; } .justify-content-end[data-v-4989d1ca] { justify-content: flex-end; } .justify-content-baseline[data-v-4989d1ca] { justify-content: baseline; } .justify-content-center[data-v-4989d1ca] { justify-content: center; } .justify-content-space-between[data-v-4989d1ca] { justify-content: space-between; } .justify-content-space-around[data-v-4989d1ca] { justify-content: space-around; } .justify-content-space-evenly[data-v-4989d1ca] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-4989d1ca] { align-items: flex-start; } .align-items-flex-end[data-v-4989d1ca] { align-items: flex-end; } .align-items-stretch[data-v-4989d1ca] { align-items: stretch; } .align-items-baseline[data-v-4989d1ca] { align-items: baseline; } .align-items-center[data-v-4989d1ca] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-4989d1ca] { align-content: flex-start; } .align-content-flex-end[data-v-4989d1ca] { align-content: flex-end; } .align-content-center[data-v-4989d1ca] { align-content: center; } .align-content-stretch[data-v-4989d1ca] { align-content: stretch; } .align-content-space-between[data-v-4989d1ca] { align-content: space-between; } .align-content-space-around[data-v-4989d1ca] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-4989d1ca] { align-self: flex-start; } .align-self-flex-end[data-v-4989d1ca] { align-self: flex-end; } .align-self-stretch[data-v-4989d1ca] { align-self: stretch; } .align-self-flex-baseline[data-v-4989d1ca] { align-self: baseline; } .align-self-center[data-v-4989d1ca] { align-self: center; } .align-self-auto[data-v-4989d1ca] { align-self: auto; } .flex-gap-1[data-v-4989d1ca] { gap: 4px; } .flex-gap-2[data-v-4989d1ca] { gap: 8px; } .flex-gap-3[data-v-4989d1ca] { gap: 12px; } .flex-gap-4[data-v-4989d1ca] { gap: 16px; } .flex-gap-5[data-v-4989d1ca] { gap: 20px; } .flex-gap-6[data-v-4989d1ca] { gap: 24px; } .flex-gap-7[data-v-4989d1ca] { gap: 28px; } .flex-gap-8[data-v-4989d1ca] { gap: 32px; } .flex-gap-10[data-v-4989d1ca] { gap: 40px; } .flex-gap-12[data-v-4989d1ca] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-4989d1ca] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-4989d1ca] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-4989d1ca] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-4989d1ca] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-4989d1ca] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-4989d1ca] { display: none !important; } } .col-none[data-v-4989d1ca] { display: none; } .col-auto[data-v-4989d1ca] { grid-column: auto; } .col-1[data-v-4989d1ca] { grid-column: span 1; } .col-2[data-v-4989d1ca] { grid-column: span 2; } .col-3[data-v-4989d1ca] { grid-column: span 3; } .col-4[data-v-4989d1ca] { grid-column: span 4; } .col-5[data-v-4989d1ca] { grid-column: span 5; } .col-6[data-v-4989d1ca] { grid-column: span 6; } .col-7[data-v-4989d1ca] { grid-column: span 7; } .col-8[data-v-4989d1ca] { grid-column: span 8; } .col-9[data-v-4989d1ca] { grid-column: span 9; } .col-10[data-v-4989d1ca] { grid-column: span 10; } .col-12[data-v-4989d1ca] { grid-column: span 12; } .col-13[data-v-4989d1ca] { grid-column: span 13; } .col-14[data-v-4989d1ca] { grid-column: span 14; } .col-15[data-v-4989d1ca] { grid-column: span 15; } .col-16[data-v-4989d1ca] { grid-column: span 16; } .col-18[data-v-4989d1ca] { grid-column: span 18; } .col-20[data-v-4989d1ca] { grid-column: span 20; } .col-22[data-v-4989d1ca] { grid-column: span 22; } .col-24[data-v-4989d1ca] { grid-column: span 24; } .col-26[data-v-4989d1ca] { grid-column: span 26; } .col-27[data-v-4989d1ca] { grid-column: span 27; } .col-28[data-v-4989d1ca] { grid-column: span 28; } .col-30[data-v-4989d1ca] { grid-column: span 30; } .col-36[data-v-4989d1ca] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-4989d1ca] { display: none; } .col-md-36[data-v-4989d1ca] { grid-column: span 36; } .col-md-28[data-v-4989d1ca] { grid-column: span 28; } .col-md-27[data-v-4989d1ca] { grid-column: span 27; } .col-md-24[data-v-4989d1ca] { grid-column: span 24; } .col-md-22[data-v-4989d1ca] { grid-column: span 22; } .col-md-20[data-v-4989d1ca] { grid-column: span 20; } .col-md-19[data-v-4989d1ca] { grid-column: span 19; } .col-md-18[data-v-4989d1ca] { grid-column: span 18; } .col-md-17[data-v-4989d1ca] { grid-column: span 17; } .col-md-16[data-v-4989d1ca] { grid-column: span 16; } .col-md-15[data-v-4989d1ca] { grid-column: span 15; } .col-md-14[data-v-4989d1ca] { grid-column: span 14; } .col-md-13[data-v-4989d1ca] { grid-column: span 13; } .col-md-12[data-v-4989d1ca] { grid-column: span 12; } .col-md-10[data-v-4989d1ca] { grid-column: span 10; } .col-md-9[data-v-4989d1ca] { grid-column: span 9; } .col-md-8[data-v-4989d1ca] { grid-column: span 8; } .col-md-6[data-v-4989d1ca] { grid-column: span 6; } .col-md-5[data-v-4989d1ca] { grid-column: span 5; } .col-md-4[data-v-4989d1ca] { grid-column: span 4; } .col-md-3[data-v-4989d1ca] { grid-column: span 3; } .col-md-2[data-v-4989d1ca] { grid-column: span 2; } .col-md-1[data-v-4989d1ca] { grid-column: span 1; } .col-md-auto[data-v-4989d1ca] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-4989d1ca] { display: none; } .col-sm-36[data-v-4989d1ca] { grid-column: span 36; } .col-sm-32[data-v-4989d1ca] { grid-column: span 32; } .col-sm-28[data-v-4989d1ca] { grid-column: span 28; } .col-sm-27[data-v-4989d1ca] { grid-column: span 27; } .col-sm-24[data-v-4989d1ca] { grid-column: span 24; } .col-sm-22[data-v-4989d1ca] { grid-column: span 22; } .col-sm-20[data-v-4989d1ca] { grid-column: span 20; } .col-sm-18[data-v-4989d1ca] { grid-column: span 18; } .col-sm-16[data-v-4989d1ca] { grid-column: span 16; } .col-sm-15[data-v-4989d1ca] { grid-column: span 15; } .col-sm-14[data-v-4989d1ca] { grid-column: span 14; } .col-sm-13[data-v-4989d1ca] { grid-column: span 12; } .col-sm-12[data-v-4989d1ca] { grid-column: span 12; } .col-sm-10[data-v-4989d1ca] { grid-column: span 10; } .col-sm-9[data-v-4989d1ca] { grid-column: span 8; } .col-sm-8[data-v-4989d1ca] { grid-column: span 8; } .col-sm-6[data-v-4989d1ca] { grid-column: span 6; } .col-sm-4[data-v-4989d1ca] { grid-column: span 4; } .col-sm-auto[data-v-4989d1ca] { grid-column: auto; } } .fade-enter-active[data-v-4989d1ca] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-4989d1ca] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-4989d1ca], .fade-leave-to[data-v-4989d1ca] { opacity: 0; } .basic-icon-next[data-v-4989d1ca] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; opacity: 0; animation: fadeIn-4989d1ca 0.25s ease forwards; transition: opacity 0.3s ease, transform 0.3s ease, stroke 0.25s ease, color 0.25s ease; } .basic-icon-next[data-v-4989d1ca]:not(.basic-icon-next--custom) { fill: transparent !important; } .basic-icon-next--custom[data-v-4989d1ca] { stroke: none; } .basic-icon-next--pointer[data-v-4989d1ca] { cursor: pointer; } .basic-icon-next--not-allowed[data-v-4989d1ca] { cursor: not-allowed !important; } .basic-icon-next--disabled[data-v-4989d1ca] { opacity: 0.5; pointer-events: none; } .basic-icon-next--active[data-v-4989d1ca] { stroke-width: 1.8; } .basic-icon-next[data-v-4989d1ca]:focus { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* Basics */ .basic-icon-next--color--white[data-v-4989d1ca] { color: #ffffff; } .basic-icon-next--color--black[data-v-4989d1ca] { color: #000000; } /* Neutral */ .basic-icon-next--color--neutral-50[data-v-4989d1ca] { color: #f8f9fb; } .basic-icon-next--color--neutral-100[data-v-4989d1ca] { color: #edf1f5; } .basic-icon-next--color--neutral-200[data-v-4989d1ca] { color: #e2e7ef; } .basic-icon-next--color--neutral-300[data-v-4989d1ca] { color: #cdd5e0; } .basic-icon-next--color--neutral-400[data-v-4989d1ca] { color: #b4bfce; } .basic-icon-next--color--neutral-500[data-v-4989d1ca] { color: #94a2b8; } .basic-icon-next--color--neutral-600[data-v-4989d1ca] { color: #647184; } .basic-icon-next--color--neutral-700[data-v-4989d1ca] { color: #4d5462; } .basic-icon-next--color--neutral-800[data-v-4989d1ca] { color: #3c414c; } .basic-icon-next--color--neutral-900[data-v-4989d1ca] { color: #2b303a; } /* Primary */ .basic-icon-next--color--primary-50[data-v-4989d1ca] { color: var(--primary-50); } .basic-icon-next--color--primary-100[data-v-4989d1ca] { color: var(--primary-100); } .basic-icon-next--color--primary-200[data-v-4989d1ca] { color: var(--primary-200); } .basic-icon-next--color--primary-300[data-v-4989d1ca] { color: var(--primary-300); } .basic-icon-next--color--primary-400[data-v-4989d1ca] { color: var(--primary-400); } .basic-icon-next--color--primary-500[data-v-4989d1ca] { color: var(--primary-500); } .basic-icon-next--color--primary-600[data-v-4989d1ca] { color: var(--primary-600); } .basic-icon-next--color--primary-700[data-v-4989d1ca] { color: var(--primary-700); } .basic-icon-next--color--primary-800[data-v-4989d1ca] { color: var(--primary-800); } .basic-icon-next--color--primary-900[data-v-4989d1ca] { color: var(--primary-900); } /* Secondary */ .basic-icon-next--color--secondary-50[data-v-4989d1ca] { color: var(--secondary-50); } .basic-icon-next--color--secondary-100[data-v-4989d1ca] { color: var(--secondary-100); } .basic-icon-next--color--secondary-200[data-v-4989d1ca] { color: var(--secondary-200); } .basic-icon-next--color--secondary-300[data-v-4989d1ca] { color: var(--secondary-300); } .basic-icon-next--color--secondary-400[data-v-4989d1ca] { color: var(--secondary-400); } .basic-icon-next--color--secondary-500[data-v-4989d1ca] { color: var(--secondary-500); } .basic-icon-next--color--secondary-600[data-v-4989d1ca] { color: var(--secondary-600); } .basic-icon-next--color--secondary-700[data-v-4989d1ca] { color: var(--secondary-700); } .basic-icon-next--color--secondary-800[data-v-4989d1ca] { color: var(--secondary-800); } .basic-icon-next--color--secondary-900[data-v-4989d1ca] { color: var(--secondary-900); } .basic-icon-next--color--secondary-1000[data-v-4989d1ca] { color: var(--secondary-100); } /* Pink */ .basic-icon-next--color--pink-50[data-v-4989d1ca] { color: #fff1f3; } .basic-icon-next--color--pink-100[data-v-4989d1ca] { color: #ffe3e7; } .basic-icon-next--color--pink-200[data-v-4989d1ca] { color: #ffccd6; } .basic-icon-next--color--pink-300[data-v-4989d1ca] { color: #ffa1b4; } .basic-icon-next--color--pink-400[data-v-4989d1ca] { color: #ff708f; } .basic-icon-next--color--pink-500[data-v-4989d1ca] { color: #f93a69; } .basic-icon-next--color--pink-600[data-v-4989d1ca] { color: #e71754; } .basic-icon-next--color--pink-700[data-v-4989d1ca] { color: #c30d46; } .basic-icon-next--color--pink-800[data-v-4989d1ca] { color: #a30e42; } .basic-icon-next--color--pink-900[data-v-4989d1ca] { color: #8b103f; } /* Danger */ .basic-icon-next--color--danger-50[data-v-4989d1ca] { color: #fff1f1; } .basic-icon-next--color--danger-100[data-v-4989d1ca] { color: #ffdfdf; } .basic-icon-next--color--danger-200[data-v-4989d1ca] { color: #ffc5c5; } .basic-icon-next--color--danger-300[data-v-4989d1ca] { color: #ff9d9d; } .basic-icon-next--color--danger-400[data-v-4989d1ca] { color: #ff6464; } .basic-icon-next--color--danger-500[data-v-4989d1ca] { color: #ff4d4d; } .basic-icon-next--color--danger-600[data-v-4989d1ca] { color: #eb1515; } .basic-icon-next--color--danger-700[data-v-4989d1ca] { color: #993a3a; } .basic-icon-next--color--danger-800[data-v-4989d1ca] { color: #a50f0f; } .basic-icon-next--color--danger-900[data-v-4989d1ca] { color: #881414; } /* Success */ .basic-icon-next--color--success-50[data-v-4989d1ca] { color: #f1fcf4; } .basic-icon-next--color--success-100[data-v-4989d1ca] { color: #ddfae6; } .basic-icon-next--color--success-200[data-v-4989d1ca] { color: #bff3d3; } .basic-icon-next--color--success-300[data-v-4989d1ca] { color: #8de8b1; } .basic-icon-next--color--success-400[data-v-4989d1ca] { color: #3ccf77; } .basic-icon-next--color--success-500[data-v-4989d1ca] { color: #2cbb66; } .basic-icon-next--color--success-600[data-v-4989d1ca] { color: #1f9a50; } .basic-icon-next--color--success-700[data-v-4989d1ca] { color: #1c7942; } .basic-icon-next--color--success-800[data-v-4989d1ca] { color: #1b6038; } .basic-icon-next--color--success-900[data-v-4989d1ca] { color: #184f30; } /* Warning */ .basic-icon-next--color--warning-50[data-v-4989d1ca] { color: #fff7ed; } .basic-icon-next--color--warning-100[data-v-4989d1ca] { color: #ffedd5; } .basic-icon-next--color--warning-200[data-v-4989d1ca] { color: #fed7aa; } .basic-icon-next--color--warning-300[data-v-4989d1ca] { color: #fdba74; } .basic-icon-next--color--warning-400[data-v-4989d1ca] { color: #fb923c; } .basic-icon-next--color--warning-500[data-v-4989d1ca] { color: #f97316; } .basic-icon-next--color--warning-600[data-v-4989d1ca] { color: #d9580a; } .basic-icon-next--color--warning-700[data-v-4989d1ca] { color: #b94808; } .basic-icon-next--color--warning-800[data-v-4989d1ca] { color: #9a3b07; } .basic-icon-next--color--warning-900[data-v-4989d1ca] { color: #7a2e05; } /* Info */ .basic-icon-next--color--info-50[data-v-4989d1ca] { color: #eff8ff; } .basic-icon-next--color--info-100[data-v-4989d1ca] { color: #d7edff; } .basic-icon-next--color--info-200[data-v-4989d1ca] { color: #b6e4ff; } .basic-icon-next--color--info-300[data-v-4989d1ca] { color: #75d1ff; } .basic-icon-next--color--info-400[data-v-4989d1ca] { color: #2cbaff; } .basic-icon-next--color--info-500[data-v-4989d1ca] { color: #14adff; } .basic-icon-next--color--info-600[data-v-4989d1ca] { color: #0080d4; } .basic-icon-next--color--info-700[data-v-4989d1ca] { color: #046498; } .basic-icon-next--color--info-800[data-v-4989d1ca] { color: #00568d; } .basic-icon-next--color--info-900[data-v-4989d1ca] { color: #064874; } @keyframes fadeIn-4989d1ca { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-2b602cd3]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-2b602cd3] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-2b602cd3] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-2b602cd3]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-2b602cd3], .theme-mode-light[data-v-2b602cd3] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-2b602cd3], .theme-mode-dark[data-v-2b602cd3] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-2b602cd3]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-2b602cd3]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-2b602cd3] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-2b602cd3] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-2b602cd3]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-2b602cd3], input[disabled][data-v-2b602cd3] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-2b602cd3] { opacity: 0.9; } input[readonly][data-v-2b602cd3] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-2b602cd3] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-2b602cd3]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-2b602cd3]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-2b602cd3]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-2b602cd3] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-2b602cd3]:nth-child(odd), .list-card-desktop__wrapper[data-v-2b602cd3]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-2b602cd3]:nth-child(even), .list-card-desktop__wrapper[data-v-2b602cd3]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-2b602cd3]:nth-child(odd), .listCardDesktopWrapper[data-v-2b602cd3]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-2b602cd3]:nth-child(even), .listCardDesktopWrapper[data-v-2b602cd3]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-2b602cd3] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-2b602cd3] { cursor: pointer; } .card-layout--selectionnable[data-v-2b602cd3]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-2b602cd3] { cursor: auto; } .card-layout--drawer[data-v-2b602cd3] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-2b602cd3] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-2b602cd3] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-2b602cd3] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-2b602cd3] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-2b602cd3] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-2b602cd3]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-2b602cd3] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-2b602cd3] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-2b602cd3] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-2b602cd3] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-2b602cd3] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-2b602cd3] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-2b602cd3] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-2b602cd3] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-2b602cd3] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-2b602cd3] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-2b602cd3] { background-color: #eb1515; } .color-chip--dossiers[data-v-2b602cd3] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-2b602cd3] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-2b602cd3] { background-color: #00a79b; } .color-chip--virements[data-v-2b602cd3] { background-color: var(--secondary-400); } .color-chip--factures[data-v-2b602cd3] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-2b602cd3] { background-color: #eb1515; } .color-recherche-dossiers[data-v-2b602cd3] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-2b602cd3] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-2b602cd3] { background-color: #00a79b; } .color-recherche-virements[data-v-2b602cd3] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-2b602cd3] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-2b602cd3] { color: #00a79b; cursor: pointer; } .scrollable[data-v-2b602cd3] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-2b602cd3] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-2b602cd3] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-2b602cd3] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-2b602cd3] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-2b602cd3] { font-weight: 800; } .grid-cell--column[data-v-2b602cd3] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-2b602cd3] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-2b602cd3] { fill: #00a79b; } .grid-cell--disabled[data-v-2b602cd3] { color: #cccccc; } .grid-cell--disabled svg[data-v-2b602cd3] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-2b602cd3] { white-space: nowrap; } .grid-cell--danger svg[data-v-2b602cd3] { fill: #eb1515; } .grid-cell--span-1[data-v-2b602cd3] { grid-column: span 1; } .grid-cell--span-2[data-v-2b602cd3] { grid-column: span 2; } .grid-cell--span-3[data-v-2b602cd3] { grid-column: span 3; } .grid-cell--span-4[data-v-2b602cd3] { grid-column: span 4; } .grid-cell--span-5[data-v-2b602cd3] { grid-column: span 5; } .grid-cell--span-6[data-v-2b602cd3] { grid-column: span 6; } .grid-cell--span-7[data-v-2b602cd3] { grid-column: span 7; } .grid-cell--span-8[data-v-2b602cd3] { grid-column: span 8; } .grid-cell--span-9[data-v-2b602cd3] { grid-column: span 9; } .grid-cell--span-10[data-v-2b602cd3] { grid-column: span 10; } .grid-cell--span-12[data-v-2b602cd3] { grid-column: span 12; } .grid-cell--span-13[data-v-2b602cd3] { grid-column: span 13; } .grid-cell--span-14[data-v-2b602cd3] { grid-column: span 14; } .grid-cell--span-16[data-v-2b602cd3] { grid-column: span 16; } .grid-cell--span-18[data-v-2b602cd3] { grid-column: span 18; } .grid-cell--span-20[data-v-2b602cd3] { grid-column: span 20; } .grid-cell--span-32[data-v-2b602cd3] { grid-column: span 32; } .grid-cell--span-36[data-v-2b602cd3] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-2b602cd3] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-2b602cd3] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-2b602cd3] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-2b602cd3] { justify-content: center !important; } .elem--bold span[data-v-2b602cd3] { font-weight: 800; } .elem--column[data-v-2b602cd3] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-2b602cd3] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-2b602cd3] { fill: #00a79b; } .elem--clickable[data-v-2b602cd3]:hover { cursor: pointer; } .elem--disabled[data-v-2b602cd3] { color: #cccccc; } .elem--disabled svg[data-v-2b602cd3] { fill: #cccccc; } .elem--nowrap span[data-v-2b602cd3] { white-space: nowrap; } .elem--danger svg[data-v-2b602cd3] { fill: #eb1515; } .elem--span-1[data-v-2b602cd3] { grid-column: span 1; } .elem--span-2[data-v-2b602cd3] { grid-column: span 2; } .elem--span-3[data-v-2b602cd3] { grid-column: span 3; } .elem--span-4[data-v-2b602cd3] { grid-column: span 4; } .elem--span-5[data-v-2b602cd3] { grid-column: span 5; } .elem--span-6[data-v-2b602cd3] { grid-column: span 6; } .elem--span-7[data-v-2b602cd3] { grid-column: span 7; } .elem--span-8[data-v-2b602cd3] { grid-column: span 8; } .elem--span-9[data-v-2b602cd3] { grid-column: span 9; } .elem--span-10[data-v-2b602cd3] { grid-column: span 10; } .elem--span-12[data-v-2b602cd3] { grid-column: span 12; } .elem--span-13[data-v-2b602cd3] { grid-column: span 13; } .elem--span-14[data-v-2b602cd3] { grid-column: span 14; } .elem--span-16[data-v-2b602cd3] { grid-column: span 16; } .elem--span-18[data-v-2b602cd3] { grid-column: span 18; } .elem--span-20[data-v-2b602cd3] { grid-column: span 20; } .elem--span-32[data-v-2b602cd3] { grid-column: span 32; } .elem--span-36[data-v-2b602cd3] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-2b602cd3] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-2b602cd3] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-2b602cd3]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-2b602cd3] { display: flex; } /* flex-direction */ .flex-column[data-v-2b602cd3] { flex-direction: column; } .flex-row[data-v-2b602cd3] { flex-direction: row; } /* flex */ .flex-1[data-v-2b602cd3] { flex: 1 !important; } .flex-2[data-v-2b602cd3] { flex: 2; } .flex-3[data-v-2b602cd3] { flex: 3; } .flex-3[data-v-2b602cd3] { flex: 4; } .flex-5[data-v-2b602cd3] { flex: 5; } .flex-auto[data-v-2b602cd3] { flex: auto; } .flex-none[data-v-2b602cd3] { flex: none; } .flex-content[data-v-2b602cd3] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-2b602cd3] { flex-wrap: wrap; } .flex-nowrap[data-v-2b602cd3] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-2b602cd3] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-2b602cd3] { justify-content: flex-start; } .justify-content-end[data-v-2b602cd3] { justify-content: flex-end; } .justify-content-baseline[data-v-2b602cd3] { justify-content: baseline; } .justify-content-center[data-v-2b602cd3] { justify-content: center; } .justify-content-space-between[data-v-2b602cd3] { justify-content: space-between; } .justify-content-space-around[data-v-2b602cd3] { justify-content: space-around; } .justify-content-space-evenly[data-v-2b602cd3] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-2b602cd3] { align-items: flex-start; } .align-items-flex-end[data-v-2b602cd3] { align-items: flex-end; } .align-items-stretch[data-v-2b602cd3] { align-items: stretch; } .align-items-baseline[data-v-2b602cd3] { align-items: baseline; } .align-items-center[data-v-2b602cd3] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-2b602cd3] { align-content: flex-start; } .align-content-flex-end[data-v-2b602cd3] { align-content: flex-end; } .align-content-center[data-v-2b602cd3] { align-content: center; } .align-content-stretch[data-v-2b602cd3] { align-content: stretch; } .align-content-space-between[data-v-2b602cd3] { align-content: space-between; } .align-content-space-around[data-v-2b602cd3] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-2b602cd3] { align-self: flex-start; } .align-self-flex-end[data-v-2b602cd3] { align-self: flex-end; } .align-self-stretch[data-v-2b602cd3] { align-self: stretch; } .align-self-flex-baseline[data-v-2b602cd3] { align-self: baseline; } .align-self-center[data-v-2b602cd3] { align-self: center; } .align-self-auto[data-v-2b602cd3] { align-self: auto; } .flex-gap-1[data-v-2b602cd3] { gap: 4px; } .flex-gap-2[data-v-2b602cd3] { gap: 8px; } .flex-gap-3[data-v-2b602cd3] { gap: 12px; } .flex-gap-4[data-v-2b602cd3] { gap: 16px; } .flex-gap-5[data-v-2b602cd3] { gap: 20px; } .flex-gap-6[data-v-2b602cd3] { gap: 24px; } .flex-gap-7[data-v-2b602cd3] { gap: 28px; } .flex-gap-8[data-v-2b602cd3] { gap: 32px; } .flex-gap-10[data-v-2b602cd3] { gap: 40px; } .flex-gap-12[data-v-2b602cd3] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-2b602cd3] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-2b602cd3] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-2b602cd3] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-2b602cd3] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-2b602cd3] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-2b602cd3] { display: none !important; } } .col-none[data-v-2b602cd3] { display: none; } .col-auto[data-v-2b602cd3] { grid-column: auto; } .col-1[data-v-2b602cd3] { grid-column: span 1; } .col-2[data-v-2b602cd3] { grid-column: span 2; } .col-3[data-v-2b602cd3] { grid-column: span 3; } .col-4[data-v-2b602cd3] { grid-column: span 4; } .col-5[data-v-2b602cd3] { grid-column: span 5; } .col-6[data-v-2b602cd3] { grid-column: span 6; } .col-7[data-v-2b602cd3] { grid-column: span 7; } .col-8[data-v-2b602cd3] { grid-column: span 8; } .col-9[data-v-2b602cd3] { grid-column: span 9; } .col-10[data-v-2b602cd3] { grid-column: span 10; } .col-12[data-v-2b602cd3] { grid-column: span 12; } .col-13[data-v-2b602cd3] { grid-column: span 13; } .col-14[data-v-2b602cd3] { grid-column: span 14; } .col-15[data-v-2b602cd3] { grid-column: span 15; } .col-16[data-v-2b602cd3] { grid-column: span 16; } .col-18[data-v-2b602cd3] { grid-column: span 18; } .col-20[data-v-2b602cd3] { grid-column: span 20; } .col-22[data-v-2b602cd3] { grid-column: span 22; } .col-24[data-v-2b602cd3] { grid-column: span 24; } .col-26[data-v-2b602cd3] { grid-column: span 26; } .col-27[data-v-2b602cd3] { grid-column: span 27; } .col-28[data-v-2b602cd3] { grid-column: span 28; } .col-30[data-v-2b602cd3] { grid-column: span 30; } .col-36[data-v-2b602cd3] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-2b602cd3] { display: none; } .col-md-36[data-v-2b602cd3] { grid-column: span 36; } .col-md-28[data-v-2b602cd3] { grid-column: span 28; } .col-md-27[data-v-2b602cd3] { grid-column: span 27; } .col-md-24[data-v-2b602cd3] { grid-column: span 24; } .col-md-22[data-v-2b602cd3] { grid-column: span 22; } .col-md-20[data-v-2b602cd3] { grid-column: span 20; } .col-md-19[data-v-2b602cd3] { grid-column: span 19; } .col-md-18[data-v-2b602cd3] { grid-column: span 18; } .col-md-17[data-v-2b602cd3] { grid-column: span 17; } .col-md-16[data-v-2b602cd3] { grid-column: span 16; } .col-md-15[data-v-2b602cd3] { grid-column: span 15; } .col-md-14[data-v-2b602cd3] { grid-column: span 14; } .col-md-13[data-v-2b602cd3] { grid-column: span 13; } .col-md-12[data-v-2b602cd3] { grid-column: span 12; } .col-md-10[data-v-2b602cd3] { grid-column: span 10; } .col-md-9[data-v-2b602cd3] { grid-column: span 9; } .col-md-8[data-v-2b602cd3] { grid-column: span 8; } .col-md-6[data-v-2b602cd3] { grid-column: span 6; } .col-md-5[data-v-2b602cd3] { grid-column: span 5; } .col-md-4[data-v-2b602cd3] { grid-column: span 4; } .col-md-3[data-v-2b602cd3] { grid-column: span 3; } .col-md-2[data-v-2b602cd3] { grid-column: span 2; } .col-md-1[data-v-2b602cd3] { grid-column: span 1; } .col-md-auto[data-v-2b602cd3] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-2b602cd3] { display: none; } .col-sm-36[data-v-2b602cd3] { grid-column: span 36; } .col-sm-32[data-v-2b602cd3] { grid-column: span 32; } .col-sm-28[data-v-2b602cd3] { grid-column: span 28; } .col-sm-27[data-v-2b602cd3] { grid-column: span 27; } .col-sm-24[data-v-2b602cd3] { grid-column: span 24; } .col-sm-22[data-v-2b602cd3] { grid-column: span 22; } .col-sm-20[data-v-2b602cd3] { grid-column: span 20; } .col-sm-18[data-v-2b602cd3] { grid-column: span 18; } .col-sm-16[data-v-2b602cd3] { grid-column: span 16; } .col-sm-15[data-v-2b602cd3] { grid-column: span 15; } .col-sm-14[data-v-2b602cd3] { grid-column: span 14; } .col-sm-13[data-v-2b602cd3] { grid-column: span 12; } .col-sm-12[data-v-2b602cd3] { grid-column: span 12; } .col-sm-10[data-v-2b602cd3] { grid-column: span 10; } .col-sm-9[data-v-2b602cd3] { grid-column: span 8; } .col-sm-8[data-v-2b602cd3] { grid-column: span 8; } .col-sm-6[data-v-2b602cd3] { grid-column: span 6; } .col-sm-4[data-v-2b602cd3] { grid-column: span 4; } .col-sm-auto[data-v-2b602cd3] { grid-column: auto; } } .fade-enter-active[data-v-2b602cd3] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-2b602cd3] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-2b602cd3], .fade-leave-to[data-v-2b602cd3] { opacity: 0; } .elem[data-v-2b602cd3] { display: flex; align-items: center; gap: 8px; transition: color 0.15s ease; } .elem--clickable[data-v-2b602cd3] { cursor: pointer; user-select: none; } .elem--sort[data-v-2b602cd3]:hover { color: var(--primary-600); } .elem.active[data-v-2b602cd3] { color: var(--primary-600); font-weight: 600; } .elem__sort-icon[data-v-2b602cd3] { transition: transform 0.15s ease; } .elem.active .elem__sort-icon[data-v-2b602cd3] { transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-cb561b6d]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-cb561b6d] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-cb561b6d] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-cb561b6d]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-cb561b6d], .theme-mode-light[data-v-cb561b6d] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-cb561b6d], .theme-mode-dark[data-v-cb561b6d] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-cb561b6d]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-cb561b6d]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-cb561b6d] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-cb561b6d] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-cb561b6d]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-cb561b6d], input[disabled][data-v-cb561b6d] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-cb561b6d] { opacity: 0.9; } input[readonly][data-v-cb561b6d] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-cb561b6d] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-cb561b6d]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-cb561b6d]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-cb561b6d]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-cb561b6d] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-cb561b6d]:nth-child(odd), .list-card-desktop__wrapper[data-v-cb561b6d]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-cb561b6d]:nth-child(even), .list-card-desktop__wrapper[data-v-cb561b6d]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-cb561b6d]:nth-child(odd), .listCardDesktopWrapper[data-v-cb561b6d]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-cb561b6d]:nth-child(even), .listCardDesktopWrapper[data-v-cb561b6d]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-cb561b6d] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-cb561b6d] { cursor: pointer; } .card-layout--selectionnable[data-v-cb561b6d]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-cb561b6d] { cursor: auto; } .card-layout--drawer[data-v-cb561b6d] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-cb561b6d] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-cb561b6d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-cb561b6d] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-cb561b6d] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-cb561b6d] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-cb561b6d]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-cb561b6d] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-cb561b6d] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-cb561b6d] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-cb561b6d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-cb561b6d] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-cb561b6d] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-cb561b6d] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-cb561b6d] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-cb561b6d] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-cb561b6d] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-cb561b6d] { background-color: #eb1515; } .color-chip--dossiers[data-v-cb561b6d] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-cb561b6d] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-cb561b6d] { background-color: #00a79b; } .color-chip--virements[data-v-cb561b6d] { background-color: var(--secondary-400); } .color-chip--factures[data-v-cb561b6d] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-cb561b6d] { background-color: #eb1515; } .color-recherche-dossiers[data-v-cb561b6d] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-cb561b6d] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-cb561b6d] { background-color: #00a79b; } .color-recherche-virements[data-v-cb561b6d] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-cb561b6d] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-cb561b6d] { color: #00a79b; cursor: pointer; } .scrollable[data-v-cb561b6d] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-cb561b6d] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-cb561b6d] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-cb561b6d] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-cb561b6d] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-cb561b6d] { font-weight: 800; } .grid-cell--column[data-v-cb561b6d] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-cb561b6d] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-cb561b6d] { fill: #00a79b; } .grid-cell--disabled[data-v-cb561b6d] { color: #cccccc; } .grid-cell--disabled svg[data-v-cb561b6d] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-cb561b6d] { white-space: nowrap; } .grid-cell--danger svg[data-v-cb561b6d] { fill: #eb1515; } .grid-cell--span-1[data-v-cb561b6d] { grid-column: span 1; } .grid-cell--span-2[data-v-cb561b6d] { grid-column: span 2; } .grid-cell--span-3[data-v-cb561b6d] { grid-column: span 3; } .grid-cell--span-4[data-v-cb561b6d] { grid-column: span 4; } .grid-cell--span-5[data-v-cb561b6d] { grid-column: span 5; } .grid-cell--span-6[data-v-cb561b6d] { grid-column: span 6; } .grid-cell--span-7[data-v-cb561b6d] { grid-column: span 7; } .grid-cell--span-8[data-v-cb561b6d] { grid-column: span 8; } .grid-cell--span-9[data-v-cb561b6d] { grid-column: span 9; } .grid-cell--span-10[data-v-cb561b6d] { grid-column: span 10; } .grid-cell--span-12[data-v-cb561b6d] { grid-column: span 12; } .grid-cell--span-13[data-v-cb561b6d] { grid-column: span 13; } .grid-cell--span-14[data-v-cb561b6d] { grid-column: span 14; } .grid-cell--span-16[data-v-cb561b6d] { grid-column: span 16; } .grid-cell--span-18[data-v-cb561b6d] { grid-column: span 18; } .grid-cell--span-20[data-v-cb561b6d] { grid-column: span 20; } .grid-cell--span-32[data-v-cb561b6d] { grid-column: span 32; } .grid-cell--span-36[data-v-cb561b6d] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-cb561b6d] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-cb561b6d] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-cb561b6d] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-cb561b6d] { justify-content: center !important; } .elem--bold span[data-v-cb561b6d] { font-weight: 800; } .elem--column[data-v-cb561b6d] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-cb561b6d] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-cb561b6d] { fill: #00a79b; } .elem--clickable[data-v-cb561b6d]:hover { cursor: pointer; } .elem--disabled[data-v-cb561b6d] { color: #cccccc; } .elem--disabled svg[data-v-cb561b6d] { fill: #cccccc; } .elem--nowrap span[data-v-cb561b6d] { white-space: nowrap; } .elem--danger svg[data-v-cb561b6d] { fill: #eb1515; } .elem--span-1[data-v-cb561b6d] { grid-column: span 1; } .elem--span-2[data-v-cb561b6d] { grid-column: span 2; } .elem--span-3[data-v-cb561b6d] { grid-column: span 3; } .elem--span-4[data-v-cb561b6d] { grid-column: span 4; } .elem--span-5[data-v-cb561b6d] { grid-column: span 5; } .elem--span-6[data-v-cb561b6d] { grid-column: span 6; } .elem--span-7[data-v-cb561b6d] { grid-column: span 7; } .elem--span-8[data-v-cb561b6d] { grid-column: span 8; } .elem--span-9[data-v-cb561b6d] { grid-column: span 9; } .elem--span-10[data-v-cb561b6d] { grid-column: span 10; } .elem--span-12[data-v-cb561b6d] { grid-column: span 12; } .elem--span-13[data-v-cb561b6d] { grid-column: span 13; } .elem--span-14[data-v-cb561b6d] { grid-column: span 14; } .elem--span-16[data-v-cb561b6d] { grid-column: span 16; } .elem--span-18[data-v-cb561b6d] { grid-column: span 18; } .elem--span-20[data-v-cb561b6d] { grid-column: span 20; } .elem--span-32[data-v-cb561b6d] { grid-column: span 32; } .elem--span-36[data-v-cb561b6d] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-cb561b6d] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-cb561b6d] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-cb561b6d]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-cb561b6d] { display: flex; } /* flex-direction */ .flex-column[data-v-cb561b6d] { flex-direction: column; } .flex-row[data-v-cb561b6d] { flex-direction: row; } /* flex */ .flex-1[data-v-cb561b6d] { flex: 1 !important; } .flex-2[data-v-cb561b6d] { flex: 2; } .flex-3[data-v-cb561b6d] { flex: 3; } .flex-3[data-v-cb561b6d] { flex: 4; } .flex-5[data-v-cb561b6d] { flex: 5; } .flex-auto[data-v-cb561b6d] { flex: auto; } .flex-none[data-v-cb561b6d] { flex: none; } .flex-content[data-v-cb561b6d] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-cb561b6d] { flex-wrap: wrap; } .flex-nowrap[data-v-cb561b6d] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-cb561b6d] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-cb561b6d] { justify-content: flex-start; } .justify-content-end[data-v-cb561b6d] { justify-content: flex-end; } .justify-content-baseline[data-v-cb561b6d] { justify-content: baseline; } .justify-content-center[data-v-cb561b6d] { justify-content: center; } .justify-content-space-between[data-v-cb561b6d] { justify-content: space-between; } .justify-content-space-around[data-v-cb561b6d] { justify-content: space-around; } .justify-content-space-evenly[data-v-cb561b6d] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-cb561b6d] { align-items: flex-start; } .align-items-flex-end[data-v-cb561b6d] { align-items: flex-end; } .align-items-stretch[data-v-cb561b6d] { align-items: stretch; } .align-items-baseline[data-v-cb561b6d] { align-items: baseline; } .align-items-center[data-v-cb561b6d] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-cb561b6d] { align-content: flex-start; } .align-content-flex-end[data-v-cb561b6d] { align-content: flex-end; } .align-content-center[data-v-cb561b6d] { align-content: center; } .align-content-stretch[data-v-cb561b6d] { align-content: stretch; } .align-content-space-between[data-v-cb561b6d] { align-content: space-between; } .align-content-space-around[data-v-cb561b6d] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-cb561b6d] { align-self: flex-start; } .align-self-flex-end[data-v-cb561b6d] { align-self: flex-end; } .align-self-stretch[data-v-cb561b6d] { align-self: stretch; } .align-self-flex-baseline[data-v-cb561b6d] { align-self: baseline; } .align-self-center[data-v-cb561b6d] { align-self: center; } .align-self-auto[data-v-cb561b6d] { align-self: auto; } .flex-gap-1[data-v-cb561b6d] { gap: 4px; } .flex-gap-2[data-v-cb561b6d] { gap: 8px; } .flex-gap-3[data-v-cb561b6d] { gap: 12px; } .flex-gap-4[data-v-cb561b6d] { gap: 16px; } .flex-gap-5[data-v-cb561b6d] { gap: 20px; } .flex-gap-6[data-v-cb561b6d] { gap: 24px; } .flex-gap-7[data-v-cb561b6d] { gap: 28px; } .flex-gap-8[data-v-cb561b6d] { gap: 32px; } .flex-gap-10[data-v-cb561b6d] { gap: 40px; } .flex-gap-12[data-v-cb561b6d] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-cb561b6d] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-cb561b6d] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-cb561b6d] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-cb561b6d] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-cb561b6d] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-cb561b6d] { display: none !important; } } .col-none[data-v-cb561b6d] { display: none; } .col-auto[data-v-cb561b6d] { grid-column: auto; } .col-1[data-v-cb561b6d] { grid-column: span 1; } .col-2[data-v-cb561b6d] { grid-column: span 2; } .col-3[data-v-cb561b6d] { grid-column: span 3; } .col-4[data-v-cb561b6d] { grid-column: span 4; } .col-5[data-v-cb561b6d] { grid-column: span 5; } .col-6[data-v-cb561b6d] { grid-column: span 6; } .col-7[data-v-cb561b6d] { grid-column: span 7; } .col-8[data-v-cb561b6d] { grid-column: span 8; } .col-9[data-v-cb561b6d] { grid-column: span 9; } .col-10[data-v-cb561b6d] { grid-column: span 10; } .col-12[data-v-cb561b6d] { grid-column: span 12; } .col-13[data-v-cb561b6d] { grid-column: span 13; } .col-14[data-v-cb561b6d] { grid-column: span 14; } .col-15[data-v-cb561b6d] { grid-column: span 15; } .col-16[data-v-cb561b6d] { grid-column: span 16; } .col-18[data-v-cb561b6d] { grid-column: span 18; } .col-20[data-v-cb561b6d] { grid-column: span 20; } .col-22[data-v-cb561b6d] { grid-column: span 22; } .col-24[data-v-cb561b6d] { grid-column: span 24; } .col-26[data-v-cb561b6d] { grid-column: span 26; } .col-27[data-v-cb561b6d] { grid-column: span 27; } .col-28[data-v-cb561b6d] { grid-column: span 28; } .col-30[data-v-cb561b6d] { grid-column: span 30; } .col-36[data-v-cb561b6d] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-cb561b6d] { display: none; } .col-md-36[data-v-cb561b6d] { grid-column: span 36; } .col-md-28[data-v-cb561b6d] { grid-column: span 28; } .col-md-27[data-v-cb561b6d] { grid-column: span 27; } .col-md-24[data-v-cb561b6d] { grid-column: span 24; } .col-md-22[data-v-cb561b6d] { grid-column: span 22; } .col-md-20[data-v-cb561b6d] { grid-column: span 20; } .col-md-19[data-v-cb561b6d] { grid-column: span 19; } .col-md-18[data-v-cb561b6d] { grid-column: span 18; } .col-md-17[data-v-cb561b6d] { grid-column: span 17; } .col-md-16[data-v-cb561b6d] { grid-column: span 16; } .col-md-15[data-v-cb561b6d] { grid-column: span 15; } .col-md-14[data-v-cb561b6d] { grid-column: span 14; } .col-md-13[data-v-cb561b6d] { grid-column: span 13; } .col-md-12[data-v-cb561b6d] { grid-column: span 12; } .col-md-10[data-v-cb561b6d] { grid-column: span 10; } .col-md-9[data-v-cb561b6d] { grid-column: span 9; } .col-md-8[data-v-cb561b6d] { grid-column: span 8; } .col-md-6[data-v-cb561b6d] { grid-column: span 6; } .col-md-5[data-v-cb561b6d] { grid-column: span 5; } .col-md-4[data-v-cb561b6d] { grid-column: span 4; } .col-md-3[data-v-cb561b6d] { grid-column: span 3; } .col-md-2[data-v-cb561b6d] { grid-column: span 2; } .col-md-1[data-v-cb561b6d] { grid-column: span 1; } .col-md-auto[data-v-cb561b6d] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-cb561b6d] { display: none; } .col-sm-36[data-v-cb561b6d] { grid-column: span 36; } .col-sm-32[data-v-cb561b6d] { grid-column: span 32; } .col-sm-28[data-v-cb561b6d] { grid-column: span 28; } .col-sm-27[data-v-cb561b6d] { grid-column: span 27; } .col-sm-24[data-v-cb561b6d] { grid-column: span 24; } .col-sm-22[data-v-cb561b6d] { grid-column: span 22; } .col-sm-20[data-v-cb561b6d] { grid-column: span 20; } .col-sm-18[data-v-cb561b6d] { grid-column: span 18; } .col-sm-16[data-v-cb561b6d] { grid-column: span 16; } .col-sm-15[data-v-cb561b6d] { grid-column: span 15; } .col-sm-14[data-v-cb561b6d] { grid-column: span 14; } .col-sm-13[data-v-cb561b6d] { grid-column: span 12; } .col-sm-12[data-v-cb561b6d] { grid-column: span 12; } .col-sm-10[data-v-cb561b6d] { grid-column: span 10; } .col-sm-9[data-v-cb561b6d] { grid-column: span 8; } .col-sm-8[data-v-cb561b6d] { grid-column: span 8; } .col-sm-6[data-v-cb561b6d] { grid-column: span 6; } .col-sm-4[data-v-cb561b6d] { grid-column: span 4; } .col-sm-auto[data-v-cb561b6d] { grid-column: auto; } } .fade-enter-active[data-v-cb561b6d] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-cb561b6d] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-cb561b6d], .fade-leave-to[data-v-cb561b6d] { opacity: 0; } @keyframes fadeIn-cb561b6d { 0% { opacity: 0; } 100% { opacity: 1; } } .icon[data-v-cb561b6d] { opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .icon--pointer[data-v-cb561b6d] { cursor: pointer; } .icon--not-allowed[data-v-cb561b6d] { cursor: not-allowed !important; } .icon--disabled[data-v-cb561b6d] { fill: var(--text-disabled) !important; } .icon--color--neutral-400[data-v-cb561b6d] { fill: #b4bfce; } .icon--color--primary-600[data-v-cb561b6d] { fill: var(--primary-600); } .icon--color--primary-400[data-v-cb561b6d] { fill: var(--primary-400); } .icon--color--pink-400[data-v-cb561b6d] { fill: #ff708f; } .icon--color--secondary-800[data-v-cb561b6d] { fill: var(--secondary-800); } .icon--color--secondary-1000[data-v-cb561b6d] { fill: var(--secondary-100); } .icon--color--grey-800[data-v-cb561b6d] { fill: #5a5f73; } .icon.show[data-v-cb561b6d] { opacity: 1; } .icon[data-v-cb561b6d]:focus { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* === Sizes === */ .body-xl { font-size: 16px; } .body-l { font-size: 14px; } .body-m { font-size: 12px; } .body-s { font-size: 10px; } /* === Weights === */ .light { font-weight: 300; } .regular { font-weight: 600; } .semibold { font-weight: 700; } .bold { font-weight: 800; } strong { font-weight: 700; } /* === Styles === */ .italic { font-style: italic; } .normal { font-style: normal; } /* === Text Wrapping & Clamp === */ .text { /* === COLORS === */ /* Primary */ /* Secondary */ /* Neutral */ /* Success */ /* Warning */ /* Info */ /* Danger */ /* Pink */ /* Orange */ /* Yellow */ /* Misc */ } .text--wrap { -webkit-line-clamp: 1; line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .text--wrapAll { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-clamp: 1; -webkit-line-clamp: 1; overflow-wrap: break-word; } .text--pointer { cursor: pointer; } .text--nbMaxLines-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; } .text--nbMaxLines-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3; } .text-color--primary-950 { color: var(--primary-950); } .text-color--primary-900 { color: var(--primary-900); } .text-color--primary-800 { color: var(--primary-800); } .text-color--primary-700 { color: var(--primary-700); } .text-color--primary-600 { color: var(--primary-600); } .text-color--primary-500 { color: var(--primary-500); } .text-color--primary-400 { color: var(--primary-400); } .text-color--primary-300 { color: var(--primary-300); } .text-color--primary-200 { color: var(--primary-200); } .text-color--primary-100 { color: var(--primary-100); } .text-color--primary-50 { color: var(--primary-50); } .text-color--secondary-1000 { color: var(--secondary-100); } .text-color--secondary-950 { color: var(--secondary-950); } .text-color--secondary-900 { color: var(--secondary-900); } .text-color--secondary-800 { color: var(--secondary-800); } .text-color--secondary-700 { color: var(--secondary-700); } .text-color--secondary-600 { color: var(--secondary-600); } .text-color--secondary-500 { color: var(--secondary-500); } .text-color--secondary-400 { color: var(--secondary-400); } .text-color--secondary-300 { color: var(--secondary-300); } .text-color--secondary-200 { color: var(--secondary-200); } .text-color--secondary-100 { color: var(--secondary-100); } .text-color--secondary-50 { color: var(--secondary-50); } .text-color--neutral-950 { color: #1a1e26; } .text-color--neutral-900 { color: #2b303a; } .text-color--neutral-800 { color: #3c414c; } .text-color--neutral-700 { color: #4d5462; } .text-color--neutral-600 { color: #647184; } .text-color--neutral-500 { color: #94a2b8; } .text-color--neutral-400 { color: #b4bfce; } .text-color--neutral-300 { color: #cdd5e0; } .text-color--neutral-200 { color: #e2e7ef; } .text-color--neutral-100 { color: #edf1f5; } .text-color--neutral-50 { color: #f8f9fb; } .text-color--neutral-0 { color: #f8f9fb; } .text-color--success-900 { color: #184f30; } .text-color--success-800 { color: #1b6038; } .text-color--success-700 { color: #1c7942; } .text-color--success-600 { color: #1f9a50; } .text-color--success-500 { color: #2cbb66; } .text-color--success-400 { color: #3ccf77; } .text-color--success-300 { color: #8de8b1; } .text-color--success-200 { color: #bff3d3; } .text-color--success-100 { color: #ddfae6; } .text-color--success-50 { color: #f1fcf4; } .text-color--warning-900 { color: #7a2e05; } .text-color--warning-800 { color: #9a3b07; } .text-color--warning-700 { color: #b94808; } .text-color--warning-600 { color: #d9580a; } .text-color--warning-500 { color: #f97316; } .text-color--warning-400 { color: #fb923c; } .text-color--warning-300 { color: #fdba74; } .text-color--warning-200 { color: #fed7aa; } .text-color--warning-100 { color: #ffedd5; } .text-color--warning-50 { color: #fff7ed; } .text-color--info-950 { color: #0a2647; } .text-color--info-900 { color: #064874; } .text-color--info-800 { color: #00568d; } .text-color--info-700 { color: #046498; } .text-color--info-600 { color: #0080d4; } .text-color--info-500 { color: #14adff; } .text-color--info-400 { color: #2cbaff; } .text-color--info-300 { color: #75d1ff; } .text-color--info-200 { color: #b6e4ff; } .text-color--info-100 { color: #d7edff; } .text-color--info-50 { color: #eff8ff; } .text-color--danger-900 { color: #881414; } .text-color--danger-800 { color: #a50f0f; } .text-color--danger-700 { color: #993a3a; } .text-color--danger-600 { color: #eb1515; } .text-color--danger-500 { color: #ff4d4d; } .text-color--danger-400 { color: #ff6464; } .text-color--danger-300 { color: #ff9d9d; } .text-color--danger-200 { color: #ffc5c5; } .text-color--danger-100 { color: #ffdfdf; } .text-color--danger-50 { color: #fff1f1; } .text-color--pink-950 { color: #4e031d; } .text-color--pink-900 { color: #8b103f; } .text-color--pink-800 { color: #a30e42; } .text-color--pink-700 { color: #c30d46; } .text-color--pink-600 { color: #e71754; } .text-color--pink-500 { color: #f93a69; } .text-color--pink-400 { color: #ff708f; } .text-color--pink-300 { color: #ffa1b4; } .text-color--pink-200 { color: #ffccd6; } .text-color--pink-100 { color: #ffe3e7; } .text-color--pink-50 { color: #fff1f3; } .text-color--orange-900 { color: #7f290f; } .text-color--orange-800 { color: #9e2f0e; } .text-color--orange-700 { color: #c73b07; } .text-color--orange-600 { color: #f05106; } .text-color--orange-500 { color: #ff6707; } .text-color--orange-400 { color: #ff8c37; } .text-color--orange-300 { color: #ffb770; } .text-color--orange-200 { color: #ffd5a8; } .text-color--orange-100 { color: #ffecd4; } .text-color--orange-50 { color: #fff7ed; } .text-color--yellow-900 { color: #7c360b; } .text-color--yellow-800 { color: #984208; } .text-color--yellow-700 { color: #bb5602; } .text-color--yellow-600 { color: #e27d00; } .text-color--yellow-500 { color: #ffa807; } .text-color--yellow-400 { color: #ffc81b; } .text-color--yellow-300 { color: #ffdb46; } .text-color--yellow-200 { color: #ffec85; } .text-color--yellow-100 { color: #fff5c5; } .text-color--yellow-50 { color: #fffcea; } .text-color--dark-jungle-green { color: #0d1e22; } .text-color--white { color: #ffffff; } .text-color--black { color: #000000; } .text-color--red { color: #eb1515; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .tooltip { display: flex; padding: 4px 8px; border-radius: 4px; background: var(--secondary-900); color: #ffffff; position: absolute; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 3000; } .tooltip.is-visible { opacity: 1; transform: translateY(0); } .tooltip::after { content: ""; position: absolute; border: 6px solid transparent; /* On utilise les variables dynamiques pour déplacer la flèche */ transform: translateX(var(--arrow-shift-x, 0)) translateY(var(--arrow-shift-y, 0)); transition: transform 0.2s ease; } .tooltip--bottom::after { bottom: 100%; left: 50%; border-top: 0; border-bottom-color: var(--secondary-900); transform: translateX(calc(-50% - var(--arrow-shift-x, 0))); } .tooltip--top::after { top: 100%; left: 50%; border-bottom: 0; border-top-color: var(--secondary-900); transform: translateX(calc(-50% - var(--arrow-shift-x, 0))); } .tooltip--right::after { right: 100%; top: 50%; border-left: 0; border-right-color: var(--secondary-900); transform: translateY(calc(-50% - var(--arrow-shift-y, 0))); } .tooltip--left::after { left: 100%; top: 50%; border-right: 0; border-left-color: var(--secondary-900); transform: translateY(calc(-50% - var(--arrow-shift-y, 0))); } .hasTooltip { display: inline-flex; position: relative; } .tooltip { transition: opacity 0.2s ease, transform 0.2s ease; } .tooltip.is-visible { opacity: 1; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-2d1c5718]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-2d1c5718] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-2d1c5718] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-2d1c5718]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-2d1c5718], .theme-mode-light[data-v-2d1c5718] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-2d1c5718], .theme-mode-dark[data-v-2d1c5718] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-2d1c5718]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-2d1c5718]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-2d1c5718] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-2d1c5718] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-2d1c5718]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-2d1c5718], input[disabled][data-v-2d1c5718] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-2d1c5718] { opacity: 0.9; } input[readonly][data-v-2d1c5718] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-2d1c5718] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-2d1c5718]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-2d1c5718]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-2d1c5718]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-2d1c5718] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-2d1c5718]:nth-child(odd), .list-card-desktop__wrapper[data-v-2d1c5718]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-2d1c5718]:nth-child(even), .list-card-desktop__wrapper[data-v-2d1c5718]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-2d1c5718]:nth-child(odd), .listCardDesktopWrapper[data-v-2d1c5718]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-2d1c5718]:nth-child(even), .listCardDesktopWrapper[data-v-2d1c5718]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-2d1c5718] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-2d1c5718] { cursor: pointer; } .card-layout--selectionnable[data-v-2d1c5718]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-2d1c5718] { cursor: auto; } .card-layout--drawer[data-v-2d1c5718] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-2d1c5718] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-2d1c5718] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-2d1c5718] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-2d1c5718] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-2d1c5718] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-2d1c5718]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-2d1c5718] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-2d1c5718] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-2d1c5718] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-2d1c5718] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-2d1c5718] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-2d1c5718] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-2d1c5718] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-2d1c5718] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-2d1c5718] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-2d1c5718] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-2d1c5718] { background-color: #eb1515; } .color-chip--dossiers[data-v-2d1c5718] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-2d1c5718] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-2d1c5718] { background-color: #00a79b; } .color-chip--virements[data-v-2d1c5718] { background-color: var(--secondary-400); } .color-chip--factures[data-v-2d1c5718] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-2d1c5718] { background-color: #eb1515; } .color-recherche-dossiers[data-v-2d1c5718] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-2d1c5718] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-2d1c5718] { background-color: #00a79b; } .color-recherche-virements[data-v-2d1c5718] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-2d1c5718] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-2d1c5718] { color: #00a79b; cursor: pointer; } .scrollable[data-v-2d1c5718] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-2d1c5718] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-2d1c5718] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-2d1c5718] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-2d1c5718] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-2d1c5718] { font-weight: 800; } .grid-cell--column[data-v-2d1c5718] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-2d1c5718] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-2d1c5718] { fill: #00a79b; } .grid-cell--disabled[data-v-2d1c5718] { color: #cccccc; } .grid-cell--disabled svg[data-v-2d1c5718] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-2d1c5718] { white-space: nowrap; } .grid-cell--danger svg[data-v-2d1c5718] { fill: #eb1515; } .grid-cell--span-1[data-v-2d1c5718] { grid-column: span 1; } .grid-cell--span-2[data-v-2d1c5718] { grid-column: span 2; } .grid-cell--span-3[data-v-2d1c5718] { grid-column: span 3; } .grid-cell--span-4[data-v-2d1c5718] { grid-column: span 4; } .grid-cell--span-5[data-v-2d1c5718] { grid-column: span 5; } .grid-cell--span-6[data-v-2d1c5718] { grid-column: span 6; } .grid-cell--span-7[data-v-2d1c5718] { grid-column: span 7; } .grid-cell--span-8[data-v-2d1c5718] { grid-column: span 8; } .grid-cell--span-9[data-v-2d1c5718] { grid-column: span 9; } .grid-cell--span-10[data-v-2d1c5718] { grid-column: span 10; } .grid-cell--span-12[data-v-2d1c5718] { grid-column: span 12; } .grid-cell--span-13[data-v-2d1c5718] { grid-column: span 13; } .grid-cell--span-14[data-v-2d1c5718] { grid-column: span 14; } .grid-cell--span-16[data-v-2d1c5718] { grid-column: span 16; } .grid-cell--span-18[data-v-2d1c5718] { grid-column: span 18; } .grid-cell--span-20[data-v-2d1c5718] { grid-column: span 20; } .grid-cell--span-32[data-v-2d1c5718] { grid-column: span 32; } .grid-cell--span-36[data-v-2d1c5718] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-2d1c5718] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-2d1c5718] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-2d1c5718] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-2d1c5718] { justify-content: center !important; } .elem--bold span[data-v-2d1c5718] { font-weight: 800; } .elem--column[data-v-2d1c5718] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-2d1c5718] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-2d1c5718] { fill: #00a79b; } .elem--clickable[data-v-2d1c5718]:hover { cursor: pointer; } .elem--disabled[data-v-2d1c5718] { color: #cccccc; } .elem--disabled svg[data-v-2d1c5718] { fill: #cccccc; } .elem--nowrap span[data-v-2d1c5718] { white-space: nowrap; } .elem--danger svg[data-v-2d1c5718] { fill: #eb1515; } .elem--span-1[data-v-2d1c5718] { grid-column: span 1; } .elem--span-2[data-v-2d1c5718] { grid-column: span 2; } .elem--span-3[data-v-2d1c5718] { grid-column: span 3; } .elem--span-4[data-v-2d1c5718] { grid-column: span 4; } .elem--span-5[data-v-2d1c5718] { grid-column: span 5; } .elem--span-6[data-v-2d1c5718] { grid-column: span 6; } .elem--span-7[data-v-2d1c5718] { grid-column: span 7; } .elem--span-8[data-v-2d1c5718] { grid-column: span 8; } .elem--span-9[data-v-2d1c5718] { grid-column: span 9; } .elem--span-10[data-v-2d1c5718] { grid-column: span 10; } .elem--span-12[data-v-2d1c5718] { grid-column: span 12; } .elem--span-13[data-v-2d1c5718] { grid-column: span 13; } .elem--span-14[data-v-2d1c5718] { grid-column: span 14; } .elem--span-16[data-v-2d1c5718] { grid-column: span 16; } .elem--span-18[data-v-2d1c5718] { grid-column: span 18; } .elem--span-20[data-v-2d1c5718] { grid-column: span 20; } .elem--span-32[data-v-2d1c5718] { grid-column: span 32; } .elem--span-36[data-v-2d1c5718] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-2d1c5718] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-2d1c5718] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-2d1c5718]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-2d1c5718] { display: flex; } /* flex-direction */ .flex-column[data-v-2d1c5718] { flex-direction: column; } .flex-row[data-v-2d1c5718] { flex-direction: row; } /* flex */ .flex-1[data-v-2d1c5718] { flex: 1 !important; } .flex-2[data-v-2d1c5718] { flex: 2; } .flex-3[data-v-2d1c5718] { flex: 3; } .flex-3[data-v-2d1c5718] { flex: 4; } .flex-5[data-v-2d1c5718] { flex: 5; } .flex-auto[data-v-2d1c5718] { flex: auto; } .flex-none[data-v-2d1c5718] { flex: none; } .flex-content[data-v-2d1c5718] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-2d1c5718] { flex-wrap: wrap; } .flex-nowrap[data-v-2d1c5718] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-2d1c5718] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-2d1c5718] { justify-content: flex-start; } .justify-content-end[data-v-2d1c5718] { justify-content: flex-end; } .justify-content-baseline[data-v-2d1c5718] { justify-content: baseline; } .justify-content-center[data-v-2d1c5718] { justify-content: center; } .justify-content-space-between[data-v-2d1c5718] { justify-content: space-between; } .justify-content-space-around[data-v-2d1c5718] { justify-content: space-around; } .justify-content-space-evenly[data-v-2d1c5718] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-2d1c5718] { align-items: flex-start; } .align-items-flex-end[data-v-2d1c5718] { align-items: flex-end; } .align-items-stretch[data-v-2d1c5718] { align-items: stretch; } .align-items-baseline[data-v-2d1c5718] { align-items: baseline; } .align-items-center[data-v-2d1c5718] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-2d1c5718] { align-content: flex-start; } .align-content-flex-end[data-v-2d1c5718] { align-content: flex-end; } .align-content-center[data-v-2d1c5718] { align-content: center; } .align-content-stretch[data-v-2d1c5718] { align-content: stretch; } .align-content-space-between[data-v-2d1c5718] { align-content: space-between; } .align-content-space-around[data-v-2d1c5718] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-2d1c5718] { align-self: flex-start; } .align-self-flex-end[data-v-2d1c5718] { align-self: flex-end; } .align-self-stretch[data-v-2d1c5718] { align-self: stretch; } .align-self-flex-baseline[data-v-2d1c5718] { align-self: baseline; } .align-self-center[data-v-2d1c5718] { align-self: center; } .align-self-auto[data-v-2d1c5718] { align-self: auto; } .flex-gap-1[data-v-2d1c5718] { gap: 4px; } .flex-gap-2[data-v-2d1c5718] { gap: 8px; } .flex-gap-3[data-v-2d1c5718] { gap: 12px; } .flex-gap-4[data-v-2d1c5718] { gap: 16px; } .flex-gap-5[data-v-2d1c5718] { gap: 20px; } .flex-gap-6[data-v-2d1c5718] { gap: 24px; } .flex-gap-7[data-v-2d1c5718] { gap: 28px; } .flex-gap-8[data-v-2d1c5718] { gap: 32px; } .flex-gap-10[data-v-2d1c5718] { gap: 40px; } .flex-gap-12[data-v-2d1c5718] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-2d1c5718] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-2d1c5718] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-2d1c5718] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-2d1c5718] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-2d1c5718] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-2d1c5718] { display: none !important; } } .col-none[data-v-2d1c5718] { display: none; } .col-auto[data-v-2d1c5718] { grid-column: auto; } .col-1[data-v-2d1c5718] { grid-column: span 1; } .col-2[data-v-2d1c5718] { grid-column: span 2; } .col-3[data-v-2d1c5718] { grid-column: span 3; } .col-4[data-v-2d1c5718] { grid-column: span 4; } .col-5[data-v-2d1c5718] { grid-column: span 5; } .col-6[data-v-2d1c5718] { grid-column: span 6; } .col-7[data-v-2d1c5718] { grid-column: span 7; } .col-8[data-v-2d1c5718] { grid-column: span 8; } .col-9[data-v-2d1c5718] { grid-column: span 9; } .col-10[data-v-2d1c5718] { grid-column: span 10; } .col-12[data-v-2d1c5718] { grid-column: span 12; } .col-13[data-v-2d1c5718] { grid-column: span 13; } .col-14[data-v-2d1c5718] { grid-column: span 14; } .col-15[data-v-2d1c5718] { grid-column: span 15; } .col-16[data-v-2d1c5718] { grid-column: span 16; } .col-18[data-v-2d1c5718] { grid-column: span 18; } .col-20[data-v-2d1c5718] { grid-column: span 20; } .col-22[data-v-2d1c5718] { grid-column: span 22; } .col-24[data-v-2d1c5718] { grid-column: span 24; } .col-26[data-v-2d1c5718] { grid-column: span 26; } .col-27[data-v-2d1c5718] { grid-column: span 27; } .col-28[data-v-2d1c5718] { grid-column: span 28; } .col-30[data-v-2d1c5718] { grid-column: span 30; } .col-36[data-v-2d1c5718] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-2d1c5718] { display: none; } .col-md-36[data-v-2d1c5718] { grid-column: span 36; } .col-md-28[data-v-2d1c5718] { grid-column: span 28; } .col-md-27[data-v-2d1c5718] { grid-column: span 27; } .col-md-24[data-v-2d1c5718] { grid-column: span 24; } .col-md-22[data-v-2d1c5718] { grid-column: span 22; } .col-md-20[data-v-2d1c5718] { grid-column: span 20; } .col-md-19[data-v-2d1c5718] { grid-column: span 19; } .col-md-18[data-v-2d1c5718] { grid-column: span 18; } .col-md-17[data-v-2d1c5718] { grid-column: span 17; } .col-md-16[data-v-2d1c5718] { grid-column: span 16; } .col-md-15[data-v-2d1c5718] { grid-column: span 15; } .col-md-14[data-v-2d1c5718] { grid-column: span 14; } .col-md-13[data-v-2d1c5718] { grid-column: span 13; } .col-md-12[data-v-2d1c5718] { grid-column: span 12; } .col-md-10[data-v-2d1c5718] { grid-column: span 10; } .col-md-9[data-v-2d1c5718] { grid-column: span 9; } .col-md-8[data-v-2d1c5718] { grid-column: span 8; } .col-md-6[data-v-2d1c5718] { grid-column: span 6; } .col-md-5[data-v-2d1c5718] { grid-column: span 5; } .col-md-4[data-v-2d1c5718] { grid-column: span 4; } .col-md-3[data-v-2d1c5718] { grid-column: span 3; } .col-md-2[data-v-2d1c5718] { grid-column: span 2; } .col-md-1[data-v-2d1c5718] { grid-column: span 1; } .col-md-auto[data-v-2d1c5718] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-2d1c5718] { display: none; } .col-sm-36[data-v-2d1c5718] { grid-column: span 36; } .col-sm-32[data-v-2d1c5718] { grid-column: span 32; } .col-sm-28[data-v-2d1c5718] { grid-column: span 28; } .col-sm-27[data-v-2d1c5718] { grid-column: span 27; } .col-sm-24[data-v-2d1c5718] { grid-column: span 24; } .col-sm-22[data-v-2d1c5718] { grid-column: span 22; } .col-sm-20[data-v-2d1c5718] { grid-column: span 20; } .col-sm-18[data-v-2d1c5718] { grid-column: span 18; } .col-sm-16[data-v-2d1c5718] { grid-column: span 16; } .col-sm-15[data-v-2d1c5718] { grid-column: span 15; } .col-sm-14[data-v-2d1c5718] { grid-column: span 14; } .col-sm-13[data-v-2d1c5718] { grid-column: span 12; } .col-sm-12[data-v-2d1c5718] { grid-column: span 12; } .col-sm-10[data-v-2d1c5718] { grid-column: span 10; } .col-sm-9[data-v-2d1c5718] { grid-column: span 8; } .col-sm-8[data-v-2d1c5718] { grid-column: span 8; } .col-sm-6[data-v-2d1c5718] { grid-column: span 6; } .col-sm-4[data-v-2d1c5718] { grid-column: span 4; } .col-sm-auto[data-v-2d1c5718] { grid-column: auto; } } .fade-enter-active[data-v-2d1c5718] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-2d1c5718] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-2d1c5718], .fade-leave-to[data-v-2d1c5718] { opacity: 0; } .elem svg[data-v-2d1c5718] { fill: var(--primary-600); } .elem:not(.elem--readonly).elem--danger svg[data-v-2d1c5718] { fill: #eb1515; } .elem--deactivated svg[data-v-2d1c5718] { fill: #cdd5e0; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-e1d7cadf]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-e1d7cadf] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-e1d7cadf] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-e1d7cadf]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-e1d7cadf], .theme-mode-light[data-v-e1d7cadf] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-e1d7cadf], .theme-mode-dark[data-v-e1d7cadf] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-e1d7cadf]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-e1d7cadf]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-e1d7cadf] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-e1d7cadf] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-e1d7cadf]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-e1d7cadf], input[disabled][data-v-e1d7cadf] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-e1d7cadf] { opacity: 0.9; } input[readonly][data-v-e1d7cadf] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-e1d7cadf] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-e1d7cadf]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-e1d7cadf]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-e1d7cadf]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-e1d7cadf] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-e1d7cadf]:nth-child(odd), .list-card-desktop__wrapper[data-v-e1d7cadf]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-e1d7cadf]:nth-child(even), .list-card-desktop__wrapper[data-v-e1d7cadf]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-e1d7cadf]:nth-child(odd), .listCardDesktopWrapper[data-v-e1d7cadf]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-e1d7cadf]:nth-child(even), .listCardDesktopWrapper[data-v-e1d7cadf]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-e1d7cadf] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-e1d7cadf] { cursor: pointer; } .card-layout--selectionnable[data-v-e1d7cadf]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-e1d7cadf] { cursor: auto; } .card-layout--drawer[data-v-e1d7cadf] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-e1d7cadf] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-e1d7cadf] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-e1d7cadf] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-e1d7cadf] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-e1d7cadf] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-e1d7cadf]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-e1d7cadf] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-e1d7cadf] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-e1d7cadf] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-e1d7cadf] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-e1d7cadf] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-e1d7cadf] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-e1d7cadf] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-e1d7cadf] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-e1d7cadf] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-e1d7cadf] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-e1d7cadf] { background-color: #eb1515; } .color-chip--dossiers[data-v-e1d7cadf] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-e1d7cadf] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-e1d7cadf] { background-color: #00a79b; } .color-chip--virements[data-v-e1d7cadf] { background-color: var(--secondary-400); } .color-chip--factures[data-v-e1d7cadf] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-e1d7cadf] { background-color: #eb1515; } .color-recherche-dossiers[data-v-e1d7cadf] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-e1d7cadf] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-e1d7cadf] { background-color: #00a79b; } .color-recherche-virements[data-v-e1d7cadf] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-e1d7cadf] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-e1d7cadf] { color: #00a79b; cursor: pointer; } .scrollable[data-v-e1d7cadf] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-e1d7cadf] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-e1d7cadf] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-e1d7cadf] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-e1d7cadf] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-e1d7cadf] { font-weight: 800; } .grid-cell--column[data-v-e1d7cadf] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-e1d7cadf] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-e1d7cadf] { fill: #00a79b; } .grid-cell--disabled[data-v-e1d7cadf] { color: #cccccc; } .grid-cell--disabled svg[data-v-e1d7cadf] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-e1d7cadf] { white-space: nowrap; } .grid-cell--danger svg[data-v-e1d7cadf] { fill: #eb1515; } .grid-cell--span-1[data-v-e1d7cadf] { grid-column: span 1; } .grid-cell--span-2[data-v-e1d7cadf] { grid-column: span 2; } .grid-cell--span-3[data-v-e1d7cadf] { grid-column: span 3; } .grid-cell--span-4[data-v-e1d7cadf] { grid-column: span 4; } .grid-cell--span-5[data-v-e1d7cadf] { grid-column: span 5; } .grid-cell--span-6[data-v-e1d7cadf] { grid-column: span 6; } .grid-cell--span-7[data-v-e1d7cadf] { grid-column: span 7; } .grid-cell--span-8[data-v-e1d7cadf] { grid-column: span 8; } .grid-cell--span-9[data-v-e1d7cadf] { grid-column: span 9; } .grid-cell--span-10[data-v-e1d7cadf] { grid-column: span 10; } .grid-cell--span-12[data-v-e1d7cadf] { grid-column: span 12; } .grid-cell--span-13[data-v-e1d7cadf] { grid-column: span 13; } .grid-cell--span-14[data-v-e1d7cadf] { grid-column: span 14; } .grid-cell--span-16[data-v-e1d7cadf] { grid-column: span 16; } .grid-cell--span-18[data-v-e1d7cadf] { grid-column: span 18; } .grid-cell--span-20[data-v-e1d7cadf] { grid-column: span 20; } .grid-cell--span-32[data-v-e1d7cadf] { grid-column: span 32; } .grid-cell--span-36[data-v-e1d7cadf] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-e1d7cadf] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-e1d7cadf] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-e1d7cadf] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-e1d7cadf] { justify-content: center !important; } .elem--bold span[data-v-e1d7cadf] { font-weight: 800; } .elem--column[data-v-e1d7cadf] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-e1d7cadf] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-e1d7cadf] { fill: #00a79b; } .elem--clickable[data-v-e1d7cadf]:hover { cursor: pointer; } .elem--disabled[data-v-e1d7cadf] { color: #cccccc; } .elem--disabled svg[data-v-e1d7cadf] { fill: #cccccc; } .elem--nowrap span[data-v-e1d7cadf] { white-space: nowrap; } .elem--danger svg[data-v-e1d7cadf] { fill: #eb1515; } .elem--span-1[data-v-e1d7cadf] { grid-column: span 1; } .elem--span-2[data-v-e1d7cadf] { grid-column: span 2; } .elem--span-3[data-v-e1d7cadf] { grid-column: span 3; } .elem--span-4[data-v-e1d7cadf] { grid-column: span 4; } .elem--span-5[data-v-e1d7cadf] { grid-column: span 5; } .elem--span-6[data-v-e1d7cadf] { grid-column: span 6; } .elem--span-7[data-v-e1d7cadf] { grid-column: span 7; } .elem--span-8[data-v-e1d7cadf] { grid-column: span 8; } .elem--span-9[data-v-e1d7cadf] { grid-column: span 9; } .elem--span-10[data-v-e1d7cadf] { grid-column: span 10; } .elem--span-12[data-v-e1d7cadf] { grid-column: span 12; } .elem--span-13[data-v-e1d7cadf] { grid-column: span 13; } .elem--span-14[data-v-e1d7cadf] { grid-column: span 14; } .elem--span-16[data-v-e1d7cadf] { grid-column: span 16; } .elem--span-18[data-v-e1d7cadf] { grid-column: span 18; } .elem--span-20[data-v-e1d7cadf] { grid-column: span 20; } .elem--span-32[data-v-e1d7cadf] { grid-column: span 32; } .elem--span-36[data-v-e1d7cadf] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-e1d7cadf] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-e1d7cadf] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-e1d7cadf]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-e1d7cadf] { display: flex; } /* flex-direction */ .flex-column[data-v-e1d7cadf] { flex-direction: column; } .flex-row[data-v-e1d7cadf] { flex-direction: row; } /* flex */ .flex-1[data-v-e1d7cadf] { flex: 1 !important; } .flex-2[data-v-e1d7cadf] { flex: 2; } .flex-3[data-v-e1d7cadf] { flex: 3; } .flex-3[data-v-e1d7cadf] { flex: 4; } .flex-5[data-v-e1d7cadf] { flex: 5; } .flex-auto[data-v-e1d7cadf] { flex: auto; } .flex-none[data-v-e1d7cadf] { flex: none; } .flex-content[data-v-e1d7cadf] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-e1d7cadf] { flex-wrap: wrap; } .flex-nowrap[data-v-e1d7cadf] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-e1d7cadf] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-e1d7cadf] { justify-content: flex-start; } .justify-content-end[data-v-e1d7cadf] { justify-content: flex-end; } .justify-content-baseline[data-v-e1d7cadf] { justify-content: baseline; } .justify-content-center[data-v-e1d7cadf] { justify-content: center; } .justify-content-space-between[data-v-e1d7cadf] { justify-content: space-between; } .justify-content-space-around[data-v-e1d7cadf] { justify-content: space-around; } .justify-content-space-evenly[data-v-e1d7cadf] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-e1d7cadf] { align-items: flex-start; } .align-items-flex-end[data-v-e1d7cadf] { align-items: flex-end; } .align-items-stretch[data-v-e1d7cadf] { align-items: stretch; } .align-items-baseline[data-v-e1d7cadf] { align-items: baseline; } .align-items-center[data-v-e1d7cadf] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-e1d7cadf] { align-content: flex-start; } .align-content-flex-end[data-v-e1d7cadf] { align-content: flex-end; } .align-content-center[data-v-e1d7cadf] { align-content: center; } .align-content-stretch[data-v-e1d7cadf] { align-content: stretch; } .align-content-space-between[data-v-e1d7cadf] { align-content: space-between; } .align-content-space-around[data-v-e1d7cadf] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-e1d7cadf] { align-self: flex-start; } .align-self-flex-end[data-v-e1d7cadf] { align-self: flex-end; } .align-self-stretch[data-v-e1d7cadf] { align-self: stretch; } .align-self-flex-baseline[data-v-e1d7cadf] { align-self: baseline; } .align-self-center[data-v-e1d7cadf] { align-self: center; } .align-self-auto[data-v-e1d7cadf] { align-self: auto; } .flex-gap-1[data-v-e1d7cadf] { gap: 4px; } .flex-gap-2[data-v-e1d7cadf] { gap: 8px; } .flex-gap-3[data-v-e1d7cadf] { gap: 12px; } .flex-gap-4[data-v-e1d7cadf] { gap: 16px; } .flex-gap-5[data-v-e1d7cadf] { gap: 20px; } .flex-gap-6[data-v-e1d7cadf] { gap: 24px; } .flex-gap-7[data-v-e1d7cadf] { gap: 28px; } .flex-gap-8[data-v-e1d7cadf] { gap: 32px; } .flex-gap-10[data-v-e1d7cadf] { gap: 40px; } .flex-gap-12[data-v-e1d7cadf] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-e1d7cadf] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-e1d7cadf] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-e1d7cadf] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-e1d7cadf] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-e1d7cadf] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-e1d7cadf] { display: none !important; } } .col-none[data-v-e1d7cadf] { display: none; } .col-auto[data-v-e1d7cadf] { grid-column: auto; } .col-1[data-v-e1d7cadf] { grid-column: span 1; } .col-2[data-v-e1d7cadf] { grid-column: span 2; } .col-3[data-v-e1d7cadf] { grid-column: span 3; } .col-4[data-v-e1d7cadf] { grid-column: span 4; } .col-5[data-v-e1d7cadf] { grid-column: span 5; } .col-6[data-v-e1d7cadf] { grid-column: span 6; } .col-7[data-v-e1d7cadf] { grid-column: span 7; } .col-8[data-v-e1d7cadf] { grid-column: span 8; } .col-9[data-v-e1d7cadf] { grid-column: span 9; } .col-10[data-v-e1d7cadf] { grid-column: span 10; } .col-12[data-v-e1d7cadf] { grid-column: span 12; } .col-13[data-v-e1d7cadf] { grid-column: span 13; } .col-14[data-v-e1d7cadf] { grid-column: span 14; } .col-15[data-v-e1d7cadf] { grid-column: span 15; } .col-16[data-v-e1d7cadf] { grid-column: span 16; } .col-18[data-v-e1d7cadf] { grid-column: span 18; } .col-20[data-v-e1d7cadf] { grid-column: span 20; } .col-22[data-v-e1d7cadf] { grid-column: span 22; } .col-24[data-v-e1d7cadf] { grid-column: span 24; } .col-26[data-v-e1d7cadf] { grid-column: span 26; } .col-27[data-v-e1d7cadf] { grid-column: span 27; } .col-28[data-v-e1d7cadf] { grid-column: span 28; } .col-30[data-v-e1d7cadf] { grid-column: span 30; } .col-36[data-v-e1d7cadf] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-e1d7cadf] { display: none; } .col-md-36[data-v-e1d7cadf] { grid-column: span 36; } .col-md-28[data-v-e1d7cadf] { grid-column: span 28; } .col-md-27[data-v-e1d7cadf] { grid-column: span 27; } .col-md-24[data-v-e1d7cadf] { grid-column: span 24; } .col-md-22[data-v-e1d7cadf] { grid-column: span 22; } .col-md-20[data-v-e1d7cadf] { grid-column: span 20; } .col-md-19[data-v-e1d7cadf] { grid-column: span 19; } .col-md-18[data-v-e1d7cadf] { grid-column: span 18; } .col-md-17[data-v-e1d7cadf] { grid-column: span 17; } .col-md-16[data-v-e1d7cadf] { grid-column: span 16; } .col-md-15[data-v-e1d7cadf] { grid-column: span 15; } .col-md-14[data-v-e1d7cadf] { grid-column: span 14; } .col-md-13[data-v-e1d7cadf] { grid-column: span 13; } .col-md-12[data-v-e1d7cadf] { grid-column: span 12; } .col-md-10[data-v-e1d7cadf] { grid-column: span 10; } .col-md-9[data-v-e1d7cadf] { grid-column: span 9; } .col-md-8[data-v-e1d7cadf] { grid-column: span 8; } .col-md-6[data-v-e1d7cadf] { grid-column: span 6; } .col-md-5[data-v-e1d7cadf] { grid-column: span 5; } .col-md-4[data-v-e1d7cadf] { grid-column: span 4; } .col-md-3[data-v-e1d7cadf] { grid-column: span 3; } .col-md-2[data-v-e1d7cadf] { grid-column: span 2; } .col-md-1[data-v-e1d7cadf] { grid-column: span 1; } .col-md-auto[data-v-e1d7cadf] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-e1d7cadf] { display: none; } .col-sm-36[data-v-e1d7cadf] { grid-column: span 36; } .col-sm-32[data-v-e1d7cadf] { grid-column: span 32; } .col-sm-28[data-v-e1d7cadf] { grid-column: span 28; } .col-sm-27[data-v-e1d7cadf] { grid-column: span 27; } .col-sm-24[data-v-e1d7cadf] { grid-column: span 24; } .col-sm-22[data-v-e1d7cadf] { grid-column: span 22; } .col-sm-20[data-v-e1d7cadf] { grid-column: span 20; } .col-sm-18[data-v-e1d7cadf] { grid-column: span 18; } .col-sm-16[data-v-e1d7cadf] { grid-column: span 16; } .col-sm-15[data-v-e1d7cadf] { grid-column: span 15; } .col-sm-14[data-v-e1d7cadf] { grid-column: span 14; } .col-sm-13[data-v-e1d7cadf] { grid-column: span 12; } .col-sm-12[data-v-e1d7cadf] { grid-column: span 12; } .col-sm-10[data-v-e1d7cadf] { grid-column: span 10; } .col-sm-9[data-v-e1d7cadf] { grid-column: span 8; } .col-sm-8[data-v-e1d7cadf] { grid-column: span 8; } .col-sm-6[data-v-e1d7cadf] { grid-column: span 6; } .col-sm-4[data-v-e1d7cadf] { grid-column: span 4; } .col-sm-auto[data-v-e1d7cadf] { grid-column: auto; } } .fade-enter-active[data-v-e1d7cadf] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-e1d7cadf] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-e1d7cadf], .fade-leave-to[data-v-e1d7cadf] { opacity: 0; } .pagination[data-v-e1d7cadf] { display: flex; align-items: center; gap: 4px; } .pagination--small .pagination__arrow[data-v-e1d7cadf], .pagination--small .pagination__btn[data-v-e1d7cadf] { min-width: 28px; height: 28px; font-size: 12px; } .pagination--small .pagination__results[data-v-e1d7cadf] { font-size: 11px; } .pagination--medium .pagination__arrow[data-v-e1d7cadf], .pagination--medium .pagination__btn[data-v-e1d7cadf] { min-width: 34px; height: 34px; font-size: 13px; } .pagination--large .pagination__arrow[data-v-e1d7cadf], .pagination--large .pagination__btn[data-v-e1d7cadf] { min-width: 40px; height: 40px; font-size: 14px; } .pagination__arrow[data-v-e1d7cadf] { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border: none; border-radius: 8px; background: #e2e7ef; color: #4d5462; cursor: pointer; transition: all 0.15s ease; } .pagination__arrow[data-v-e1d7cadf]:hover:not(:disabled) { background: #cdd5e0; color: #2b303a; } .pagination__arrow--disabled[data-v-e1d7cadf], .pagination__arrow[data-v-e1d7cadf]:disabled { opacity: 0.4; cursor: not-allowed; } .pagination__pages[data-v-e1d7cadf] { display: flex; align-items: center; gap: 2px; background: #e2e7ef; border-radius: 8px; padding: 3px; } .pagination__btn[data-v-e1d7cadf] { min-width: 32px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: transparent; color: #647184; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s ease; user-select: none; } .pagination__btn[data-v-e1d7cadf]:hover:not(:disabled):not(.pagination__btn--active) { background: #cdd5e0; color: #3c414c; } .pagination__btn--active[data-v-e1d7cadf] { background: var(--primary-500); color: white; box-shadow: 0 2px 6px rgba(var(--primary-500-rgb), 0.3); } .pagination__btn--ellipsis[data-v-e1d7cadf] { cursor: default; color: #b4bfce; min-width: 24px; } .pagination__btn--ellipsis[data-v-e1d7cadf]:hover { background: transparent; } .pagination__results[data-v-e1d7cadf] { margin-left: 12px; font-size: 12px; font-weight: 500; color: #94a2b8; white-space: nowrap; } @media (max-width: 600px) { .pagination__results[data-v-e1d7cadf] { display: none; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-61857f88]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-61857f88] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-61857f88] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-61857f88]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-61857f88], .theme-mode-light[data-v-61857f88] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-61857f88], .theme-mode-dark[data-v-61857f88] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-61857f88]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-61857f88]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-61857f88] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-61857f88] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-61857f88]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-61857f88], input[disabled][data-v-61857f88] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-61857f88] { opacity: 0.9; } input[readonly][data-v-61857f88] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-61857f88] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-61857f88]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-61857f88]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-61857f88]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-61857f88] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-61857f88]:nth-child(odd), .list-card-desktop__wrapper[data-v-61857f88]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-61857f88]:nth-child(even), .list-card-desktop__wrapper[data-v-61857f88]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-61857f88]:nth-child(odd), .listCardDesktopWrapper[data-v-61857f88]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-61857f88]:nth-child(even), .listCardDesktopWrapper[data-v-61857f88]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-61857f88] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-61857f88] { cursor: pointer; } .card-layout--selectionnable[data-v-61857f88]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-61857f88] { cursor: auto; } .card-layout--drawer[data-v-61857f88] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-61857f88] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-61857f88] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-61857f88] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-61857f88] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-61857f88] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-61857f88]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-61857f88] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-61857f88] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-61857f88] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-61857f88] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-61857f88] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-61857f88] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-61857f88] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-61857f88] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-61857f88] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-61857f88] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-61857f88] { background-color: #eb1515; } .color-chip--dossiers[data-v-61857f88] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-61857f88] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-61857f88] { background-color: #00a79b; } .color-chip--virements[data-v-61857f88] { background-color: var(--secondary-400); } .color-chip--factures[data-v-61857f88] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-61857f88] { background-color: #eb1515; } .color-recherche-dossiers[data-v-61857f88] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-61857f88] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-61857f88] { background-color: #00a79b; } .color-recherche-virements[data-v-61857f88] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-61857f88] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-61857f88] { color: #00a79b; cursor: pointer; } .scrollable[data-v-61857f88] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-61857f88] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-61857f88] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-61857f88] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-61857f88] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-61857f88] { font-weight: 800; } .grid-cell--column[data-v-61857f88] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-61857f88] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-61857f88] { fill: #00a79b; } .grid-cell--disabled[data-v-61857f88] { color: #cccccc; } .grid-cell--disabled svg[data-v-61857f88] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-61857f88] { white-space: nowrap; } .grid-cell--danger svg[data-v-61857f88] { fill: #eb1515; } .grid-cell--span-1[data-v-61857f88] { grid-column: span 1; } .grid-cell--span-2[data-v-61857f88] { grid-column: span 2; } .grid-cell--span-3[data-v-61857f88] { grid-column: span 3; } .grid-cell--span-4[data-v-61857f88] { grid-column: span 4; } .grid-cell--span-5[data-v-61857f88] { grid-column: span 5; } .grid-cell--span-6[data-v-61857f88] { grid-column: span 6; } .grid-cell--span-7[data-v-61857f88] { grid-column: span 7; } .grid-cell--span-8[data-v-61857f88] { grid-column: span 8; } .grid-cell--span-9[data-v-61857f88] { grid-column: span 9; } .grid-cell--span-10[data-v-61857f88] { grid-column: span 10; } .grid-cell--span-12[data-v-61857f88] { grid-column: span 12; } .grid-cell--span-13[data-v-61857f88] { grid-column: span 13; } .grid-cell--span-14[data-v-61857f88] { grid-column: span 14; } .grid-cell--span-16[data-v-61857f88] { grid-column: span 16; } .grid-cell--span-18[data-v-61857f88] { grid-column: span 18; } .grid-cell--span-20[data-v-61857f88] { grid-column: span 20; } .grid-cell--span-32[data-v-61857f88] { grid-column: span 32; } .grid-cell--span-36[data-v-61857f88] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-61857f88] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-61857f88] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-61857f88] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-61857f88] { justify-content: center !important; } .elem--bold span[data-v-61857f88] { font-weight: 800; } .elem--column[data-v-61857f88] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-61857f88] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-61857f88] { fill: #00a79b; } .elem--clickable[data-v-61857f88]:hover { cursor: pointer; } .elem--disabled[data-v-61857f88] { color: #cccccc; } .elem--disabled svg[data-v-61857f88] { fill: #cccccc; } .elem--nowrap span[data-v-61857f88] { white-space: nowrap; } .elem--danger svg[data-v-61857f88] { fill: #eb1515; } .elem--span-1[data-v-61857f88] { grid-column: span 1; } .elem--span-2[data-v-61857f88] { grid-column: span 2; } .elem--span-3[data-v-61857f88] { grid-column: span 3; } .elem--span-4[data-v-61857f88] { grid-column: span 4; } .elem--span-5[data-v-61857f88] { grid-column: span 5; } .elem--span-6[data-v-61857f88] { grid-column: span 6; } .elem--span-7[data-v-61857f88] { grid-column: span 7; } .elem--span-8[data-v-61857f88] { grid-column: span 8; } .elem--span-9[data-v-61857f88] { grid-column: span 9; } .elem--span-10[data-v-61857f88] { grid-column: span 10; } .elem--span-12[data-v-61857f88] { grid-column: span 12; } .elem--span-13[data-v-61857f88] { grid-column: span 13; } .elem--span-14[data-v-61857f88] { grid-column: span 14; } .elem--span-16[data-v-61857f88] { grid-column: span 16; } .elem--span-18[data-v-61857f88] { grid-column: span 18; } .elem--span-20[data-v-61857f88] { grid-column: span 20; } .elem--span-32[data-v-61857f88] { grid-column: span 32; } .elem--span-36[data-v-61857f88] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-61857f88] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-61857f88] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-61857f88]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-61857f88] { display: flex; } /* flex-direction */ .flex-column[data-v-61857f88] { flex-direction: column; } .flex-row[data-v-61857f88] { flex-direction: row; } /* flex */ .flex-1[data-v-61857f88] { flex: 1 !important; } .flex-2[data-v-61857f88] { flex: 2; } .flex-3[data-v-61857f88] { flex: 3; } .flex-3[data-v-61857f88] { flex: 4; } .flex-5[data-v-61857f88] { flex: 5; } .flex-auto[data-v-61857f88] { flex: auto; } .flex-none[data-v-61857f88] { flex: none; } .flex-content[data-v-61857f88] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-61857f88] { flex-wrap: wrap; } .flex-nowrap[data-v-61857f88] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-61857f88] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-61857f88] { justify-content: flex-start; } .justify-content-end[data-v-61857f88] { justify-content: flex-end; } .justify-content-baseline[data-v-61857f88] { justify-content: baseline; } .justify-content-center[data-v-61857f88] { justify-content: center; } .justify-content-space-between[data-v-61857f88] { justify-content: space-between; } .justify-content-space-around[data-v-61857f88] { justify-content: space-around; } .justify-content-space-evenly[data-v-61857f88] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-61857f88] { align-items: flex-start; } .align-items-flex-end[data-v-61857f88] { align-items: flex-end; } .align-items-stretch[data-v-61857f88] { align-items: stretch; } .align-items-baseline[data-v-61857f88] { align-items: baseline; } .align-items-center[data-v-61857f88] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-61857f88] { align-content: flex-start; } .align-content-flex-end[data-v-61857f88] { align-content: flex-end; } .align-content-center[data-v-61857f88] { align-content: center; } .align-content-stretch[data-v-61857f88] { align-content: stretch; } .align-content-space-between[data-v-61857f88] { align-content: space-between; } .align-content-space-around[data-v-61857f88] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-61857f88] { align-self: flex-start; } .align-self-flex-end[data-v-61857f88] { align-self: flex-end; } .align-self-stretch[data-v-61857f88] { align-self: stretch; } .align-self-flex-baseline[data-v-61857f88] { align-self: baseline; } .align-self-center[data-v-61857f88] { align-self: center; } .align-self-auto[data-v-61857f88] { align-self: auto; } .flex-gap-1[data-v-61857f88] { gap: 4px; } .flex-gap-2[data-v-61857f88] { gap: 8px; } .flex-gap-3[data-v-61857f88] { gap: 12px; } .flex-gap-4[data-v-61857f88] { gap: 16px; } .flex-gap-5[data-v-61857f88] { gap: 20px; } .flex-gap-6[data-v-61857f88] { gap: 24px; } .flex-gap-7[data-v-61857f88] { gap: 28px; } .flex-gap-8[data-v-61857f88] { gap: 32px; } .flex-gap-10[data-v-61857f88] { gap: 40px; } .flex-gap-12[data-v-61857f88] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-61857f88] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-61857f88] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-61857f88] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-61857f88] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-61857f88] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-61857f88] { display: none !important; } } .col-none[data-v-61857f88] { display: none; } .col-auto[data-v-61857f88] { grid-column: auto; } .col-1[data-v-61857f88] { grid-column: span 1; } .col-2[data-v-61857f88] { grid-column: span 2; } .col-3[data-v-61857f88] { grid-column: span 3; } .col-4[data-v-61857f88] { grid-column: span 4; } .col-5[data-v-61857f88] { grid-column: span 5; } .col-6[data-v-61857f88] { grid-column: span 6; } .col-7[data-v-61857f88] { grid-column: span 7; } .col-8[data-v-61857f88] { grid-column: span 8; } .col-9[data-v-61857f88] { grid-column: span 9; } .col-10[data-v-61857f88] { grid-column: span 10; } .col-12[data-v-61857f88] { grid-column: span 12; } .col-13[data-v-61857f88] { grid-column: span 13; } .col-14[data-v-61857f88] { grid-column: span 14; } .col-15[data-v-61857f88] { grid-column: span 15; } .col-16[data-v-61857f88] { grid-column: span 16; } .col-18[data-v-61857f88] { grid-column: span 18; } .col-20[data-v-61857f88] { grid-column: span 20; } .col-22[data-v-61857f88] { grid-column: span 22; } .col-24[data-v-61857f88] { grid-column: span 24; } .col-26[data-v-61857f88] { grid-column: span 26; } .col-27[data-v-61857f88] { grid-column: span 27; } .col-28[data-v-61857f88] { grid-column: span 28; } .col-30[data-v-61857f88] { grid-column: span 30; } .col-36[data-v-61857f88] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-61857f88] { display: none; } .col-md-36[data-v-61857f88] { grid-column: span 36; } .col-md-28[data-v-61857f88] { grid-column: span 28; } .col-md-27[data-v-61857f88] { grid-column: span 27; } .col-md-24[data-v-61857f88] { grid-column: span 24; } .col-md-22[data-v-61857f88] { grid-column: span 22; } .col-md-20[data-v-61857f88] { grid-column: span 20; } .col-md-19[data-v-61857f88] { grid-column: span 19; } .col-md-18[data-v-61857f88] { grid-column: span 18; } .col-md-17[data-v-61857f88] { grid-column: span 17; } .col-md-16[data-v-61857f88] { grid-column: span 16; } .col-md-15[data-v-61857f88] { grid-column: span 15; } .col-md-14[data-v-61857f88] { grid-column: span 14; } .col-md-13[data-v-61857f88] { grid-column: span 13; } .col-md-12[data-v-61857f88] { grid-column: span 12; } .col-md-10[data-v-61857f88] { grid-column: span 10; } .col-md-9[data-v-61857f88] { grid-column: span 9; } .col-md-8[data-v-61857f88] { grid-column: span 8; } .col-md-6[data-v-61857f88] { grid-column: span 6; } .col-md-5[data-v-61857f88] { grid-column: span 5; } .col-md-4[data-v-61857f88] { grid-column: span 4; } .col-md-3[data-v-61857f88] { grid-column: span 3; } .col-md-2[data-v-61857f88] { grid-column: span 2; } .col-md-1[data-v-61857f88] { grid-column: span 1; } .col-md-auto[data-v-61857f88] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-61857f88] { display: none; } .col-sm-36[data-v-61857f88] { grid-column: span 36; } .col-sm-32[data-v-61857f88] { grid-column: span 32; } .col-sm-28[data-v-61857f88] { grid-column: span 28; } .col-sm-27[data-v-61857f88] { grid-column: span 27; } .col-sm-24[data-v-61857f88] { grid-column: span 24; } .col-sm-22[data-v-61857f88] { grid-column: span 22; } .col-sm-20[data-v-61857f88] { grid-column: span 20; } .col-sm-18[data-v-61857f88] { grid-column: span 18; } .col-sm-16[data-v-61857f88] { grid-column: span 16; } .col-sm-15[data-v-61857f88] { grid-column: span 15; } .col-sm-14[data-v-61857f88] { grid-column: span 14; } .col-sm-13[data-v-61857f88] { grid-column: span 12; } .col-sm-12[data-v-61857f88] { grid-column: span 12; } .col-sm-10[data-v-61857f88] { grid-column: span 10; } .col-sm-9[data-v-61857f88] { grid-column: span 8; } .col-sm-8[data-v-61857f88] { grid-column: span 8; } .col-sm-6[data-v-61857f88] { grid-column: span 6; } .col-sm-4[data-v-61857f88] { grid-column: span 4; } .col-sm-auto[data-v-61857f88] { grid-column: auto; } } .fade-enter-active[data-v-61857f88] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-61857f88] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-61857f88], .fade-leave-to[data-v-61857f88] { opacity: 0; } /* ✅ Toujours centré proprement */ .loader-wrapper[data-v-61857f88] { display: flex; align-items: center; justify-content: center; width: 100%; color: white; } .loader[data-v-61857f88] { color: white; border-radius: 50%; border-style: solid; border-color: transparent; animation: spin-61857f88 0.9s linear infinite; } @keyframes spin-61857f88 { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-14009878]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-14009878] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-14009878] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-14009878]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-14009878], .theme-mode-light[data-v-14009878] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-14009878], .theme-mode-dark[data-v-14009878] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-14009878]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-14009878]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-14009878] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-14009878] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-14009878]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-14009878], input[disabled][data-v-14009878] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-14009878] { opacity: 0.9; } input[readonly][data-v-14009878] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-14009878] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-14009878]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-14009878]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-14009878]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-14009878] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-14009878]:nth-child(odd), .list-card-desktop__wrapper[data-v-14009878]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-14009878]:nth-child(even), .list-card-desktop__wrapper[data-v-14009878]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-14009878]:nth-child(odd), .listCardDesktopWrapper[data-v-14009878]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-14009878]:nth-child(even), .listCardDesktopWrapper[data-v-14009878]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-14009878] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-14009878] { cursor: pointer; } .card-layout--selectionnable[data-v-14009878]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-14009878] { cursor: auto; } .card-layout--drawer[data-v-14009878] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-14009878] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-14009878] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-14009878] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-14009878] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-14009878] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-14009878]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-14009878] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-14009878] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-14009878] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-14009878] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-14009878] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-14009878] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-14009878] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-14009878] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-14009878] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-14009878] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-14009878] { background-color: #eb1515; } .color-chip--dossiers[data-v-14009878] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-14009878] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-14009878] { background-color: #00a79b; } .color-chip--virements[data-v-14009878] { background-color: var(--secondary-400); } .color-chip--factures[data-v-14009878] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-14009878] { background-color: #eb1515; } .color-recherche-dossiers[data-v-14009878] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-14009878] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-14009878] { background-color: #00a79b; } .color-recherche-virements[data-v-14009878] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-14009878] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-14009878] { color: #00a79b; cursor: pointer; } .scrollable[data-v-14009878] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-14009878] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-14009878] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-14009878] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-14009878] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-14009878] { font-weight: 800; } .grid-cell--column[data-v-14009878] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-14009878] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-14009878] { fill: #00a79b; } .grid-cell--disabled[data-v-14009878] { color: #cccccc; } .grid-cell--disabled svg[data-v-14009878] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-14009878] { white-space: nowrap; } .grid-cell--danger svg[data-v-14009878] { fill: #eb1515; } .grid-cell--span-1[data-v-14009878] { grid-column: span 1; } .grid-cell--span-2[data-v-14009878] { grid-column: span 2; } .grid-cell--span-3[data-v-14009878] { grid-column: span 3; } .grid-cell--span-4[data-v-14009878] { grid-column: span 4; } .grid-cell--span-5[data-v-14009878] { grid-column: span 5; } .grid-cell--span-6[data-v-14009878] { grid-column: span 6; } .grid-cell--span-7[data-v-14009878] { grid-column: span 7; } .grid-cell--span-8[data-v-14009878] { grid-column: span 8; } .grid-cell--span-9[data-v-14009878] { grid-column: span 9; } .grid-cell--span-10[data-v-14009878] { grid-column: span 10; } .grid-cell--span-12[data-v-14009878] { grid-column: span 12; } .grid-cell--span-13[data-v-14009878] { grid-column: span 13; } .grid-cell--span-14[data-v-14009878] { grid-column: span 14; } .grid-cell--span-16[data-v-14009878] { grid-column: span 16; } .grid-cell--span-18[data-v-14009878] { grid-column: span 18; } .grid-cell--span-20[data-v-14009878] { grid-column: span 20; } .grid-cell--span-32[data-v-14009878] { grid-column: span 32; } .grid-cell--span-36[data-v-14009878] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-14009878] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-14009878] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-14009878] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-14009878] { justify-content: center !important; } .elem--bold span[data-v-14009878] { font-weight: 800; } .elem--column[data-v-14009878] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-14009878] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-14009878] { fill: #00a79b; } .elem--clickable[data-v-14009878]:hover { cursor: pointer; } .elem--disabled[data-v-14009878] { color: #cccccc; } .elem--disabled svg[data-v-14009878] { fill: #cccccc; } .elem--nowrap span[data-v-14009878] { white-space: nowrap; } .elem--danger svg[data-v-14009878] { fill: #eb1515; } .elem--span-1[data-v-14009878] { grid-column: span 1; } .elem--span-2[data-v-14009878] { grid-column: span 2; } .elem--span-3[data-v-14009878] { grid-column: span 3; } .elem--span-4[data-v-14009878] { grid-column: span 4; } .elem--span-5[data-v-14009878] { grid-column: span 5; } .elem--span-6[data-v-14009878] { grid-column: span 6; } .elem--span-7[data-v-14009878] { grid-column: span 7; } .elem--span-8[data-v-14009878] { grid-column: span 8; } .elem--span-9[data-v-14009878] { grid-column: span 9; } .elem--span-10[data-v-14009878] { grid-column: span 10; } .elem--span-12[data-v-14009878] { grid-column: span 12; } .elem--span-13[data-v-14009878] { grid-column: span 13; } .elem--span-14[data-v-14009878] { grid-column: span 14; } .elem--span-16[data-v-14009878] { grid-column: span 16; } .elem--span-18[data-v-14009878] { grid-column: span 18; } .elem--span-20[data-v-14009878] { grid-column: span 20; } .elem--span-32[data-v-14009878] { grid-column: span 32; } .elem--span-36[data-v-14009878] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-14009878] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-14009878] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-14009878]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-14009878] { display: flex; } /* flex-direction */ .flex-column[data-v-14009878] { flex-direction: column; } .flex-row[data-v-14009878] { flex-direction: row; } /* flex */ .flex-1[data-v-14009878] { flex: 1 !important; } .flex-2[data-v-14009878] { flex: 2; } .flex-3[data-v-14009878] { flex: 3; } .flex-3[data-v-14009878] { flex: 4; } .flex-5[data-v-14009878] { flex: 5; } .flex-auto[data-v-14009878] { flex: auto; } .flex-none[data-v-14009878] { flex: none; } .flex-content[data-v-14009878] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-14009878] { flex-wrap: wrap; } .flex-nowrap[data-v-14009878] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-14009878] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-14009878] { justify-content: flex-start; } .justify-content-end[data-v-14009878] { justify-content: flex-end; } .justify-content-baseline[data-v-14009878] { justify-content: baseline; } .justify-content-center[data-v-14009878] { justify-content: center; } .justify-content-space-between[data-v-14009878] { justify-content: space-between; } .justify-content-space-around[data-v-14009878] { justify-content: space-around; } .justify-content-space-evenly[data-v-14009878] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-14009878] { align-items: flex-start; } .align-items-flex-end[data-v-14009878] { align-items: flex-end; } .align-items-stretch[data-v-14009878] { align-items: stretch; } .align-items-baseline[data-v-14009878] { align-items: baseline; } .align-items-center[data-v-14009878] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-14009878] { align-content: flex-start; } .align-content-flex-end[data-v-14009878] { align-content: flex-end; } .align-content-center[data-v-14009878] { align-content: center; } .align-content-stretch[data-v-14009878] { align-content: stretch; } .align-content-space-between[data-v-14009878] { align-content: space-between; } .align-content-space-around[data-v-14009878] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-14009878] { align-self: flex-start; } .align-self-flex-end[data-v-14009878] { align-self: flex-end; } .align-self-stretch[data-v-14009878] { align-self: stretch; } .align-self-flex-baseline[data-v-14009878] { align-self: baseline; } .align-self-center[data-v-14009878] { align-self: center; } .align-self-auto[data-v-14009878] { align-self: auto; } .flex-gap-1[data-v-14009878] { gap: 4px; } .flex-gap-2[data-v-14009878] { gap: 8px; } .flex-gap-3[data-v-14009878] { gap: 12px; } .flex-gap-4[data-v-14009878] { gap: 16px; } .flex-gap-5[data-v-14009878] { gap: 20px; } .flex-gap-6[data-v-14009878] { gap: 24px; } .flex-gap-7[data-v-14009878] { gap: 28px; } .flex-gap-8[data-v-14009878] { gap: 32px; } .flex-gap-10[data-v-14009878] { gap: 40px; } .flex-gap-12[data-v-14009878] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-14009878] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-14009878] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-14009878] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-14009878] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-14009878] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-14009878] { display: none !important; } } .col-none[data-v-14009878] { display: none; } .col-auto[data-v-14009878] { grid-column: auto; } .col-1[data-v-14009878] { grid-column: span 1; } .col-2[data-v-14009878] { grid-column: span 2; } .col-3[data-v-14009878] { grid-column: span 3; } .col-4[data-v-14009878] { grid-column: span 4; } .col-5[data-v-14009878] { grid-column: span 5; } .col-6[data-v-14009878] { grid-column: span 6; } .col-7[data-v-14009878] { grid-column: span 7; } .col-8[data-v-14009878] { grid-column: span 8; } .col-9[data-v-14009878] { grid-column: span 9; } .col-10[data-v-14009878] { grid-column: span 10; } .col-12[data-v-14009878] { grid-column: span 12; } .col-13[data-v-14009878] { grid-column: span 13; } .col-14[data-v-14009878] { grid-column: span 14; } .col-15[data-v-14009878] { grid-column: span 15; } .col-16[data-v-14009878] { grid-column: span 16; } .col-18[data-v-14009878] { grid-column: span 18; } .col-20[data-v-14009878] { grid-column: span 20; } .col-22[data-v-14009878] { grid-column: span 22; } .col-24[data-v-14009878] { grid-column: span 24; } .col-26[data-v-14009878] { grid-column: span 26; } .col-27[data-v-14009878] { grid-column: span 27; } .col-28[data-v-14009878] { grid-column: span 28; } .col-30[data-v-14009878] { grid-column: span 30; } .col-36[data-v-14009878] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-14009878] { display: none; } .col-md-36[data-v-14009878] { grid-column: span 36; } .col-md-28[data-v-14009878] { grid-column: span 28; } .col-md-27[data-v-14009878] { grid-column: span 27; } .col-md-24[data-v-14009878] { grid-column: span 24; } .col-md-22[data-v-14009878] { grid-column: span 22; } .col-md-20[data-v-14009878] { grid-column: span 20; } .col-md-19[data-v-14009878] { grid-column: span 19; } .col-md-18[data-v-14009878] { grid-column: span 18; } .col-md-17[data-v-14009878] { grid-column: span 17; } .col-md-16[data-v-14009878] { grid-column: span 16; } .col-md-15[data-v-14009878] { grid-column: span 15; } .col-md-14[data-v-14009878] { grid-column: span 14; } .col-md-13[data-v-14009878] { grid-column: span 13; } .col-md-12[data-v-14009878] { grid-column: span 12; } .col-md-10[data-v-14009878] { grid-column: span 10; } .col-md-9[data-v-14009878] { grid-column: span 9; } .col-md-8[data-v-14009878] { grid-column: span 8; } .col-md-6[data-v-14009878] { grid-column: span 6; } .col-md-5[data-v-14009878] { grid-column: span 5; } .col-md-4[data-v-14009878] { grid-column: span 4; } .col-md-3[data-v-14009878] { grid-column: span 3; } .col-md-2[data-v-14009878] { grid-column: span 2; } .col-md-1[data-v-14009878] { grid-column: span 1; } .col-md-auto[data-v-14009878] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-14009878] { display: none; } .col-sm-36[data-v-14009878] { grid-column: span 36; } .col-sm-32[data-v-14009878] { grid-column: span 32; } .col-sm-28[data-v-14009878] { grid-column: span 28; } .col-sm-27[data-v-14009878] { grid-column: span 27; } .col-sm-24[data-v-14009878] { grid-column: span 24; } .col-sm-22[data-v-14009878] { grid-column: span 22; } .col-sm-20[data-v-14009878] { grid-column: span 20; } .col-sm-18[data-v-14009878] { grid-column: span 18; } .col-sm-16[data-v-14009878] { grid-column: span 16; } .col-sm-15[data-v-14009878] { grid-column: span 15; } .col-sm-14[data-v-14009878] { grid-column: span 14; } .col-sm-13[data-v-14009878] { grid-column: span 12; } .col-sm-12[data-v-14009878] { grid-column: span 12; } .col-sm-10[data-v-14009878] { grid-column: span 10; } .col-sm-9[data-v-14009878] { grid-column: span 8; } .col-sm-8[data-v-14009878] { grid-column: span 8; } .col-sm-6[data-v-14009878] { grid-column: span 6; } .col-sm-4[data-v-14009878] { grid-column: span 4; } .col-sm-auto[data-v-14009878] { grid-column: auto; } } .fade-enter-active[data-v-14009878] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-14009878] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-14009878], .fade-leave-to[data-v-14009878] { opacity: 0; } .wrapper-loader__state[data-v-14009878] { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 60px 20px; color: #647184; min-height: 200px; } .wrapper-loader__content[data-v-14009878] { position: relative; width: 100%; height: 100%; } .loader-overlay[data-v-14009878] { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 10; border-radius: inherit; pointer-events: none; } /* ✨ Transition fade douce */ /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-77cd752c]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-77cd752c] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-77cd752c] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-77cd752c]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-77cd752c], .theme-mode-light[data-v-77cd752c] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-77cd752c], .theme-mode-dark[data-v-77cd752c] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-77cd752c]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-77cd752c]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-77cd752c] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-77cd752c] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-77cd752c]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-77cd752c], input[disabled][data-v-77cd752c] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-77cd752c] { opacity: 0.9; } input[readonly][data-v-77cd752c] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-77cd752c] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-77cd752c]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-77cd752c]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-77cd752c]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-77cd752c] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-77cd752c]:nth-child(odd), .list-card-desktop__wrapper[data-v-77cd752c]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-77cd752c]:nth-child(even), .list-card-desktop__wrapper[data-v-77cd752c]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-77cd752c]:nth-child(odd), .listCardDesktopWrapper[data-v-77cd752c]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-77cd752c]:nth-child(even), .listCardDesktopWrapper[data-v-77cd752c]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-77cd752c] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-77cd752c] { cursor: pointer; } .card-layout--selectionnable[data-v-77cd752c]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-77cd752c] { cursor: auto; } .card-layout--drawer[data-v-77cd752c] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-77cd752c] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-77cd752c] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-77cd752c] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-77cd752c] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-77cd752c] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-77cd752c]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-77cd752c] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-77cd752c] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-77cd752c] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-77cd752c] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-77cd752c] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-77cd752c] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-77cd752c] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-77cd752c] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-77cd752c] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-77cd752c] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-77cd752c] { background-color: #eb1515; } .color-chip--dossiers[data-v-77cd752c] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-77cd752c] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-77cd752c] { background-color: #00a79b; } .color-chip--virements[data-v-77cd752c] { background-color: var(--secondary-400); } .color-chip--factures[data-v-77cd752c] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-77cd752c] { background-color: #eb1515; } .color-recherche-dossiers[data-v-77cd752c] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-77cd752c] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-77cd752c] { background-color: #00a79b; } .color-recherche-virements[data-v-77cd752c] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-77cd752c] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-77cd752c] { color: #00a79b; cursor: pointer; } .scrollable[data-v-77cd752c] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-77cd752c] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-77cd752c] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-77cd752c] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-77cd752c] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-77cd752c] { font-weight: 800; } .grid-cell--column[data-v-77cd752c] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-77cd752c] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-77cd752c] { fill: #00a79b; } .grid-cell--disabled[data-v-77cd752c] { color: #cccccc; } .grid-cell--disabled svg[data-v-77cd752c] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-77cd752c] { white-space: nowrap; } .grid-cell--danger svg[data-v-77cd752c] { fill: #eb1515; } .grid-cell--span-1[data-v-77cd752c] { grid-column: span 1; } .grid-cell--span-2[data-v-77cd752c] { grid-column: span 2; } .grid-cell--span-3[data-v-77cd752c] { grid-column: span 3; } .grid-cell--span-4[data-v-77cd752c] { grid-column: span 4; } .grid-cell--span-5[data-v-77cd752c] { grid-column: span 5; } .grid-cell--span-6[data-v-77cd752c] { grid-column: span 6; } .grid-cell--span-7[data-v-77cd752c] { grid-column: span 7; } .grid-cell--span-8[data-v-77cd752c] { grid-column: span 8; } .grid-cell--span-9[data-v-77cd752c] { grid-column: span 9; } .grid-cell--span-10[data-v-77cd752c] { grid-column: span 10; } .grid-cell--span-12[data-v-77cd752c] { grid-column: span 12; } .grid-cell--span-13[data-v-77cd752c] { grid-column: span 13; } .grid-cell--span-14[data-v-77cd752c] { grid-column: span 14; } .grid-cell--span-16[data-v-77cd752c] { grid-column: span 16; } .grid-cell--span-18[data-v-77cd752c] { grid-column: span 18; } .grid-cell--span-20[data-v-77cd752c] { grid-column: span 20; } .grid-cell--span-32[data-v-77cd752c] { grid-column: span 32; } .grid-cell--span-36[data-v-77cd752c] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-77cd752c] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-77cd752c] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-77cd752c] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-77cd752c] { justify-content: center !important; } .elem--bold span[data-v-77cd752c] { font-weight: 800; } .elem--column[data-v-77cd752c] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-77cd752c] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-77cd752c] { fill: #00a79b; } .elem--clickable[data-v-77cd752c]:hover { cursor: pointer; } .elem--disabled[data-v-77cd752c] { color: #cccccc; } .elem--disabled svg[data-v-77cd752c] { fill: #cccccc; } .elem--nowrap span[data-v-77cd752c] { white-space: nowrap; } .elem--danger svg[data-v-77cd752c] { fill: #eb1515; } .elem--span-1[data-v-77cd752c] { grid-column: span 1; } .elem--span-2[data-v-77cd752c] { grid-column: span 2; } .elem--span-3[data-v-77cd752c] { grid-column: span 3; } .elem--span-4[data-v-77cd752c] { grid-column: span 4; } .elem--span-5[data-v-77cd752c] { grid-column: span 5; } .elem--span-6[data-v-77cd752c] { grid-column: span 6; } .elem--span-7[data-v-77cd752c] { grid-column: span 7; } .elem--span-8[data-v-77cd752c] { grid-column: span 8; } .elem--span-9[data-v-77cd752c] { grid-column: span 9; } .elem--span-10[data-v-77cd752c] { grid-column: span 10; } .elem--span-12[data-v-77cd752c] { grid-column: span 12; } .elem--span-13[data-v-77cd752c] { grid-column: span 13; } .elem--span-14[data-v-77cd752c] { grid-column: span 14; } .elem--span-16[data-v-77cd752c] { grid-column: span 16; } .elem--span-18[data-v-77cd752c] { grid-column: span 18; } .elem--span-20[data-v-77cd752c] { grid-column: span 20; } .elem--span-32[data-v-77cd752c] { grid-column: span 32; } .elem--span-36[data-v-77cd752c] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-77cd752c] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-77cd752c] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-77cd752c]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-77cd752c] { display: flex; } /* flex-direction */ .flex-column[data-v-77cd752c] { flex-direction: column; } .flex-row[data-v-77cd752c] { flex-direction: row; } /* flex */ .flex-1[data-v-77cd752c] { flex: 1 !important; } .flex-2[data-v-77cd752c] { flex: 2; } .flex-3[data-v-77cd752c] { flex: 3; } .flex-3[data-v-77cd752c] { flex: 4; } .flex-5[data-v-77cd752c] { flex: 5; } .flex-auto[data-v-77cd752c] { flex: auto; } .flex-none[data-v-77cd752c] { flex: none; } .flex-content[data-v-77cd752c] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-77cd752c] { flex-wrap: wrap; } .flex-nowrap[data-v-77cd752c] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-77cd752c] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-77cd752c] { justify-content: flex-start; } .justify-content-end[data-v-77cd752c] { justify-content: flex-end; } .justify-content-baseline[data-v-77cd752c] { justify-content: baseline; } .justify-content-center[data-v-77cd752c] { justify-content: center; } .justify-content-space-between[data-v-77cd752c] { justify-content: space-between; } .justify-content-space-around[data-v-77cd752c] { justify-content: space-around; } .justify-content-space-evenly[data-v-77cd752c] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-77cd752c] { align-items: flex-start; } .align-items-flex-end[data-v-77cd752c] { align-items: flex-end; } .align-items-stretch[data-v-77cd752c] { align-items: stretch; } .align-items-baseline[data-v-77cd752c] { align-items: baseline; } .align-items-center[data-v-77cd752c] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-77cd752c] { align-content: flex-start; } .align-content-flex-end[data-v-77cd752c] { align-content: flex-end; } .align-content-center[data-v-77cd752c] { align-content: center; } .align-content-stretch[data-v-77cd752c] { align-content: stretch; } .align-content-space-between[data-v-77cd752c] { align-content: space-between; } .align-content-space-around[data-v-77cd752c] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-77cd752c] { align-self: flex-start; } .align-self-flex-end[data-v-77cd752c] { align-self: flex-end; } .align-self-stretch[data-v-77cd752c] { align-self: stretch; } .align-self-flex-baseline[data-v-77cd752c] { align-self: baseline; } .align-self-center[data-v-77cd752c] { align-self: center; } .align-self-auto[data-v-77cd752c] { align-self: auto; } .flex-gap-1[data-v-77cd752c] { gap: 4px; } .flex-gap-2[data-v-77cd752c] { gap: 8px; } .flex-gap-3[data-v-77cd752c] { gap: 12px; } .flex-gap-4[data-v-77cd752c] { gap: 16px; } .flex-gap-5[data-v-77cd752c] { gap: 20px; } .flex-gap-6[data-v-77cd752c] { gap: 24px; } .flex-gap-7[data-v-77cd752c] { gap: 28px; } .flex-gap-8[data-v-77cd752c] { gap: 32px; } .flex-gap-10[data-v-77cd752c] { gap: 40px; } .flex-gap-12[data-v-77cd752c] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-77cd752c] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-77cd752c] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-77cd752c] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-77cd752c] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-77cd752c] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-77cd752c] { display: none !important; } } .col-none[data-v-77cd752c] { display: none; } .col-auto[data-v-77cd752c] { grid-column: auto; } .col-1[data-v-77cd752c] { grid-column: span 1; } .col-2[data-v-77cd752c] { grid-column: span 2; } .col-3[data-v-77cd752c] { grid-column: span 3; } .col-4[data-v-77cd752c] { grid-column: span 4; } .col-5[data-v-77cd752c] { grid-column: span 5; } .col-6[data-v-77cd752c] { grid-column: span 6; } .col-7[data-v-77cd752c] { grid-column: span 7; } .col-8[data-v-77cd752c] { grid-column: span 8; } .col-9[data-v-77cd752c] { grid-column: span 9; } .col-10[data-v-77cd752c] { grid-column: span 10; } .col-12[data-v-77cd752c] { grid-column: span 12; } .col-13[data-v-77cd752c] { grid-column: span 13; } .col-14[data-v-77cd752c] { grid-column: span 14; } .col-15[data-v-77cd752c] { grid-column: span 15; } .col-16[data-v-77cd752c] { grid-column: span 16; } .col-18[data-v-77cd752c] { grid-column: span 18; } .col-20[data-v-77cd752c] { grid-column: span 20; } .col-22[data-v-77cd752c] { grid-column: span 22; } .col-24[data-v-77cd752c] { grid-column: span 24; } .col-26[data-v-77cd752c] { grid-column: span 26; } .col-27[data-v-77cd752c] { grid-column: span 27; } .col-28[data-v-77cd752c] { grid-column: span 28; } .col-30[data-v-77cd752c] { grid-column: span 30; } .col-36[data-v-77cd752c] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-77cd752c] { display: none; } .col-md-36[data-v-77cd752c] { grid-column: span 36; } .col-md-28[data-v-77cd752c] { grid-column: span 28; } .col-md-27[data-v-77cd752c] { grid-column: span 27; } .col-md-24[data-v-77cd752c] { grid-column: span 24; } .col-md-22[data-v-77cd752c] { grid-column: span 22; } .col-md-20[data-v-77cd752c] { grid-column: span 20; } .col-md-19[data-v-77cd752c] { grid-column: span 19; } .col-md-18[data-v-77cd752c] { grid-column: span 18; } .col-md-17[data-v-77cd752c] { grid-column: span 17; } .col-md-16[data-v-77cd752c] { grid-column: span 16; } .col-md-15[data-v-77cd752c] { grid-column: span 15; } .col-md-14[data-v-77cd752c] { grid-column: span 14; } .col-md-13[data-v-77cd752c] { grid-column: span 13; } .col-md-12[data-v-77cd752c] { grid-column: span 12; } .col-md-10[data-v-77cd752c] { grid-column: span 10; } .col-md-9[data-v-77cd752c] { grid-column: span 9; } .col-md-8[data-v-77cd752c] { grid-column: span 8; } .col-md-6[data-v-77cd752c] { grid-column: span 6; } .col-md-5[data-v-77cd752c] { grid-column: span 5; } .col-md-4[data-v-77cd752c] { grid-column: span 4; } .col-md-3[data-v-77cd752c] { grid-column: span 3; } .col-md-2[data-v-77cd752c] { grid-column: span 2; } .col-md-1[data-v-77cd752c] { grid-column: span 1; } .col-md-auto[data-v-77cd752c] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-77cd752c] { display: none; } .col-sm-36[data-v-77cd752c] { grid-column: span 36; } .col-sm-32[data-v-77cd752c] { grid-column: span 32; } .col-sm-28[data-v-77cd752c] { grid-column: span 28; } .col-sm-27[data-v-77cd752c] { grid-column: span 27; } .col-sm-24[data-v-77cd752c] { grid-column: span 24; } .col-sm-22[data-v-77cd752c] { grid-column: span 22; } .col-sm-20[data-v-77cd752c] { grid-column: span 20; } .col-sm-18[data-v-77cd752c] { grid-column: span 18; } .col-sm-16[data-v-77cd752c] { grid-column: span 16; } .col-sm-15[data-v-77cd752c] { grid-column: span 15; } .col-sm-14[data-v-77cd752c] { grid-column: span 14; } .col-sm-13[data-v-77cd752c] { grid-column: span 12; } .col-sm-12[data-v-77cd752c] { grid-column: span 12; } .col-sm-10[data-v-77cd752c] { grid-column: span 10; } .col-sm-9[data-v-77cd752c] { grid-column: span 8; } .col-sm-8[data-v-77cd752c] { grid-column: span 8; } .col-sm-6[data-v-77cd752c] { grid-column: span 6; } .col-sm-4[data-v-77cd752c] { grid-column: span 4; } .col-sm-auto[data-v-77cd752c] { grid-column: auto; } } .fade-enter-active[data-v-77cd752c] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-77cd752c] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-77cd752c], .fade-leave-to[data-v-77cd752c] { opacity: 0; } /* ══════════════════════════════════════════════════════════════ BASIC ALERT — Composant d'alerte (BEM) ══════════════════════════════════════════════════════════════ Utilise rgba() pour les fonds afin de s'adapter au thème light/dark tout en conservant la sémantique des couleurs. ══════════════════════════════════════════════════════════════ */ .alert[data-v-77cd752c] { flex: 1; display: flex; align-items: flex-start; border-radius: 4px; } .alert--label[data-v-77cd752c] { text-align: left; } .alert svg[data-v-77cd752c] { margin-top: -4px; } .alert__icon-container[data-v-77cd752c] { height: 16px; width: 16px; } .alert--small[data-v-77cd752c] { padding: 4px; } .alert--small svg[data-v-77cd752c] { margin-top: -6px; transform: scale(0.5); } .alert--small .alert__icon-container[data-v-77cd752c] { margin-right: 6px; margin-left: -4px; } .alert--medium[data-v-77cd752c] { padding: 8px; } .alert--medium .alert__icon-container[data-v-77cd752c] { margin-right: 10px; } .alert--medium svg[data-v-77cd752c] { transform: scale(0.7); } .alert--danger[data-v-77cd752c] { background-color: rgba(var(--danger-500-rgb), 0.12); color: #ff4d4d; } .alert--danger svg[data-v-77cd752c] { fill: #ff4d4d; } .alert--success[data-v-77cd752c] { background-color: rgba(var(--success-500-rgb), 0.12); color: #2cbb66; } .alert--success svg[data-v-77cd752c] { fill: #2cbb66; } .alert--info[data-v-77cd752c] { background-color: rgba(var(--info-500-rgb), 0.12); color: #14adff; } .alert--info svg[data-v-77cd752c] { fill: #14adff; } .alert--warning[data-v-77cd752c] { background-color: rgba(var(--warning-500-rgb), 0.12); color: #f97316; } .alert--warning svg[data-v-77cd752c] { fill: #f97316; } .alert--no-bg[data-v-77cd752c] { background-color: transparent; } @container (max-width: 720px) { .stepperButtons[data-v-77cd752c] { display: flex; justify-content: space-between; flex-wrap: wrap; flex: 1; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* ══════════════════════════════════════════════════════════════ BASIC BADGE — Système de couleurs hybride ══════════════════════════════════════════════════════════════ Stratégie de couleurs : - default/secondary/canceled : Variables de thème (s'adaptent light/dark) - success/danger/warning/info/pending : Couleurs sémantiques fixes - color-* (tags) : Couleurs décoratives fixes avec bonne lisibilité ══════════════════════════════════════════════════════════════ */ .badge { max-width: fit-content; display: flex; align-items: center; border-radius: 8px; border: 1px solid; cursor: default; } .badge--medium { height: 30px; padding: 0 8px; gap: 8px; } .badge--small { height: 20px; padding: 0 5px; gap: 4px; } .badge--small svg { transform: scale(0.65); } .badge--default { background-color: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border-default); } .badge--default svg { fill: var(--text-secondary); } .badge--pending { background-color: rgba(249, 115, 22, 0.15); color: #d9580a; border-color: rgba(249, 115, 22, 0.5); } .badge--pending svg { fill: #d9580a; } .badge--error { background-color: rgba(255, 77, 77, 0.15); color: #ff4d4d; border-color: rgba(255, 77, 77, 0.5); } .badge--error svg { fill: #ff4d4d; } .badge--success { background-color: rgba(44, 187, 102, 0.15); color: #1f9a50; border-color: rgba(44, 187, 102, 0.5); } .badge--success svg { fill: #1f9a50; } .badge--info { background-color: rgba(20, 173, 255, 0.15); color: #0080d4; border-color: rgba(20, 173, 255, 0.5); } .badge--info svg { fill: #0080d4; } .badge--canceled { background-color: var(--bg-surface-tertiary); color: var(--text-disabled); border-color: var(--border-default); } .badge--canceled svg { fill: var(--text-disabled); } .badge--warning { background-color: rgba(249, 115, 22, 0.15); color: #d9580a; border-color: rgba(249, 115, 22, 0.5); } .badge--warning svg { fill: #d9580a; } .badge--secondary { background-color: var(--bg-surface-secondary); color: var(--text-muted); border-color: var(--border-subtle); } .badge--secondary svg { fill: var(--text-muted); } .badge--color-primary { background-color: rgba(99, 102, 241, 0.12) !important; color: #4f46e5 !important; border-color: rgba(99, 102, 241, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-primary svg { fill: #4f46e5 !important; } .badge--color-primary .badge__label { color: #4f46e5 !important; } .badge--color-primary:hover { background-color: rgba(99, 102, 241, 0.2) !important; border-color: rgba(99, 102, 241, 0.5) !important; } .badge--color-primary.badge--selected { background-color: #6366f1 !important; color: #ffffff !important; border-color: #4f46e5 !important; } .badge--color-primary.badge--selected svg { fill: #ffffff !important; } .badge--color-primary.badge--selected .badge__label { color: #ffffff !important; } .badge--color-primary.badge--selected:hover { background-color: #4f46e5 !important; } .badge--color-blue { background-color: rgba(20, 173, 255, 0.12) !important; color: #046498 !important; border-color: rgba(20, 173, 255, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-blue svg { fill: #046498 !important; } .badge--color-blue .badge__label { color: #046498 !important; } .badge--color-blue:hover { background-color: rgba(20, 173, 255, 0.2) !important; border-color: rgba(20, 173, 255, 0.5) !important; } .badge--color-blue.badge--selected { background-color: #14adff !important; color: #ffffff !important; border-color: #046498 !important; } .badge--color-blue.badge--selected svg { fill: #ffffff !important; } .badge--color-blue.badge--selected .badge__label { color: #ffffff !important; } .badge--color-blue.badge--selected:hover { background-color: #046498 !important; } .badge--color-purple { background-color: rgba(139, 92, 246, 0.12) !important; color: #7c3aed !important; border-color: rgba(139, 92, 246, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-purple svg { fill: #7c3aed !important; } .badge--color-purple .badge__label { color: #7c3aed !important; } .badge--color-purple:hover { background-color: rgba(139, 92, 246, 0.2) !important; border-color: rgba(139, 92, 246, 0.5) !important; } .badge--color-purple.badge--selected { background-color: #8b5cf6 !important; color: #ffffff !important; border-color: #7c3aed !important; } .badge--color-purple.badge--selected svg { fill: #ffffff !important; } .badge--color-purple.badge--selected .badge__label { color: #ffffff !important; } .badge--color-purple.badge--selected:hover { background-color: #7c3aed !important; } .badge--color-pink { background-color: rgba(236, 72, 153, 0.12) !important; color: #db2777 !important; border-color: rgba(236, 72, 153, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-pink svg { fill: #db2777 !important; } .badge--color-pink .badge__label { color: #db2777 !important; } .badge--color-pink:hover { background-color: rgba(236, 72, 153, 0.2) !important; border-color: rgba(236, 72, 153, 0.5) !important; } .badge--color-pink.badge--selected { background-color: #ec4899 !important; color: #ffffff !important; border-color: #db2777 !important; } .badge--color-pink.badge--selected svg { fill: #ffffff !important; } .badge--color-pink.badge--selected .badge__label { color: #ffffff !important; } .badge--color-pink.badge--selected:hover { background-color: #db2777 !important; } .badge--color-red { background-color: rgba(255, 77, 77, 0.12) !important; color: #993a3a !important; border-color: rgba(255, 77, 77, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-red svg { fill: #993a3a !important; } .badge--color-red .badge__label { color: #993a3a !important; } .badge--color-red:hover { background-color: rgba(255, 77, 77, 0.2) !important; border-color: rgba(255, 77, 77, 0.5) !important; } .badge--color-red.badge--selected { background-color: #ff4d4d !important; color: #ffffff !important; border-color: #993a3a !important; } .badge--color-red.badge--selected svg { fill: #ffffff !important; } .badge--color-red.badge--selected .badge__label { color: #ffffff !important; } .badge--color-red.badge--selected:hover { background-color: #993a3a !important; } .badge--color-orange { background-color: rgba(249, 115, 22, 0.12) !important; color: #b94808 !important; border-color: rgba(249, 115, 22, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-orange svg { fill: #b94808 !important; } .badge--color-orange .badge__label { color: #b94808 !important; } .badge--color-orange:hover { background-color: rgba(249, 115, 22, 0.2) !important; border-color: rgba(249, 115, 22, 0.5) !important; } .badge--color-orange.badge--selected { background-color: #f97316 !important; color: #ffffff !important; border-color: #b94808 !important; } .badge--color-orange.badge--selected svg { fill: #ffffff !important; } .badge--color-orange.badge--selected .badge__label { color: #ffffff !important; } .badge--color-orange.badge--selected:hover { background-color: #b94808 !important; } .badge--color-yellow { background-color: rgba(234, 179, 8, 0.12) !important; color: #a16207 !important; border-color: rgba(234, 179, 8, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-yellow svg { fill: #a16207 !important; } .badge--color-yellow .badge__label { color: #a16207 !important; } .badge--color-yellow:hover { background-color: rgba(234, 179, 8, 0.2) !important; border-color: rgba(234, 179, 8, 0.5) !important; } .badge--color-yellow.badge--selected { background-color: #eab308 !important; color: #422006 !important; border-color: #a16207 !important; } .badge--color-yellow.badge--selected svg { fill: #422006 !important; } .badge--color-yellow.badge--selected .badge__label { color: #422006 !important; } .badge--color-yellow.badge--selected:hover { background-color: #ca8a04 !important; } .badge--color-green { background-color: rgba(44, 187, 102, 0.12) !important; color: #1c7942 !important; border-color: rgba(44, 187, 102, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-green svg { fill: #1c7942 !important; } .badge--color-green .badge__label { color: #1c7942 !important; } .badge--color-green:hover { background-color: rgba(44, 187, 102, 0.2) !important; border-color: rgba(44, 187, 102, 0.5) !important; } .badge--color-green.badge--selected { background-color: #2cbb66 !important; color: #ffffff !important; border-color: #1c7942 !important; } .badge--color-green.badge--selected svg { fill: #ffffff !important; } .badge--color-green.badge--selected .badge__label { color: #ffffff !important; } .badge--color-green.badge--selected:hover { background-color: #1c7942 !important; } .badge--color-teal { background-color: rgba(20, 184, 166, 0.12) !important; color: #0f766e !important; border-color: rgba(20, 184, 166, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-teal svg { fill: #0f766e !important; } .badge--color-teal .badge__label { color: #0f766e !important; } .badge--color-teal:hover { background-color: rgba(20, 184, 166, 0.2) !important; border-color: rgba(20, 184, 166, 0.5) !important; } .badge--color-teal.badge--selected { background-color: #14b8a6 !important; color: #ffffff !important; border-color: #0f766e !important; } .badge--color-teal.badge--selected svg { fill: #ffffff !important; } .badge--color-teal.badge--selected .badge__label { color: #ffffff !important; } .badge--color-teal.badge--selected:hover { background-color: #0f766e !important; } .badge--color-cyan { background-color: rgba(6, 182, 212, 0.12) !important; color: #0e7490 !important; border-color: rgba(6, 182, 212, 0.35) !important; cursor: pointer; transition: all 0.15s ease; } .badge--color-cyan svg { fill: #0e7490 !important; } .badge--color-cyan .badge__label { color: #0e7490 !important; } .badge--color-cyan:hover { background-color: rgba(6, 182, 212, 0.2) !important; border-color: rgba(6, 182, 212, 0.5) !important; } .badge--color-cyan.badge--selected { background-color: #06b6d4 !important; color: #ffffff !important; border-color: #0e7490 !important; } .badge--color-cyan.badge--selected svg { fill: #ffffff !important; } .badge--color-cyan.badge--selected .badge__label { color: #ffffff !important; } .badge--color-cyan.badge--selected:hover { background-color: #0e7490 !important; } .badge .badge__close-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .badge .badge__label { color: inherit !important; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .pbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; border: none; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-weight: 600; cursor: pointer; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; white-space: nowrap; text-decoration: none; outline: none; } .pbtn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; } .pbtn--xl { height: 56px; padding: 0 28px; font-size: 17px; border-radius: 14px; gap: 12px; } .pbtn--xl .pbtn__loader { width: 36px; height: 36px; } .pbtn--xl .pbtn__badge { padding: 4px 10px; font-size: 13px; } .pbtn--lg { height: 48px; padding: 0 24px; font-size: 15px; border-radius: 12px; gap: 10px; } .pbtn--lg .pbtn__loader { width: 32px; height: 32px; } .pbtn--lg .pbtn__badge { padding: 3px 8px; font-size: 12px; } .pbtn--md { height: 42px; padding: 0 20px; font-size: 14px; border-radius: 10px; gap: 8px; } .pbtn--md .pbtn__loader { width: 28px; height: 28px; } .pbtn--md .pbtn__badge { padding: 2px 7px; font-size: 11px; } .pbtn--sm { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 8px; gap: 6px; } .pbtn--sm .pbtn__loader { width: 24px; height: 24px; } .pbtn--sm .pbtn__badge { padding: 2px 6px; font-size: 10px; } .pbtn--xs { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 6px; gap: 5px; } .pbtn--xs .pbtn__loader { width: 20px; height: 20px; } .pbtn--xs .pbtn__badge { padding: 1px 5px; font-size: 9px; } .pbtn--icon-only.pbtn--xl { width: 56px; padding: 0; } .pbtn--icon-only.pbtn--lg { width: 48px; padding: 0; } .pbtn--icon-only.pbtn--md { width: 42px; padding: 0; } .pbtn--icon-only.pbtn--sm { width: 36px; padding: 0; } .pbtn--icon-only.pbtn--xs { width: 30px; padding: 0; } .pbtn--full { width: 100%; } .pbtn--primary.pbtn--solid { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(var(--primary-500-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .pbtn--primary.pbtn--solid:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%); box-shadow: 0 4px 16px rgba(var(--primary-500-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .pbtn--primary.pbtn--solid:active:not(.pbtn--disabled):not(.pbtn--loading) { box-shadow: 0 1px 4px rgba(var(--primary-500-rgb), 0.3); } .pbtn--primary.pbtn--solid.pbtn--loading { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); } .pbtn--primary.pbtn--outline { background: transparent; color: var(--primary-600); border: 2px solid var(--primary-500); } .pbtn--primary.pbtn--outline:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--primary-500-rgb), 0.08); border-color: var(--primary-400); color: var(--primary-500); } .pbtn--primary.pbtn--ghost { background: transparent; color: var(--primary-600); } .pbtn--primary.pbtn--ghost:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--primary-500-rgb), 0.1); color: var(--primary-500); } .pbtn--primary.pbtn--glass { background: rgba(var(--primary-500-rgb), 0.15); backdrop-filter: blur(12px); color: var(--primary-700); border: 1px solid rgba(var(--primary-500-rgb), 0.2); } .pbtn--primary.pbtn--glass:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--primary-500-rgb), 0.25); border-color: rgba(var(--primary-500-rgb), 0.4); } .pbtn--primary.pbtn--gradient { background: linear-gradient(135deg, var(--primary-500) 0%, #8b5cf6 50%, var(--primary-600) 100%); background-size: 200% 200%; color: #ffffff; box-shadow: 0 4px 20px rgba(var(--primary-500-rgb), 0.4); animation: gradient-shift 3s ease infinite; } .pbtn--primary.pbtn--gradient:hover:not(.pbtn--disabled):not(.pbtn--loading) { box-shadow: 0 4px 24px rgba(var(--primary-500-rgb), 0.5); } .pbtn--secondary.pbtn--solid { background: #3c414c; color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .pbtn--secondary.pbtn--solid:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: #4d5462; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .pbtn--secondary.pbtn--solid:active:not(.pbtn--disabled):not(.pbtn--loading) { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .pbtn--secondary.pbtn--outline { background: transparent; color: var(--text-secondary); border: 2px solid var(--border-strong); } .pbtn--secondary.pbtn--outline:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: var(--hover-overlay); border-color: var(--text-muted); color: var(--text-primary); } .pbtn--secondary.pbtn--ghost { background: transparent; color: var(--text-secondary); } .pbtn--secondary.pbtn--ghost:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: var(--hover-overlay); color: var(--text-primary); } .pbtn--secondary.pbtn--glass { background: var(--hover-overlay); backdrop-filter: blur(12px); color: var(--text-secondary); border: 1px solid var(--border-default); } .pbtn--secondary.pbtn--glass:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: var(--active-overlay); border-color: var(--border-strong); } .pbtn--secondary.pbtn--gradient { background: linear-gradient(135deg, #4d5462 0%, #2b303a 100%); color: #ffffff; } .pbtn--danger.pbtn--solid { background: linear-gradient(135deg, #ff4d4d 0%, #eb1515 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(var(--danger-500-rgb), 0.25); } .pbtn--danger.pbtn--solid:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: linear-gradient(135deg, #ff6464 0%, #ff4d4d 100%); box-shadow: 0 4px 16px rgba(var(--danger-500-rgb), 0.4); } .pbtn--danger.pbtn--solid:active:not(.pbtn--disabled):not(.pbtn--loading) { box-shadow: 0 1px 4px rgba(var(--danger-500-rgb), 0.3); } .pbtn--danger.pbtn--outline { background: transparent; color: #eb1515; border: 2px solid #ff4d4d; } .pbtn--danger.pbtn--outline:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--danger-500-rgb), 0.08); border-color: #ff6464; } .pbtn--danger.pbtn--ghost { background: transparent; color: #eb1515; } .pbtn--danger.pbtn--ghost:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--danger-500-rgb), 0.1); } .pbtn--danger.pbtn--glass { background: rgba(var(--danger-500-rgb), 0.1); backdrop-filter: blur(12px); color: #993a3a; border: 1px solid rgba(var(--danger-500-rgb), 0.2); } .pbtn--danger.pbtn--glass:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--danger-500-rgb), 0.15); border-color: rgba(var(--danger-500-rgb), 0.3); } .pbtn--danger.pbtn--gradient { background: linear-gradient(135deg, #ff4d4d 0%, #f97316 100%); color: #ffffff; } .pbtn--success.pbtn--solid { background: linear-gradient(135deg, #2cbb66 0%, #1f9a50 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(var(--success-500-rgb), 0.25); } .pbtn--success.pbtn--solid:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: linear-gradient(135deg, #3ccf77 0%, #2cbb66 100%); box-shadow: 0 4px 16px rgba(var(--success-500-rgb), 0.4); } .pbtn--success.pbtn--solid:active:not(.pbtn--disabled):not(.pbtn--loading) { box-shadow: 0 1px 4px rgba(var(--success-500-rgb), 0.3); } .pbtn--success.pbtn--outline { background: transparent; color: #1f9a50; border: 2px solid #2cbb66; } .pbtn--success.pbtn--outline:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--success-500-rgb), 0.08); border-color: #3ccf77; } .pbtn--success.pbtn--ghost { background: transparent; color: #1f9a50; } .pbtn--success.pbtn--ghost:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--success-500-rgb), 0.1); } .pbtn--success.pbtn--glass { background: rgba(var(--success-500-rgb), 0.1); backdrop-filter: blur(12px); color: #1c7942; border: 1px solid rgba(var(--success-500-rgb), 0.2); } .pbtn--success.pbtn--glass:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(var(--success-500-rgb), 0.15); border-color: rgba(var(--success-500-rgb), 0.3); } .pbtn--success.pbtn--gradient { background: linear-gradient(135deg, #2cbb66 0%, #06b6d4 100%); color: #ffffff; } .pbtn--white.pbtn--solid { background: #ffffff; color: #3c414c; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .pbtn--white.pbtn--solid:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: #f8f9fb; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .pbtn--white.pbtn--solid:active:not(.pbtn--disabled):not(.pbtn--loading) { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .pbtn--white.pbtn--outline { background: transparent; color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.5); } .pbtn--white.pbtn--outline:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; } .pbtn--white.pbtn--ghost { background: transparent; color: #ffffff; } .pbtn--white.pbtn--ghost:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(255, 255, 255, 0.15); } .pbtn--white.pbtn--glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); } .pbtn--white.pbtn--glass:hover:not(.pbtn--disabled):not(.pbtn--loading) { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); } .pbtn--white.pbtn--gradient { background: linear-gradient(135deg, #ffffff 0%, #edf1f5 100%); color: #3c414c; } .pbtn--disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; filter: grayscale(15%); } .pbtn--loading { cursor: wait; pointer-events: none; } .pbtn--active { opacity: 0.9; } .pbtn--glow.pbtn--primary.pbtn--solid { box-shadow: 0 0 20px rgba(var(--primary-500-rgb), 0.5), 0 4px 14px rgba(var(--primary-500-rgb), 0.35); } .pbtn--glow.pbtn--success.pbtn--solid { box-shadow: 0 0 20px rgba(var(--success-500-rgb), 0.5), 0 4px 14px rgba(var(--success-500-rgb), 0.35); } .pbtn--glow.pbtn--danger.pbtn--solid { box-shadow: 0 0 20px rgba(var(--danger-500-rgb), 0.5), 0 4px 14px rgba(var(--danger-500-rgb), 0.35); } .pbtn--pulse { animation: pulse-btn 2s ease-in-out infinite; } .pbtn--pulse.pbtn--success { animation-name: pulse-btn-success; } .pbtn__content { display: flex; align-items: center; justify-content: center; gap: inherit; z-index: 1; } .pbtn__label { position: relative; z-index: 1; } .pbtn__icon { flex-shrink: 0; z-index: 1; } .pbtn__icon--left { margin-right: -2px; } .pbtn__icon--right { margin-left: -2px; } .pbtn__badge { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.25); border-radius: 20px; font-weight: 700; z-index: 1; } .pbtn--outline .pbtn__badge, .pbtn--ghost .pbtn__badge { background: rgba(0, 0, 0, 0.1); } .pbtn--white.pbtn--solid .pbtn__badge { background: rgba(0, 0, 0, 0.08); } .pbtn__shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); transform: skewX(-15deg); transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 2; } .pbtn:hover:not(.pbtn--disabled):not(.pbtn--loading) .pbtn__shine { left: 100%; } .pbtn--outline .pbtn__shine, .pbtn--ghost .pbtn__shine { background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 50%, transparent 100%); } .pbtn__glow { position: absolute; inset: -2px; background: inherit; border-radius: inherit; filter: blur(12px); opacity: 0.5; z-index: -1; pointer-events: none; } .pbtn__loading { display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 1; } .pbtn__loader { position: relative; display: flex; align-items: center; justify-content: center; } .pbtn__loader-ring { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: currentColor; border-radius: 50%; animation: spin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite; } .pbtn--outline .pbtn__loader-ring, .pbtn--ghost .pbtn__loader-ring { border-color: rgba(0, 0, 0, 0.15); border-top-color: currentColor; } .pbtn__loader-icon { animation: pulse-icon 1.5s ease-in-out infinite; } .pbtn__loading-text { display: flex; align-items: center; gap: 2px; font-weight: 600; letter-spacing: 0.3px; } .pbtn__loading-dots { display: flex; gap: 3px; padding-left: 4px; } .pbtn__loading-dots span { width: 4px; height: 4px; background: currentColor; border-radius: 50%; animation: loading-dots 1.4s ease-in-out infinite; } .pbtn__loading-dots span:nth-child(1) { animation-delay: 0s; } .pbtn__loading-dots span:nth-child(2) { animation-delay: 0.2s; } .pbtn__loading-dots span:nth-child(3) { animation-delay: 0.4s; } .pbtn__progress { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); border-radius: 0 0 inherit inherit; animation: progress-bar 4s ease-out forwards; } .pbtn--outline .pbtn__progress, .pbtn--ghost .pbtn__progress { background: currentColor; opacity: 0.5; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-icon { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } @keyframes loading-dots { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } @keyframes progress-bar { 0% { width: 0%; } 15% { width: 15%; } 30% { width: 35%; } 50% { width: 55%; } 70% { width: 70%; } 85% { width: 85%; } 100% { width: 96%; } } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes pulse-btn { 0%, 100% { box-shadow: 0 4px 14px rgba(var(--primary-500-rgb), 0.35); } 50% { box-shadow: 0 6px 20px rgba(var(--primary-500-rgb), 0.5); } } @keyframes pulse-btn-success { 0%, 100% { box-shadow: 0 4px 14px rgba(var(--success-500-rgb), 0.35); } 50% { box-shadow: 0 6px 20px rgba(var(--success-500-rgb), 0.5); } } @media (max-width: 720px) { .pbtn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .pbtn:active:not(.pbtn--disabled):not(.pbtn--loading) { opacity: 0.85; transition: opacity 0.1s ease; } .pbtn--xl { height: 52px; padding: 0 24px; font-size: 16px; } .pbtn--lg { height: 46px; padding: 0 20px; font-size: 14px; } .pbtn--sm { min-height: 44px; } .pbtn--xs { min-height: 40px; padding: 0 14px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .checkbox { height: auto; display: flex; align-items: flex-start; cursor: pointer; min-height: 44px; padding: 8px 0; } @media (max-width: 720px) { .checkbox { padding: 16px 0; } } .checkbox__label { margin: 8px 0 0 8px; font-size: 14px; font-weight: 600; caret-color: transparent; } @media (max-width: 720px) { .checkbox__label { margin-top: 4px; } } .checkbox__icon { width: 16px; height: 16px; align-self: flex-start; background-color: var(--input-bg); display: flex; align-items: center; justify-content: center; border-radius: 4px; margin: 8px 0; transition: background-color 0.15s ease, border-color 0.15s ease; } @media (max-width: 720px) { .checkbox__icon { width: 20px; height: 20px; } } .checkbox__icon--checked { background-color: var(--primary-600); border: 1px solid var(--primary-600); } .checkbox__icon--checked svg { color: white; } .checkbox__icon--unchecked { border: 1px solid var(--input-border); border-radius: 4px; } .checkbox__icon--unchecked:not(.checkbox--indeterminate, .checkbox--disabled):hover { border: 1px solid var(--primary-500); } .checkbox__icon--container { display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; } @media (max-width: 720px) { .checkbox__icon--container { width: 20px; height: 20px; } } .checkbox--disabled { opacity: 0.3; } .checkbox--disabled, .checkbox--readonly { pointer-events: none; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* ══════════════════════════════════════════════════════════════ DROPDOWN ITEM — Light/Dark Theme Support ══════════════════════════════════════════════════════════════ */ .dropdown-item { background-color: var(--dropdown-bg); display: flex; align-items: center; padding: 8px 8px; cursor: pointer; transition: background-color 0.2s; color: var(--text-primary); } .dropdown-item--small { font-size: 10px; } .dropdown-item--small svg { transform: scale(0.7); } .dropdown-item--medium { font-size: 14px; } .dropdown-item--medium svg { transform: scale(0.8); } .dropdown-item--large { font-size: 14px; } .dropdown-item--large svg { transform: scale(0.9); } .dropdown-item--active { background-color: var(--dropdown-item-active); color: var(--dropdown-active-text, var(--text-inverse)); } .dropdown-item--active .dropdown-item__label { color: var(--dropdown-active-text, var(--text-inverse)); } .dropdown-item--active .icon { fill: var(--dropdown-active-text, var(--text-inverse)); } .dropdown-item--highlighted { background-color: var(--dropdown-item-hover); } .dropdown-item--active.dropdown-item--highlighted { background-color: var(--dropdown-item-active); } .dropdown-item:not(.dropdown-item--active):hover { background-color: var(--dropdown-item-hover); } .dropdown-item__label { margin-left: 10px; } .dropdown-item .icon { fill: var(--text-secondary); width: 25px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .noData .svg-container { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; border-radius: 16px; background-color: var(--secondary-800); padding: 24px 48px; max-width: 60%; min-height: 180px; } @media (max-width: 720px) { .noData .svg-container { max-width: 80%; } } @media (max-width: 1160px) { .noData .svg-container { max-width: 80%; } } .noData .image { position: absolute; object-fit: cover; width: 100%; height: 100%; } .noData .overlay-text { text-align: center; pointer-events: none; z-index: 100; max-width: 80%; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .basic-hint { font-style: italic; color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-c22a5605]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-c22a5605] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-c22a5605] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-c22a5605]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-c22a5605], .theme-mode-light[data-v-c22a5605] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-c22a5605], .theme-mode-dark[data-v-c22a5605] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-c22a5605]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-c22a5605]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-c22a5605] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-c22a5605] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-c22a5605]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-c22a5605], input[disabled][data-v-c22a5605] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-c22a5605] { opacity: 0.9; } input[readonly][data-v-c22a5605] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-c22a5605] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-c22a5605]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-c22a5605]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-c22a5605]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-c22a5605] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-c22a5605]:nth-child(odd), .list-card-desktop__wrapper[data-v-c22a5605]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-c22a5605]:nth-child(even), .list-card-desktop__wrapper[data-v-c22a5605]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-c22a5605]:nth-child(odd), .listCardDesktopWrapper[data-v-c22a5605]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-c22a5605]:nth-child(even), .listCardDesktopWrapper[data-v-c22a5605]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-c22a5605] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-c22a5605] { cursor: pointer; } .card-layout--selectionnable[data-v-c22a5605]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-c22a5605] { cursor: auto; } .card-layout--drawer[data-v-c22a5605] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-c22a5605] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-c22a5605] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-c22a5605] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-c22a5605] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-c22a5605] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-c22a5605]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-c22a5605] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-c22a5605] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-c22a5605] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-c22a5605] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-c22a5605] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-c22a5605] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-c22a5605] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-c22a5605] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-c22a5605] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-c22a5605] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-c22a5605] { background-color: #eb1515; } .color-chip--dossiers[data-v-c22a5605] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-c22a5605] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-c22a5605] { background-color: #00a79b; } .color-chip--virements[data-v-c22a5605] { background-color: var(--secondary-400); } .color-chip--factures[data-v-c22a5605] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-c22a5605] { background-color: #eb1515; } .color-recherche-dossiers[data-v-c22a5605] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-c22a5605] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-c22a5605] { background-color: #00a79b; } .color-recherche-virements[data-v-c22a5605] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-c22a5605] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-c22a5605] { color: #00a79b; cursor: pointer; } .scrollable[data-v-c22a5605] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-c22a5605] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-c22a5605] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-c22a5605] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-c22a5605] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-c22a5605] { font-weight: 800; } .grid-cell--column[data-v-c22a5605] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-c22a5605] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-c22a5605] { fill: #00a79b; } .grid-cell--disabled[data-v-c22a5605] { color: #cccccc; } .grid-cell--disabled svg[data-v-c22a5605] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-c22a5605] { white-space: nowrap; } .grid-cell--danger svg[data-v-c22a5605] { fill: #eb1515; } .grid-cell--span-1[data-v-c22a5605] { grid-column: span 1; } .grid-cell--span-2[data-v-c22a5605] { grid-column: span 2; } .grid-cell--span-3[data-v-c22a5605] { grid-column: span 3; } .grid-cell--span-4[data-v-c22a5605] { grid-column: span 4; } .grid-cell--span-5[data-v-c22a5605] { grid-column: span 5; } .grid-cell--span-6[data-v-c22a5605] { grid-column: span 6; } .grid-cell--span-7[data-v-c22a5605] { grid-column: span 7; } .grid-cell--span-8[data-v-c22a5605] { grid-column: span 8; } .grid-cell--span-9[data-v-c22a5605] { grid-column: span 9; } .grid-cell--span-10[data-v-c22a5605] { grid-column: span 10; } .grid-cell--span-12[data-v-c22a5605] { grid-column: span 12; } .grid-cell--span-13[data-v-c22a5605] { grid-column: span 13; } .grid-cell--span-14[data-v-c22a5605] { grid-column: span 14; } .grid-cell--span-16[data-v-c22a5605] { grid-column: span 16; } .grid-cell--span-18[data-v-c22a5605] { grid-column: span 18; } .grid-cell--span-20[data-v-c22a5605] { grid-column: span 20; } .grid-cell--span-32[data-v-c22a5605] { grid-column: span 32; } .grid-cell--span-36[data-v-c22a5605] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-c22a5605] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-c22a5605] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-c22a5605] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-c22a5605] { justify-content: center !important; } .elem--bold span[data-v-c22a5605] { font-weight: 800; } .elem--column[data-v-c22a5605] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-c22a5605] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-c22a5605] { fill: #00a79b; } .elem--clickable[data-v-c22a5605]:hover { cursor: pointer; } .elem--disabled[data-v-c22a5605] { color: #cccccc; } .elem--disabled svg[data-v-c22a5605] { fill: #cccccc; } .elem--nowrap span[data-v-c22a5605] { white-space: nowrap; } .elem--danger svg[data-v-c22a5605] { fill: #eb1515; } .elem--span-1[data-v-c22a5605] { grid-column: span 1; } .elem--span-2[data-v-c22a5605] { grid-column: span 2; } .elem--span-3[data-v-c22a5605] { grid-column: span 3; } .elem--span-4[data-v-c22a5605] { grid-column: span 4; } .elem--span-5[data-v-c22a5605] { grid-column: span 5; } .elem--span-6[data-v-c22a5605] { grid-column: span 6; } .elem--span-7[data-v-c22a5605] { grid-column: span 7; } .elem--span-8[data-v-c22a5605] { grid-column: span 8; } .elem--span-9[data-v-c22a5605] { grid-column: span 9; } .elem--span-10[data-v-c22a5605] { grid-column: span 10; } .elem--span-12[data-v-c22a5605] { grid-column: span 12; } .elem--span-13[data-v-c22a5605] { grid-column: span 13; } .elem--span-14[data-v-c22a5605] { grid-column: span 14; } .elem--span-16[data-v-c22a5605] { grid-column: span 16; } .elem--span-18[data-v-c22a5605] { grid-column: span 18; } .elem--span-20[data-v-c22a5605] { grid-column: span 20; } .elem--span-32[data-v-c22a5605] { grid-column: span 32; } .elem--span-36[data-v-c22a5605] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-c22a5605] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-c22a5605] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-c22a5605]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-c22a5605] { display: flex; } /* flex-direction */ .flex-column[data-v-c22a5605] { flex-direction: column; } .flex-row[data-v-c22a5605] { flex-direction: row; } /* flex */ .flex-1[data-v-c22a5605] { flex: 1 !important; } .flex-2[data-v-c22a5605] { flex: 2; } .flex-3[data-v-c22a5605] { flex: 3; } .flex-3[data-v-c22a5605] { flex: 4; } .flex-5[data-v-c22a5605] { flex: 5; } .flex-auto[data-v-c22a5605] { flex: auto; } .flex-none[data-v-c22a5605] { flex: none; } .flex-content[data-v-c22a5605] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-c22a5605] { flex-wrap: wrap; } .flex-nowrap[data-v-c22a5605] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-c22a5605] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-c22a5605] { justify-content: flex-start; } .justify-content-end[data-v-c22a5605] { justify-content: flex-end; } .justify-content-baseline[data-v-c22a5605] { justify-content: baseline; } .justify-content-center[data-v-c22a5605] { justify-content: center; } .justify-content-space-between[data-v-c22a5605] { justify-content: space-between; } .justify-content-space-around[data-v-c22a5605] { justify-content: space-around; } .justify-content-space-evenly[data-v-c22a5605] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-c22a5605] { align-items: flex-start; } .align-items-flex-end[data-v-c22a5605] { align-items: flex-end; } .align-items-stretch[data-v-c22a5605] { align-items: stretch; } .align-items-baseline[data-v-c22a5605] { align-items: baseline; } .align-items-center[data-v-c22a5605] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-c22a5605] { align-content: flex-start; } .align-content-flex-end[data-v-c22a5605] { align-content: flex-end; } .align-content-center[data-v-c22a5605] { align-content: center; } .align-content-stretch[data-v-c22a5605] { align-content: stretch; } .align-content-space-between[data-v-c22a5605] { align-content: space-between; } .align-content-space-around[data-v-c22a5605] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-c22a5605] { align-self: flex-start; } .align-self-flex-end[data-v-c22a5605] { align-self: flex-end; } .align-self-stretch[data-v-c22a5605] { align-self: stretch; } .align-self-flex-baseline[data-v-c22a5605] { align-self: baseline; } .align-self-center[data-v-c22a5605] { align-self: center; } .align-self-auto[data-v-c22a5605] { align-self: auto; } .flex-gap-1[data-v-c22a5605] { gap: 4px; } .flex-gap-2[data-v-c22a5605] { gap: 8px; } .flex-gap-3[data-v-c22a5605] { gap: 12px; } .flex-gap-4[data-v-c22a5605] { gap: 16px; } .flex-gap-5[data-v-c22a5605] { gap: 20px; } .flex-gap-6[data-v-c22a5605] { gap: 24px; } .flex-gap-7[data-v-c22a5605] { gap: 28px; } .flex-gap-8[data-v-c22a5605] { gap: 32px; } .flex-gap-10[data-v-c22a5605] { gap: 40px; } .flex-gap-12[data-v-c22a5605] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-c22a5605] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-c22a5605] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-c22a5605] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-c22a5605] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-c22a5605] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-c22a5605] { display: none !important; } } .col-none[data-v-c22a5605] { display: none; } .col-auto[data-v-c22a5605] { grid-column: auto; } .col-1[data-v-c22a5605] { grid-column: span 1; } .col-2[data-v-c22a5605] { grid-column: span 2; } .col-3[data-v-c22a5605] { grid-column: span 3; } .col-4[data-v-c22a5605] { grid-column: span 4; } .col-5[data-v-c22a5605] { grid-column: span 5; } .col-6[data-v-c22a5605] { grid-column: span 6; } .col-7[data-v-c22a5605] { grid-column: span 7; } .col-8[data-v-c22a5605] { grid-column: span 8; } .col-9[data-v-c22a5605] { grid-column: span 9; } .col-10[data-v-c22a5605] { grid-column: span 10; } .col-12[data-v-c22a5605] { grid-column: span 12; } .col-13[data-v-c22a5605] { grid-column: span 13; } .col-14[data-v-c22a5605] { grid-column: span 14; } .col-15[data-v-c22a5605] { grid-column: span 15; } .col-16[data-v-c22a5605] { grid-column: span 16; } .col-18[data-v-c22a5605] { grid-column: span 18; } .col-20[data-v-c22a5605] { grid-column: span 20; } .col-22[data-v-c22a5605] { grid-column: span 22; } .col-24[data-v-c22a5605] { grid-column: span 24; } .col-26[data-v-c22a5605] { grid-column: span 26; } .col-27[data-v-c22a5605] { grid-column: span 27; } .col-28[data-v-c22a5605] { grid-column: span 28; } .col-30[data-v-c22a5605] { grid-column: span 30; } .col-36[data-v-c22a5605] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-c22a5605] { display: none; } .col-md-36[data-v-c22a5605] { grid-column: span 36; } .col-md-28[data-v-c22a5605] { grid-column: span 28; } .col-md-27[data-v-c22a5605] { grid-column: span 27; } .col-md-24[data-v-c22a5605] { grid-column: span 24; } .col-md-22[data-v-c22a5605] { grid-column: span 22; } .col-md-20[data-v-c22a5605] { grid-column: span 20; } .col-md-19[data-v-c22a5605] { grid-column: span 19; } .col-md-18[data-v-c22a5605] { grid-column: span 18; } .col-md-17[data-v-c22a5605] { grid-column: span 17; } .col-md-16[data-v-c22a5605] { grid-column: span 16; } .col-md-15[data-v-c22a5605] { grid-column: span 15; } .col-md-14[data-v-c22a5605] { grid-column: span 14; } .col-md-13[data-v-c22a5605] { grid-column: span 13; } .col-md-12[data-v-c22a5605] { grid-column: span 12; } .col-md-10[data-v-c22a5605] { grid-column: span 10; } .col-md-9[data-v-c22a5605] { grid-column: span 9; } .col-md-8[data-v-c22a5605] { grid-column: span 8; } .col-md-6[data-v-c22a5605] { grid-column: span 6; } .col-md-5[data-v-c22a5605] { grid-column: span 5; } .col-md-4[data-v-c22a5605] { grid-column: span 4; } .col-md-3[data-v-c22a5605] { grid-column: span 3; } .col-md-2[data-v-c22a5605] { grid-column: span 2; } .col-md-1[data-v-c22a5605] { grid-column: span 1; } .col-md-auto[data-v-c22a5605] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-c22a5605] { display: none; } .col-sm-36[data-v-c22a5605] { grid-column: span 36; } .col-sm-32[data-v-c22a5605] { grid-column: span 32; } .col-sm-28[data-v-c22a5605] { grid-column: span 28; } .col-sm-27[data-v-c22a5605] { grid-column: span 27; } .col-sm-24[data-v-c22a5605] { grid-column: span 24; } .col-sm-22[data-v-c22a5605] { grid-column: span 22; } .col-sm-20[data-v-c22a5605] { grid-column: span 20; } .col-sm-18[data-v-c22a5605] { grid-column: span 18; } .col-sm-16[data-v-c22a5605] { grid-column: span 16; } .col-sm-15[data-v-c22a5605] { grid-column: span 15; } .col-sm-14[data-v-c22a5605] { grid-column: span 14; } .col-sm-13[data-v-c22a5605] { grid-column: span 12; } .col-sm-12[data-v-c22a5605] { grid-column: span 12; } .col-sm-10[data-v-c22a5605] { grid-column: span 10; } .col-sm-9[data-v-c22a5605] { grid-column: span 8; } .col-sm-8[data-v-c22a5605] { grid-column: span 8; } .col-sm-6[data-v-c22a5605] { grid-column: span 6; } .col-sm-4[data-v-c22a5605] { grid-column: span 4; } .col-sm-auto[data-v-c22a5605] { grid-column: auto; } } .fade-enter-active[data-v-c22a5605] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-c22a5605] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-c22a5605], .fade-leave-to[data-v-c22a5605] { opacity: 0; } .icon-badge[data-v-c22a5605] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; } .icon-badge--xs[data-v-c22a5605] { width: 24px; height: 24px; border-radius: 6px; } .icon-badge--sm[data-v-c22a5605] { width: 28px; height: 28px; border-radius: 7px; } .icon-badge--md[data-v-c22a5605] { width: 32px; height: 32px; border-radius: 8px; } .icon-badge--lg[data-v-c22a5605] { width: 40px; height: 40px; border-radius: 10px; } .icon-badge--rounded[data-v-c22a5605] { border-radius: 50%; } .icon-badge--primary[data-v-c22a5605] { background: rgba(var(--primary-500-rgb), 0.12); color: var(--primary-500); } .icon-badge--primary[data-v-c22a5605]:hover { background: rgba(var(--primary-500-rgb), 0.2); } .icon-badge--secondary[data-v-c22a5605] { background: rgba(var(--secondary-500-rgb), 0.12); color: var(--secondary-400); } .icon-badge--secondary[data-v-c22a5605]:hover { background: rgba(var(--secondary-500-rgb), 0.2); } .icon-badge--success[data-v-c22a5605] { background: rgba(var(--success-500-rgb), 0.12); color: #2cbb66; } .icon-badge--success[data-v-c22a5605]:hover { background: rgba(var(--success-500-rgb), 0.2); } .icon-badge--warning[data-v-c22a5605] { background: rgba(249, 115, 22, 0.12); color: #f97316; } .icon-badge--warning[data-v-c22a5605]:hover { background: rgba(249, 115, 22, 0.2); } .icon-badge--danger[data-v-c22a5605] { background: rgba(var(--danger-500-rgb), 0.12); color: #ff4d4d; } .icon-badge--danger[data-v-c22a5605]:hover { background: rgba(var(--danger-500-rgb), 0.2); } .icon-badge--info[data-v-c22a5605] { background: rgba(20, 173, 255, 0.12); color: #14adff; } .icon-badge--info[data-v-c22a5605]:hover { background: rgba(20, 173, 255, 0.2); } .icon-badge--neutral[data-v-c22a5605] { background: var(--bg-subtle); color: var(--text-secondary); } .icon-badge--neutral[data-v-c22a5605]:hover { background: var(--hover-overlay); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .input-label { color: var(--text-secondary); display: flex; gap: 4px; } .input-label--unwrap { white-space: nowrap; } .input-label__required { position: relative; color: #eb1515; min-width: 4px; } .input-label__required span { position: absolute; top: -4px; } .input-label__icon { max-height: 12px; fill: var(--secondary-100); cursor: pointer; } .input-label__icon svg { fill: var(--secondary-100); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .input-container svg { cursor: pointer; } .input-container--disabled input { background-color: #edf1f5; } .input-container--large { height: 48px; border-radius: 8px; } .input-container--large input { font-size: 14px; } .input-container--medium { height: 40px; border-radius: 6px; } .input-container--medium input { font-size: 12px; } @media (max-width: 720px) { .input-container--medium { height: 44px; } } .input-container--small { height: 30px; border-radius: 4px; } .input-container--small input { font-size: 10px; } @media (max-width: 720px) { .input-container--small { height: 44px; } .input-container--small input { font-size: 12px; } } .input-container--success { color: #1f9a50; border-color: #1f9a50; } .input-container--success:hover { border-color: #1f9a50; } .input-container--error { color: #eb1515; border-color: #eb1515; } .input-container--error:hover { border-color: #eb1515; } .textalign--left { text-align: left; } .textalign--right { text-align: right; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-140bf9f7]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-140bf9f7] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-140bf9f7] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-140bf9f7]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-140bf9f7], .theme-mode-light[data-v-140bf9f7] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-140bf9f7], .theme-mode-dark[data-v-140bf9f7] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-140bf9f7]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-140bf9f7]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-140bf9f7] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-140bf9f7] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-140bf9f7]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-140bf9f7], input[disabled][data-v-140bf9f7] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-140bf9f7] { opacity: 0.9; } input[readonly][data-v-140bf9f7] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-140bf9f7] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-140bf9f7]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-140bf9f7]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-140bf9f7]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-140bf9f7] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-140bf9f7]:nth-child(odd), .list-card-desktop__wrapper[data-v-140bf9f7]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-140bf9f7]:nth-child(even), .list-card-desktop__wrapper[data-v-140bf9f7]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-140bf9f7]:nth-child(odd), .listCardDesktopWrapper[data-v-140bf9f7]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-140bf9f7]:nth-child(even), .listCardDesktopWrapper[data-v-140bf9f7]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-140bf9f7] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-140bf9f7] { cursor: pointer; } .card-layout--selectionnable[data-v-140bf9f7]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-140bf9f7] { cursor: auto; } .card-layout--drawer[data-v-140bf9f7] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-140bf9f7] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-140bf9f7] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-140bf9f7] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-140bf9f7] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-140bf9f7] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-140bf9f7]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-140bf9f7] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-140bf9f7] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-140bf9f7] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-140bf9f7] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-140bf9f7] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-140bf9f7] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-140bf9f7] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-140bf9f7] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-140bf9f7] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-140bf9f7] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-140bf9f7] { background-color: #eb1515; } .color-chip--dossiers[data-v-140bf9f7] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-140bf9f7] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-140bf9f7] { background-color: #00a79b; } .color-chip--virements[data-v-140bf9f7] { background-color: var(--secondary-400); } .color-chip--factures[data-v-140bf9f7] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-140bf9f7] { background-color: #eb1515; } .color-recherche-dossiers[data-v-140bf9f7] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-140bf9f7] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-140bf9f7] { background-color: #00a79b; } .color-recherche-virements[data-v-140bf9f7] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-140bf9f7] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-140bf9f7] { color: #00a79b; cursor: pointer; } .scrollable[data-v-140bf9f7] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-140bf9f7] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-140bf9f7] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-140bf9f7] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-140bf9f7] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-140bf9f7] { font-weight: 800; } .grid-cell--column[data-v-140bf9f7] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-140bf9f7] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-140bf9f7] { fill: #00a79b; } .grid-cell--disabled[data-v-140bf9f7] { color: #cccccc; } .grid-cell--disabled svg[data-v-140bf9f7] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-140bf9f7] { white-space: nowrap; } .grid-cell--danger svg[data-v-140bf9f7] { fill: #eb1515; } .grid-cell--span-1[data-v-140bf9f7] { grid-column: span 1; } .grid-cell--span-2[data-v-140bf9f7] { grid-column: span 2; } .grid-cell--span-3[data-v-140bf9f7] { grid-column: span 3; } .grid-cell--span-4[data-v-140bf9f7] { grid-column: span 4; } .grid-cell--span-5[data-v-140bf9f7] { grid-column: span 5; } .grid-cell--span-6[data-v-140bf9f7] { grid-column: span 6; } .grid-cell--span-7[data-v-140bf9f7] { grid-column: span 7; } .grid-cell--span-8[data-v-140bf9f7] { grid-column: span 8; } .grid-cell--span-9[data-v-140bf9f7] { grid-column: span 9; } .grid-cell--span-10[data-v-140bf9f7] { grid-column: span 10; } .grid-cell--span-12[data-v-140bf9f7] { grid-column: span 12; } .grid-cell--span-13[data-v-140bf9f7] { grid-column: span 13; } .grid-cell--span-14[data-v-140bf9f7] { grid-column: span 14; } .grid-cell--span-16[data-v-140bf9f7] { grid-column: span 16; } .grid-cell--span-18[data-v-140bf9f7] { grid-column: span 18; } .grid-cell--span-20[data-v-140bf9f7] { grid-column: span 20; } .grid-cell--span-32[data-v-140bf9f7] { grid-column: span 32; } .grid-cell--span-36[data-v-140bf9f7] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-140bf9f7] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-140bf9f7] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-140bf9f7] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-140bf9f7] { justify-content: center !important; } .elem--bold span[data-v-140bf9f7] { font-weight: 800; } .elem--column[data-v-140bf9f7] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-140bf9f7] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-140bf9f7] { fill: #00a79b; } .elem--clickable[data-v-140bf9f7]:hover { cursor: pointer; } .elem--disabled[data-v-140bf9f7] { color: #cccccc; } .elem--disabled svg[data-v-140bf9f7] { fill: #cccccc; } .elem--nowrap span[data-v-140bf9f7] { white-space: nowrap; } .elem--danger svg[data-v-140bf9f7] { fill: #eb1515; } .elem--span-1[data-v-140bf9f7] { grid-column: span 1; } .elem--span-2[data-v-140bf9f7] { grid-column: span 2; } .elem--span-3[data-v-140bf9f7] { grid-column: span 3; } .elem--span-4[data-v-140bf9f7] { grid-column: span 4; } .elem--span-5[data-v-140bf9f7] { grid-column: span 5; } .elem--span-6[data-v-140bf9f7] { grid-column: span 6; } .elem--span-7[data-v-140bf9f7] { grid-column: span 7; } .elem--span-8[data-v-140bf9f7] { grid-column: span 8; } .elem--span-9[data-v-140bf9f7] { grid-column: span 9; } .elem--span-10[data-v-140bf9f7] { grid-column: span 10; } .elem--span-12[data-v-140bf9f7] { grid-column: span 12; } .elem--span-13[data-v-140bf9f7] { grid-column: span 13; } .elem--span-14[data-v-140bf9f7] { grid-column: span 14; } .elem--span-16[data-v-140bf9f7] { grid-column: span 16; } .elem--span-18[data-v-140bf9f7] { grid-column: span 18; } .elem--span-20[data-v-140bf9f7] { grid-column: span 20; } .elem--span-32[data-v-140bf9f7] { grid-column: span 32; } .elem--span-36[data-v-140bf9f7] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-140bf9f7] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-140bf9f7] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-140bf9f7]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-140bf9f7] { display: flex; } /* flex-direction */ .flex-column[data-v-140bf9f7] { flex-direction: column; } .flex-row[data-v-140bf9f7] { flex-direction: row; } /* flex */ .flex-1[data-v-140bf9f7] { flex: 1 !important; } .flex-2[data-v-140bf9f7] { flex: 2; } .flex-3[data-v-140bf9f7] { flex: 3; } .flex-3[data-v-140bf9f7] { flex: 4; } .flex-5[data-v-140bf9f7] { flex: 5; } .flex-auto[data-v-140bf9f7] { flex: auto; } .flex-none[data-v-140bf9f7] { flex: none; } .flex-content[data-v-140bf9f7] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-140bf9f7] { flex-wrap: wrap; } .flex-nowrap[data-v-140bf9f7] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-140bf9f7] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-140bf9f7] { justify-content: flex-start; } .justify-content-end[data-v-140bf9f7] { justify-content: flex-end; } .justify-content-baseline[data-v-140bf9f7] { justify-content: baseline; } .justify-content-center[data-v-140bf9f7] { justify-content: center; } .justify-content-space-between[data-v-140bf9f7] { justify-content: space-between; } .justify-content-space-around[data-v-140bf9f7] { justify-content: space-around; } .justify-content-space-evenly[data-v-140bf9f7] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-140bf9f7] { align-items: flex-start; } .align-items-flex-end[data-v-140bf9f7] { align-items: flex-end; } .align-items-stretch[data-v-140bf9f7] { align-items: stretch; } .align-items-baseline[data-v-140bf9f7] { align-items: baseline; } .align-items-center[data-v-140bf9f7] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-140bf9f7] { align-content: flex-start; } .align-content-flex-end[data-v-140bf9f7] { align-content: flex-end; } .align-content-center[data-v-140bf9f7] { align-content: center; } .align-content-stretch[data-v-140bf9f7] { align-content: stretch; } .align-content-space-between[data-v-140bf9f7] { align-content: space-between; } .align-content-space-around[data-v-140bf9f7] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-140bf9f7] { align-self: flex-start; } .align-self-flex-end[data-v-140bf9f7] { align-self: flex-end; } .align-self-stretch[data-v-140bf9f7] { align-self: stretch; } .align-self-flex-baseline[data-v-140bf9f7] { align-self: baseline; } .align-self-center[data-v-140bf9f7] { align-self: center; } .align-self-auto[data-v-140bf9f7] { align-self: auto; } .flex-gap-1[data-v-140bf9f7] { gap: 4px; } .flex-gap-2[data-v-140bf9f7] { gap: 8px; } .flex-gap-3[data-v-140bf9f7] { gap: 12px; } .flex-gap-4[data-v-140bf9f7] { gap: 16px; } .flex-gap-5[data-v-140bf9f7] { gap: 20px; } .flex-gap-6[data-v-140bf9f7] { gap: 24px; } .flex-gap-7[data-v-140bf9f7] { gap: 28px; } .flex-gap-8[data-v-140bf9f7] { gap: 32px; } .flex-gap-10[data-v-140bf9f7] { gap: 40px; } .flex-gap-12[data-v-140bf9f7] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-140bf9f7] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-140bf9f7] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-140bf9f7] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-140bf9f7] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-140bf9f7] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-140bf9f7] { display: none !important; } } .col-none[data-v-140bf9f7] { display: none; } .col-auto[data-v-140bf9f7] { grid-column: auto; } .col-1[data-v-140bf9f7] { grid-column: span 1; } .col-2[data-v-140bf9f7] { grid-column: span 2; } .col-3[data-v-140bf9f7] { grid-column: span 3; } .col-4[data-v-140bf9f7] { grid-column: span 4; } .col-5[data-v-140bf9f7] { grid-column: span 5; } .col-6[data-v-140bf9f7] { grid-column: span 6; } .col-7[data-v-140bf9f7] { grid-column: span 7; } .col-8[data-v-140bf9f7] { grid-column: span 8; } .col-9[data-v-140bf9f7] { grid-column: span 9; } .col-10[data-v-140bf9f7] { grid-column: span 10; } .col-12[data-v-140bf9f7] { grid-column: span 12; } .col-13[data-v-140bf9f7] { grid-column: span 13; } .col-14[data-v-140bf9f7] { grid-column: span 14; } .col-15[data-v-140bf9f7] { grid-column: span 15; } .col-16[data-v-140bf9f7] { grid-column: span 16; } .col-18[data-v-140bf9f7] { grid-column: span 18; } .col-20[data-v-140bf9f7] { grid-column: span 20; } .col-22[data-v-140bf9f7] { grid-column: span 22; } .col-24[data-v-140bf9f7] { grid-column: span 24; } .col-26[data-v-140bf9f7] { grid-column: span 26; } .col-27[data-v-140bf9f7] { grid-column: span 27; } .col-28[data-v-140bf9f7] { grid-column: span 28; } .col-30[data-v-140bf9f7] { grid-column: span 30; } .col-36[data-v-140bf9f7] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-140bf9f7] { display: none; } .col-md-36[data-v-140bf9f7] { grid-column: span 36; } .col-md-28[data-v-140bf9f7] { grid-column: span 28; } .col-md-27[data-v-140bf9f7] { grid-column: span 27; } .col-md-24[data-v-140bf9f7] { grid-column: span 24; } .col-md-22[data-v-140bf9f7] { grid-column: span 22; } .col-md-20[data-v-140bf9f7] { grid-column: span 20; } .col-md-19[data-v-140bf9f7] { grid-column: span 19; } .col-md-18[data-v-140bf9f7] { grid-column: span 18; } .col-md-17[data-v-140bf9f7] { grid-column: span 17; } .col-md-16[data-v-140bf9f7] { grid-column: span 16; } .col-md-15[data-v-140bf9f7] { grid-column: span 15; } .col-md-14[data-v-140bf9f7] { grid-column: span 14; } .col-md-13[data-v-140bf9f7] { grid-column: span 13; } .col-md-12[data-v-140bf9f7] { grid-column: span 12; } .col-md-10[data-v-140bf9f7] { grid-column: span 10; } .col-md-9[data-v-140bf9f7] { grid-column: span 9; } .col-md-8[data-v-140bf9f7] { grid-column: span 8; } .col-md-6[data-v-140bf9f7] { grid-column: span 6; } .col-md-5[data-v-140bf9f7] { grid-column: span 5; } .col-md-4[data-v-140bf9f7] { grid-column: span 4; } .col-md-3[data-v-140bf9f7] { grid-column: span 3; } .col-md-2[data-v-140bf9f7] { grid-column: span 2; } .col-md-1[data-v-140bf9f7] { grid-column: span 1; } .col-md-auto[data-v-140bf9f7] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-140bf9f7] { display: none; } .col-sm-36[data-v-140bf9f7] { grid-column: span 36; } .col-sm-32[data-v-140bf9f7] { grid-column: span 32; } .col-sm-28[data-v-140bf9f7] { grid-column: span 28; } .col-sm-27[data-v-140bf9f7] { grid-column: span 27; } .col-sm-24[data-v-140bf9f7] { grid-column: span 24; } .col-sm-22[data-v-140bf9f7] { grid-column: span 22; } .col-sm-20[data-v-140bf9f7] { grid-column: span 20; } .col-sm-18[data-v-140bf9f7] { grid-column: span 18; } .col-sm-16[data-v-140bf9f7] { grid-column: span 16; } .col-sm-15[data-v-140bf9f7] { grid-column: span 15; } .col-sm-14[data-v-140bf9f7] { grid-column: span 14; } .col-sm-13[data-v-140bf9f7] { grid-column: span 12; } .col-sm-12[data-v-140bf9f7] { grid-column: span 12; } .col-sm-10[data-v-140bf9f7] { grid-column: span 10; } .col-sm-9[data-v-140bf9f7] { grid-column: span 8; } .col-sm-8[data-v-140bf9f7] { grid-column: span 8; } .col-sm-6[data-v-140bf9f7] { grid-column: span 6; } .col-sm-4[data-v-140bf9f7] { grid-column: span 4; } .col-sm-auto[data-v-140bf9f7] { grid-column: auto; } } .fade-enter-active[data-v-140bf9f7] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-140bf9f7] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-140bf9f7], .fade-leave-to[data-v-140bf9f7] { opacity: 0; } .input-container svg[data-v-140bf9f7] { cursor: pointer; } .input-container--disabled input[data-v-140bf9f7] { background-color: #edf1f5; } .input-container--large[data-v-140bf9f7] { height: 48px; border-radius: 8px; } .input-container--large input[data-v-140bf9f7] { font-size: 14px; } .input-container--medium[data-v-140bf9f7] { height: 40px; border-radius: 6px; } .input-container--medium input[data-v-140bf9f7] { font-size: 12px; } @media (max-width: 720px) { .input-container--medium[data-v-140bf9f7] { height: 44px; } } .input-container--small[data-v-140bf9f7] { height: 30px; border-radius: 4px; } .input-container--small input[data-v-140bf9f7] { font-size: 10px; } @media (max-width: 720px) { .input-container--small[data-v-140bf9f7] { height: 44px; } .input-container--small input[data-v-140bf9f7] { font-size: 12px; } } .input-container--success[data-v-140bf9f7] { color: #1f9a50; border-color: #1f9a50; } .input-container--success[data-v-140bf9f7]:hover { border-color: #1f9a50; } .input-container--error[data-v-140bf9f7] { color: #eb1515; border-color: #eb1515; } .input-container--error[data-v-140bf9f7]:hover { border-color: #eb1515; } .password-toggle[data-v-140bf9f7] { background: none; border: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease; } .password-toggle[data-v-140bf9f7]:focus { outline: none; box-shadow: none; } .password-toggle[data-v-140bf9f7]:active { transform: scale(0.95); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-c486c7fd]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-c486c7fd] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-c486c7fd] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-c486c7fd]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-c486c7fd], .theme-mode-light[data-v-c486c7fd] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-c486c7fd], .theme-mode-dark[data-v-c486c7fd] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-c486c7fd]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-c486c7fd]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-c486c7fd] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-c486c7fd] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-c486c7fd]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-c486c7fd], input[disabled][data-v-c486c7fd] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-c486c7fd] { opacity: 0.9; } input[readonly][data-v-c486c7fd] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-c486c7fd] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-c486c7fd]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-c486c7fd]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-c486c7fd]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-c486c7fd] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-c486c7fd]:nth-child(odd), .list-card-desktop__wrapper[data-v-c486c7fd]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-c486c7fd]:nth-child(even), .list-card-desktop__wrapper[data-v-c486c7fd]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-c486c7fd]:nth-child(odd), .listCardDesktopWrapper[data-v-c486c7fd]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-c486c7fd]:nth-child(even), .listCardDesktopWrapper[data-v-c486c7fd]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-c486c7fd] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-c486c7fd] { cursor: pointer; } .card-layout--selectionnable[data-v-c486c7fd]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-c486c7fd] { cursor: auto; } .card-layout--drawer[data-v-c486c7fd] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-c486c7fd] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-c486c7fd] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-c486c7fd] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-c486c7fd] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-c486c7fd] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-c486c7fd]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-c486c7fd] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-c486c7fd] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-c486c7fd] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-c486c7fd] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-c486c7fd] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-c486c7fd] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-c486c7fd] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-c486c7fd] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-c486c7fd] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-c486c7fd] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-c486c7fd] { background-color: #eb1515; } .color-chip--dossiers[data-v-c486c7fd] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-c486c7fd] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-c486c7fd] { background-color: #00a79b; } .color-chip--virements[data-v-c486c7fd] { background-color: var(--secondary-400); } .color-chip--factures[data-v-c486c7fd] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-c486c7fd] { background-color: #eb1515; } .color-recherche-dossiers[data-v-c486c7fd] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-c486c7fd] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-c486c7fd] { background-color: #00a79b; } .color-recherche-virements[data-v-c486c7fd] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-c486c7fd] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-c486c7fd] { color: #00a79b; cursor: pointer; } .scrollable[data-v-c486c7fd] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-c486c7fd] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-c486c7fd] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-c486c7fd] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-c486c7fd] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-c486c7fd] { font-weight: 800; } .grid-cell--column[data-v-c486c7fd] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-c486c7fd] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-c486c7fd] { fill: #00a79b; } .grid-cell--disabled[data-v-c486c7fd] { color: #cccccc; } .grid-cell--disabled svg[data-v-c486c7fd] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-c486c7fd] { white-space: nowrap; } .grid-cell--danger svg[data-v-c486c7fd] { fill: #eb1515; } .grid-cell--span-1[data-v-c486c7fd] { grid-column: span 1; } .grid-cell--span-2[data-v-c486c7fd] { grid-column: span 2; } .grid-cell--span-3[data-v-c486c7fd] { grid-column: span 3; } .grid-cell--span-4[data-v-c486c7fd] { grid-column: span 4; } .grid-cell--span-5[data-v-c486c7fd] { grid-column: span 5; } .grid-cell--span-6[data-v-c486c7fd] { grid-column: span 6; } .grid-cell--span-7[data-v-c486c7fd] { grid-column: span 7; } .grid-cell--span-8[data-v-c486c7fd] { grid-column: span 8; } .grid-cell--span-9[data-v-c486c7fd] { grid-column: span 9; } .grid-cell--span-10[data-v-c486c7fd] { grid-column: span 10; } .grid-cell--span-12[data-v-c486c7fd] { grid-column: span 12; } .grid-cell--span-13[data-v-c486c7fd] { grid-column: span 13; } .grid-cell--span-14[data-v-c486c7fd] { grid-column: span 14; } .grid-cell--span-16[data-v-c486c7fd] { grid-column: span 16; } .grid-cell--span-18[data-v-c486c7fd] { grid-column: span 18; } .grid-cell--span-20[data-v-c486c7fd] { grid-column: span 20; } .grid-cell--span-32[data-v-c486c7fd] { grid-column: span 32; } .grid-cell--span-36[data-v-c486c7fd] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-c486c7fd] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-c486c7fd] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-c486c7fd] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-c486c7fd] { justify-content: center !important; } .elem--bold span[data-v-c486c7fd] { font-weight: 800; } .elem--column[data-v-c486c7fd] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-c486c7fd] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-c486c7fd] { fill: #00a79b; } .elem--clickable[data-v-c486c7fd]:hover { cursor: pointer; } .elem--disabled[data-v-c486c7fd] { color: #cccccc; } .elem--disabled svg[data-v-c486c7fd] { fill: #cccccc; } .elem--nowrap span[data-v-c486c7fd] { white-space: nowrap; } .elem--danger svg[data-v-c486c7fd] { fill: #eb1515; } .elem--span-1[data-v-c486c7fd] { grid-column: span 1; } .elem--span-2[data-v-c486c7fd] { grid-column: span 2; } .elem--span-3[data-v-c486c7fd] { grid-column: span 3; } .elem--span-4[data-v-c486c7fd] { grid-column: span 4; } .elem--span-5[data-v-c486c7fd] { grid-column: span 5; } .elem--span-6[data-v-c486c7fd] { grid-column: span 6; } .elem--span-7[data-v-c486c7fd] { grid-column: span 7; } .elem--span-8[data-v-c486c7fd] { grid-column: span 8; } .elem--span-9[data-v-c486c7fd] { grid-column: span 9; } .elem--span-10[data-v-c486c7fd] { grid-column: span 10; } .elem--span-12[data-v-c486c7fd] { grid-column: span 12; } .elem--span-13[data-v-c486c7fd] { grid-column: span 13; } .elem--span-14[data-v-c486c7fd] { grid-column: span 14; } .elem--span-16[data-v-c486c7fd] { grid-column: span 16; } .elem--span-18[data-v-c486c7fd] { grid-column: span 18; } .elem--span-20[data-v-c486c7fd] { grid-column: span 20; } .elem--span-32[data-v-c486c7fd] { grid-column: span 32; } .elem--span-36[data-v-c486c7fd] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-c486c7fd] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-c486c7fd] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-c486c7fd]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-c486c7fd] { display: flex; } /* flex-direction */ .flex-column[data-v-c486c7fd] { flex-direction: column; } .flex-row[data-v-c486c7fd] { flex-direction: row; } /* flex */ .flex-1[data-v-c486c7fd] { flex: 1 !important; } .flex-2[data-v-c486c7fd] { flex: 2; } .flex-3[data-v-c486c7fd] { flex: 3; } .flex-3[data-v-c486c7fd] { flex: 4; } .flex-5[data-v-c486c7fd] { flex: 5; } .flex-auto[data-v-c486c7fd] { flex: auto; } .flex-none[data-v-c486c7fd] { flex: none; } .flex-content[data-v-c486c7fd] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-c486c7fd] { flex-wrap: wrap; } .flex-nowrap[data-v-c486c7fd] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-c486c7fd] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-c486c7fd] { justify-content: flex-start; } .justify-content-end[data-v-c486c7fd] { justify-content: flex-end; } .justify-content-baseline[data-v-c486c7fd] { justify-content: baseline; } .justify-content-center[data-v-c486c7fd] { justify-content: center; } .justify-content-space-between[data-v-c486c7fd] { justify-content: space-between; } .justify-content-space-around[data-v-c486c7fd] { justify-content: space-around; } .justify-content-space-evenly[data-v-c486c7fd] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-c486c7fd] { align-items: flex-start; } .align-items-flex-end[data-v-c486c7fd] { align-items: flex-end; } .align-items-stretch[data-v-c486c7fd] { align-items: stretch; } .align-items-baseline[data-v-c486c7fd] { align-items: baseline; } .align-items-center[data-v-c486c7fd] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-c486c7fd] { align-content: flex-start; } .align-content-flex-end[data-v-c486c7fd] { align-content: flex-end; } .align-content-center[data-v-c486c7fd] { align-content: center; } .align-content-stretch[data-v-c486c7fd] { align-content: stretch; } .align-content-space-between[data-v-c486c7fd] { align-content: space-between; } .align-content-space-around[data-v-c486c7fd] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-c486c7fd] { align-self: flex-start; } .align-self-flex-end[data-v-c486c7fd] { align-self: flex-end; } .align-self-stretch[data-v-c486c7fd] { align-self: stretch; } .align-self-flex-baseline[data-v-c486c7fd] { align-self: baseline; } .align-self-center[data-v-c486c7fd] { align-self: center; } .align-self-auto[data-v-c486c7fd] { align-self: auto; } .flex-gap-1[data-v-c486c7fd] { gap: 4px; } .flex-gap-2[data-v-c486c7fd] { gap: 8px; } .flex-gap-3[data-v-c486c7fd] { gap: 12px; } .flex-gap-4[data-v-c486c7fd] { gap: 16px; } .flex-gap-5[data-v-c486c7fd] { gap: 20px; } .flex-gap-6[data-v-c486c7fd] { gap: 24px; } .flex-gap-7[data-v-c486c7fd] { gap: 28px; } .flex-gap-8[data-v-c486c7fd] { gap: 32px; } .flex-gap-10[data-v-c486c7fd] { gap: 40px; } .flex-gap-12[data-v-c486c7fd] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-c486c7fd] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-c486c7fd] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-c486c7fd] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-c486c7fd] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-c486c7fd] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-c486c7fd] { display: none !important; } } .col-none[data-v-c486c7fd] { display: none; } .col-auto[data-v-c486c7fd] { grid-column: auto; } .col-1[data-v-c486c7fd] { grid-column: span 1; } .col-2[data-v-c486c7fd] { grid-column: span 2; } .col-3[data-v-c486c7fd] { grid-column: span 3; } .col-4[data-v-c486c7fd] { grid-column: span 4; } .col-5[data-v-c486c7fd] { grid-column: span 5; } .col-6[data-v-c486c7fd] { grid-column: span 6; } .col-7[data-v-c486c7fd] { grid-column: span 7; } .col-8[data-v-c486c7fd] { grid-column: span 8; } .col-9[data-v-c486c7fd] { grid-column: span 9; } .col-10[data-v-c486c7fd] { grid-column: span 10; } .col-12[data-v-c486c7fd] { grid-column: span 12; } .col-13[data-v-c486c7fd] { grid-column: span 13; } .col-14[data-v-c486c7fd] { grid-column: span 14; } .col-15[data-v-c486c7fd] { grid-column: span 15; } .col-16[data-v-c486c7fd] { grid-column: span 16; } .col-18[data-v-c486c7fd] { grid-column: span 18; } .col-20[data-v-c486c7fd] { grid-column: span 20; } .col-22[data-v-c486c7fd] { grid-column: span 22; } .col-24[data-v-c486c7fd] { grid-column: span 24; } .col-26[data-v-c486c7fd] { grid-column: span 26; } .col-27[data-v-c486c7fd] { grid-column: span 27; } .col-28[data-v-c486c7fd] { grid-column: span 28; } .col-30[data-v-c486c7fd] { grid-column: span 30; } .col-36[data-v-c486c7fd] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-c486c7fd] { display: none; } .col-md-36[data-v-c486c7fd] { grid-column: span 36; } .col-md-28[data-v-c486c7fd] { grid-column: span 28; } .col-md-27[data-v-c486c7fd] { grid-column: span 27; } .col-md-24[data-v-c486c7fd] { grid-column: span 24; } .col-md-22[data-v-c486c7fd] { grid-column: span 22; } .col-md-20[data-v-c486c7fd] { grid-column: span 20; } .col-md-19[data-v-c486c7fd] { grid-column: span 19; } .col-md-18[data-v-c486c7fd] { grid-column: span 18; } .col-md-17[data-v-c486c7fd] { grid-column: span 17; } .col-md-16[data-v-c486c7fd] { grid-column: span 16; } .col-md-15[data-v-c486c7fd] { grid-column: span 15; } .col-md-14[data-v-c486c7fd] { grid-column: span 14; } .col-md-13[data-v-c486c7fd] { grid-column: span 13; } .col-md-12[data-v-c486c7fd] { grid-column: span 12; } .col-md-10[data-v-c486c7fd] { grid-column: span 10; } .col-md-9[data-v-c486c7fd] { grid-column: span 9; } .col-md-8[data-v-c486c7fd] { grid-column: span 8; } .col-md-6[data-v-c486c7fd] { grid-column: span 6; } .col-md-5[data-v-c486c7fd] { grid-column: span 5; } .col-md-4[data-v-c486c7fd] { grid-column: span 4; } .col-md-3[data-v-c486c7fd] { grid-column: span 3; } .col-md-2[data-v-c486c7fd] { grid-column: span 2; } .col-md-1[data-v-c486c7fd] { grid-column: span 1; } .col-md-auto[data-v-c486c7fd] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-c486c7fd] { display: none; } .col-sm-36[data-v-c486c7fd] { grid-column: span 36; } .col-sm-32[data-v-c486c7fd] { grid-column: span 32; } .col-sm-28[data-v-c486c7fd] { grid-column: span 28; } .col-sm-27[data-v-c486c7fd] { grid-column: span 27; } .col-sm-24[data-v-c486c7fd] { grid-column: span 24; } .col-sm-22[data-v-c486c7fd] { grid-column: span 22; } .col-sm-20[data-v-c486c7fd] { grid-column: span 20; } .col-sm-18[data-v-c486c7fd] { grid-column: span 18; } .col-sm-16[data-v-c486c7fd] { grid-column: span 16; } .col-sm-15[data-v-c486c7fd] { grid-column: span 15; } .col-sm-14[data-v-c486c7fd] { grid-column: span 14; } .col-sm-13[data-v-c486c7fd] { grid-column: span 12; } .col-sm-12[data-v-c486c7fd] { grid-column: span 12; } .col-sm-10[data-v-c486c7fd] { grid-column: span 10; } .col-sm-9[data-v-c486c7fd] { grid-column: span 8; } .col-sm-8[data-v-c486c7fd] { grid-column: span 8; } .col-sm-6[data-v-c486c7fd] { grid-column: span 6; } .col-sm-4[data-v-c486c7fd] { grid-column: span 4; } .col-sm-auto[data-v-c486c7fd] { grid-column: auto; } } .fade-enter-active[data-v-c486c7fd] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-c486c7fd] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-c486c7fd], .fade-leave-to[data-v-c486c7fd] { opacity: 0; } .basic-range[data-v-c486c7fd] { display: flex; flex-direction: column; gap: 10px; user-select: none; } .basic-range__slider[data-v-c486c7fd] { position: relative; height: 38px; display: flex; align-items: center; cursor: pointer; } .basic-range .range-base[data-v-c486c7fd] { position: absolute; top: 18px; left: 0; right: 0; height: 4px; background: var(--border-strong); border-radius: 2px; z-index: 1; } .basic-range .range-track[data-v-c486c7fd] { position: absolute; top: 18px; height: 4px; background: var(--primary-500); border-radius: 2px; z-index: 2; pointer-events: none; transition: left 0.1s ease, width 0.1s ease; } .basic-range .range[data-v-c486c7fd] { position: absolute; width: 100%; height: 38px; margin: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; z-index: 3; } .basic-range .range[data-v-c486c7fd]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: all; height: 18px; width: 18px; border-radius: 50%; background: var(--primary-600); border: 2px solid white; box-shadow: 0 0 3px color-mix(in srgb, #2b303a 25%, transparent); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .basic-range .range[data-v-c486c7fd]::-webkit-slider-thumb:hover { box-shadow: 0 0 6px rgba(var(--primary-600-rgb), 0.5); } .basic-range .range[data-v-c486c7fd]::-moz-range-thumb { pointer-events: all; height: 18px; width: 18px; border-radius: 50%; background: var(--primary-600); border: 2px solid white; box-shadow: 0 0 3px color-mix(in srgb, #2b303a 25%, transparent); cursor: pointer; } .basic-range .range[data-v-c486c7fd]::-webkit-slider-runnable-track, .basic-range .range[data-v-c486c7fd]::-moz-range-track { height: 4px; background: transparent; } .basic-range__inputs[data-v-c486c7fd] { display: flex; justify-content: space-between; gap: 8px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-9e6da271]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-9e6da271] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-9e6da271] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-9e6da271]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-9e6da271], .theme-mode-light[data-v-9e6da271] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-9e6da271], .theme-mode-dark[data-v-9e6da271] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-9e6da271]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-9e6da271]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-9e6da271] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-9e6da271] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-9e6da271]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-9e6da271], input[disabled][data-v-9e6da271] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-9e6da271] { opacity: 0.9; } input[readonly][data-v-9e6da271] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-9e6da271] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-9e6da271]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-9e6da271]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-9e6da271]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-9e6da271] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-9e6da271]:nth-child(odd), .list-card-desktop__wrapper[data-v-9e6da271]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-9e6da271]:nth-child(even), .list-card-desktop__wrapper[data-v-9e6da271]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-9e6da271]:nth-child(odd), .listCardDesktopWrapper[data-v-9e6da271]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-9e6da271]:nth-child(even), .listCardDesktopWrapper[data-v-9e6da271]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-9e6da271] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-9e6da271] { cursor: pointer; } .card-layout--selectionnable[data-v-9e6da271]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-9e6da271] { cursor: auto; } .card-layout--drawer[data-v-9e6da271] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-9e6da271] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-9e6da271] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-9e6da271] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-9e6da271] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-9e6da271] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-9e6da271]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-9e6da271] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-9e6da271] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-9e6da271] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-9e6da271] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-9e6da271] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-9e6da271] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-9e6da271] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-9e6da271] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-9e6da271] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-9e6da271] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-9e6da271] { background-color: #eb1515; } .color-chip--dossiers[data-v-9e6da271] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-9e6da271] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-9e6da271] { background-color: #00a79b; } .color-chip--virements[data-v-9e6da271] { background-color: var(--secondary-400); } .color-chip--factures[data-v-9e6da271] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-9e6da271] { background-color: #eb1515; } .color-recherche-dossiers[data-v-9e6da271] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-9e6da271] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-9e6da271] { background-color: #00a79b; } .color-recherche-virements[data-v-9e6da271] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-9e6da271] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-9e6da271] { color: #00a79b; cursor: pointer; } .scrollable[data-v-9e6da271] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-9e6da271] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-9e6da271] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-9e6da271] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-9e6da271] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-9e6da271] { font-weight: 800; } .grid-cell--column[data-v-9e6da271] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-9e6da271] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-9e6da271] { fill: #00a79b; } .grid-cell--disabled[data-v-9e6da271] { color: #cccccc; } .grid-cell--disabled svg[data-v-9e6da271] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-9e6da271] { white-space: nowrap; } .grid-cell--danger svg[data-v-9e6da271] { fill: #eb1515; } .grid-cell--span-1[data-v-9e6da271] { grid-column: span 1; } .grid-cell--span-2[data-v-9e6da271] { grid-column: span 2; } .grid-cell--span-3[data-v-9e6da271] { grid-column: span 3; } .grid-cell--span-4[data-v-9e6da271] { grid-column: span 4; } .grid-cell--span-5[data-v-9e6da271] { grid-column: span 5; } .grid-cell--span-6[data-v-9e6da271] { grid-column: span 6; } .grid-cell--span-7[data-v-9e6da271] { grid-column: span 7; } .grid-cell--span-8[data-v-9e6da271] { grid-column: span 8; } .grid-cell--span-9[data-v-9e6da271] { grid-column: span 9; } .grid-cell--span-10[data-v-9e6da271] { grid-column: span 10; } .grid-cell--span-12[data-v-9e6da271] { grid-column: span 12; } .grid-cell--span-13[data-v-9e6da271] { grid-column: span 13; } .grid-cell--span-14[data-v-9e6da271] { grid-column: span 14; } .grid-cell--span-16[data-v-9e6da271] { grid-column: span 16; } .grid-cell--span-18[data-v-9e6da271] { grid-column: span 18; } .grid-cell--span-20[data-v-9e6da271] { grid-column: span 20; } .grid-cell--span-32[data-v-9e6da271] { grid-column: span 32; } .grid-cell--span-36[data-v-9e6da271] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-9e6da271] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-9e6da271] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-9e6da271] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-9e6da271] { justify-content: center !important; } .elem--bold span[data-v-9e6da271] { font-weight: 800; } .elem--column[data-v-9e6da271] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-9e6da271] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-9e6da271] { fill: #00a79b; } .elem--clickable[data-v-9e6da271]:hover { cursor: pointer; } .elem--disabled[data-v-9e6da271] { color: #cccccc; } .elem--disabled svg[data-v-9e6da271] { fill: #cccccc; } .elem--nowrap span[data-v-9e6da271] { white-space: nowrap; } .elem--danger svg[data-v-9e6da271] { fill: #eb1515; } .elem--span-1[data-v-9e6da271] { grid-column: span 1; } .elem--span-2[data-v-9e6da271] { grid-column: span 2; } .elem--span-3[data-v-9e6da271] { grid-column: span 3; } .elem--span-4[data-v-9e6da271] { grid-column: span 4; } .elem--span-5[data-v-9e6da271] { grid-column: span 5; } .elem--span-6[data-v-9e6da271] { grid-column: span 6; } .elem--span-7[data-v-9e6da271] { grid-column: span 7; } .elem--span-8[data-v-9e6da271] { grid-column: span 8; } .elem--span-9[data-v-9e6da271] { grid-column: span 9; } .elem--span-10[data-v-9e6da271] { grid-column: span 10; } .elem--span-12[data-v-9e6da271] { grid-column: span 12; } .elem--span-13[data-v-9e6da271] { grid-column: span 13; } .elem--span-14[data-v-9e6da271] { grid-column: span 14; } .elem--span-16[data-v-9e6da271] { grid-column: span 16; } .elem--span-18[data-v-9e6da271] { grid-column: span 18; } .elem--span-20[data-v-9e6da271] { grid-column: span 20; } .elem--span-32[data-v-9e6da271] { grid-column: span 32; } .elem--span-36[data-v-9e6da271] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-9e6da271] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-9e6da271] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-9e6da271]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-9e6da271] { display: flex; } /* flex-direction */ .flex-column[data-v-9e6da271] { flex-direction: column; } .flex-row[data-v-9e6da271] { flex-direction: row; } /* flex */ .flex-1[data-v-9e6da271] { flex: 1 !important; } .flex-2[data-v-9e6da271] { flex: 2; } .flex-3[data-v-9e6da271] { flex: 3; } .flex-3[data-v-9e6da271] { flex: 4; } .flex-5[data-v-9e6da271] { flex: 5; } .flex-auto[data-v-9e6da271] { flex: auto; } .flex-none[data-v-9e6da271] { flex: none; } .flex-content[data-v-9e6da271] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-9e6da271] { flex-wrap: wrap; } .flex-nowrap[data-v-9e6da271] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-9e6da271] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-9e6da271] { justify-content: flex-start; } .justify-content-end[data-v-9e6da271] { justify-content: flex-end; } .justify-content-baseline[data-v-9e6da271] { justify-content: baseline; } .justify-content-center[data-v-9e6da271] { justify-content: center; } .justify-content-space-between[data-v-9e6da271] { justify-content: space-between; } .justify-content-space-around[data-v-9e6da271] { justify-content: space-around; } .justify-content-space-evenly[data-v-9e6da271] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-9e6da271] { align-items: flex-start; } .align-items-flex-end[data-v-9e6da271] { align-items: flex-end; } .align-items-stretch[data-v-9e6da271] { align-items: stretch; } .align-items-baseline[data-v-9e6da271] { align-items: baseline; } .align-items-center[data-v-9e6da271] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-9e6da271] { align-content: flex-start; } .align-content-flex-end[data-v-9e6da271] { align-content: flex-end; } .align-content-center[data-v-9e6da271] { align-content: center; } .align-content-stretch[data-v-9e6da271] { align-content: stretch; } .align-content-space-between[data-v-9e6da271] { align-content: space-between; } .align-content-space-around[data-v-9e6da271] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-9e6da271] { align-self: flex-start; } .align-self-flex-end[data-v-9e6da271] { align-self: flex-end; } .align-self-stretch[data-v-9e6da271] { align-self: stretch; } .align-self-flex-baseline[data-v-9e6da271] { align-self: baseline; } .align-self-center[data-v-9e6da271] { align-self: center; } .align-self-auto[data-v-9e6da271] { align-self: auto; } .flex-gap-1[data-v-9e6da271] { gap: 4px; } .flex-gap-2[data-v-9e6da271] { gap: 8px; } .flex-gap-3[data-v-9e6da271] { gap: 12px; } .flex-gap-4[data-v-9e6da271] { gap: 16px; } .flex-gap-5[data-v-9e6da271] { gap: 20px; } .flex-gap-6[data-v-9e6da271] { gap: 24px; } .flex-gap-7[data-v-9e6da271] { gap: 28px; } .flex-gap-8[data-v-9e6da271] { gap: 32px; } .flex-gap-10[data-v-9e6da271] { gap: 40px; } .flex-gap-12[data-v-9e6da271] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-9e6da271] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-9e6da271] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-9e6da271] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-9e6da271] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-9e6da271] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-9e6da271] { display: none !important; } } .col-none[data-v-9e6da271] { display: none; } .col-auto[data-v-9e6da271] { grid-column: auto; } .col-1[data-v-9e6da271] { grid-column: span 1; } .col-2[data-v-9e6da271] { grid-column: span 2; } .col-3[data-v-9e6da271] { grid-column: span 3; } .col-4[data-v-9e6da271] { grid-column: span 4; } .col-5[data-v-9e6da271] { grid-column: span 5; } .col-6[data-v-9e6da271] { grid-column: span 6; } .col-7[data-v-9e6da271] { grid-column: span 7; } .col-8[data-v-9e6da271] { grid-column: span 8; } .col-9[data-v-9e6da271] { grid-column: span 9; } .col-10[data-v-9e6da271] { grid-column: span 10; } .col-12[data-v-9e6da271] { grid-column: span 12; } .col-13[data-v-9e6da271] { grid-column: span 13; } .col-14[data-v-9e6da271] { grid-column: span 14; } .col-15[data-v-9e6da271] { grid-column: span 15; } .col-16[data-v-9e6da271] { grid-column: span 16; } .col-18[data-v-9e6da271] { grid-column: span 18; } .col-20[data-v-9e6da271] { grid-column: span 20; } .col-22[data-v-9e6da271] { grid-column: span 22; } .col-24[data-v-9e6da271] { grid-column: span 24; } .col-26[data-v-9e6da271] { grid-column: span 26; } .col-27[data-v-9e6da271] { grid-column: span 27; } .col-28[data-v-9e6da271] { grid-column: span 28; } .col-30[data-v-9e6da271] { grid-column: span 30; } .col-36[data-v-9e6da271] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-9e6da271] { display: none; } .col-md-36[data-v-9e6da271] { grid-column: span 36; } .col-md-28[data-v-9e6da271] { grid-column: span 28; } .col-md-27[data-v-9e6da271] { grid-column: span 27; } .col-md-24[data-v-9e6da271] { grid-column: span 24; } .col-md-22[data-v-9e6da271] { grid-column: span 22; } .col-md-20[data-v-9e6da271] { grid-column: span 20; } .col-md-19[data-v-9e6da271] { grid-column: span 19; } .col-md-18[data-v-9e6da271] { grid-column: span 18; } .col-md-17[data-v-9e6da271] { grid-column: span 17; } .col-md-16[data-v-9e6da271] { grid-column: span 16; } .col-md-15[data-v-9e6da271] { grid-column: span 15; } .col-md-14[data-v-9e6da271] { grid-column: span 14; } .col-md-13[data-v-9e6da271] { grid-column: span 13; } .col-md-12[data-v-9e6da271] { grid-column: span 12; } .col-md-10[data-v-9e6da271] { grid-column: span 10; } .col-md-9[data-v-9e6da271] { grid-column: span 9; } .col-md-8[data-v-9e6da271] { grid-column: span 8; } .col-md-6[data-v-9e6da271] { grid-column: span 6; } .col-md-5[data-v-9e6da271] { grid-column: span 5; } .col-md-4[data-v-9e6da271] { grid-column: span 4; } .col-md-3[data-v-9e6da271] { grid-column: span 3; } .col-md-2[data-v-9e6da271] { grid-column: span 2; } .col-md-1[data-v-9e6da271] { grid-column: span 1; } .col-md-auto[data-v-9e6da271] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-9e6da271] { display: none; } .col-sm-36[data-v-9e6da271] { grid-column: span 36; } .col-sm-32[data-v-9e6da271] { grid-column: span 32; } .col-sm-28[data-v-9e6da271] { grid-column: span 28; } .col-sm-27[data-v-9e6da271] { grid-column: span 27; } .col-sm-24[data-v-9e6da271] { grid-column: span 24; } .col-sm-22[data-v-9e6da271] { grid-column: span 22; } .col-sm-20[data-v-9e6da271] { grid-column: span 20; } .col-sm-18[data-v-9e6da271] { grid-column: span 18; } .col-sm-16[data-v-9e6da271] { grid-column: span 16; } .col-sm-15[data-v-9e6da271] { grid-column: span 15; } .col-sm-14[data-v-9e6da271] { grid-column: span 14; } .col-sm-13[data-v-9e6da271] { grid-column: span 12; } .col-sm-12[data-v-9e6da271] { grid-column: span 12; } .col-sm-10[data-v-9e6da271] { grid-column: span 10; } .col-sm-9[data-v-9e6da271] { grid-column: span 8; } .col-sm-8[data-v-9e6da271] { grid-column: span 8; } .col-sm-6[data-v-9e6da271] { grid-column: span 6; } .col-sm-4[data-v-9e6da271] { grid-column: span 4; } .col-sm-auto[data-v-9e6da271] { grid-column: auto; } } .fade-enter-active[data-v-9e6da271] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-9e6da271] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-9e6da271], .fade-leave-to[data-v-9e6da271] { opacity: 0; } .basic-skeleton[data-v-9e6da271] { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--skeleton-color) 25%, var(--skeleton-highlight) 50%, var(--skeleton-color) 75%); background-size: 400% 100%; animation: shimmer-9e6da271 1.5s infinite linear; } @keyframes shimmer-9e6da271 { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-11018256]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-11018256] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-11018256] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-11018256]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-11018256], .theme-mode-light[data-v-11018256] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-11018256], .theme-mode-dark[data-v-11018256] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-11018256]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-11018256]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-11018256] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-11018256] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-11018256]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-11018256], input[disabled][data-v-11018256] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-11018256] { opacity: 0.9; } input[readonly][data-v-11018256] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-11018256] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-11018256]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-11018256]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-11018256]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-11018256] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-11018256]:nth-child(odd), .list-card-desktop__wrapper[data-v-11018256]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-11018256]:nth-child(even), .list-card-desktop__wrapper[data-v-11018256]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-11018256]:nth-child(odd), .listCardDesktopWrapper[data-v-11018256]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-11018256]:nth-child(even), .listCardDesktopWrapper[data-v-11018256]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-11018256] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-11018256] { cursor: pointer; } .card-layout--selectionnable[data-v-11018256]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-11018256] { cursor: auto; } .card-layout--drawer[data-v-11018256] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-11018256] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-11018256] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-11018256] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-11018256] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-11018256] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-11018256]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-11018256] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-11018256] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-11018256] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-11018256] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-11018256] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-11018256] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-11018256] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-11018256] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-11018256] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-11018256] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-11018256] { background-color: #eb1515; } .color-chip--dossiers[data-v-11018256] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-11018256] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-11018256] { background-color: #00a79b; } .color-chip--virements[data-v-11018256] { background-color: var(--secondary-400); } .color-chip--factures[data-v-11018256] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-11018256] { background-color: #eb1515; } .color-recherche-dossiers[data-v-11018256] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-11018256] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-11018256] { background-color: #00a79b; } .color-recherche-virements[data-v-11018256] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-11018256] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-11018256] { color: #00a79b; cursor: pointer; } .scrollable[data-v-11018256] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-11018256] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-11018256] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-11018256] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-11018256] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-11018256] { font-weight: 800; } .grid-cell--column[data-v-11018256] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-11018256] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-11018256] { fill: #00a79b; } .grid-cell--disabled[data-v-11018256] { color: #cccccc; } .grid-cell--disabled svg[data-v-11018256] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-11018256] { white-space: nowrap; } .grid-cell--danger svg[data-v-11018256] { fill: #eb1515; } .grid-cell--span-1[data-v-11018256] { grid-column: span 1; } .grid-cell--span-2[data-v-11018256] { grid-column: span 2; } .grid-cell--span-3[data-v-11018256] { grid-column: span 3; } .grid-cell--span-4[data-v-11018256] { grid-column: span 4; } .grid-cell--span-5[data-v-11018256] { grid-column: span 5; } .grid-cell--span-6[data-v-11018256] { grid-column: span 6; } .grid-cell--span-7[data-v-11018256] { grid-column: span 7; } .grid-cell--span-8[data-v-11018256] { grid-column: span 8; } .grid-cell--span-9[data-v-11018256] { grid-column: span 9; } .grid-cell--span-10[data-v-11018256] { grid-column: span 10; } .grid-cell--span-12[data-v-11018256] { grid-column: span 12; } .grid-cell--span-13[data-v-11018256] { grid-column: span 13; } .grid-cell--span-14[data-v-11018256] { grid-column: span 14; } .grid-cell--span-16[data-v-11018256] { grid-column: span 16; } .grid-cell--span-18[data-v-11018256] { grid-column: span 18; } .grid-cell--span-20[data-v-11018256] { grid-column: span 20; } .grid-cell--span-32[data-v-11018256] { grid-column: span 32; } .grid-cell--span-36[data-v-11018256] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-11018256] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-11018256] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-11018256] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-11018256] { justify-content: center !important; } .elem--bold span[data-v-11018256] { font-weight: 800; } .elem--column[data-v-11018256] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-11018256] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-11018256] { fill: #00a79b; } .elem--clickable[data-v-11018256]:hover { cursor: pointer; } .elem--disabled[data-v-11018256] { color: #cccccc; } .elem--disabled svg[data-v-11018256] { fill: #cccccc; } .elem--nowrap span[data-v-11018256] { white-space: nowrap; } .elem--danger svg[data-v-11018256] { fill: #eb1515; } .elem--span-1[data-v-11018256] { grid-column: span 1; } .elem--span-2[data-v-11018256] { grid-column: span 2; } .elem--span-3[data-v-11018256] { grid-column: span 3; } .elem--span-4[data-v-11018256] { grid-column: span 4; } .elem--span-5[data-v-11018256] { grid-column: span 5; } .elem--span-6[data-v-11018256] { grid-column: span 6; } .elem--span-7[data-v-11018256] { grid-column: span 7; } .elem--span-8[data-v-11018256] { grid-column: span 8; } .elem--span-9[data-v-11018256] { grid-column: span 9; } .elem--span-10[data-v-11018256] { grid-column: span 10; } .elem--span-12[data-v-11018256] { grid-column: span 12; } .elem--span-13[data-v-11018256] { grid-column: span 13; } .elem--span-14[data-v-11018256] { grid-column: span 14; } .elem--span-16[data-v-11018256] { grid-column: span 16; } .elem--span-18[data-v-11018256] { grid-column: span 18; } .elem--span-20[data-v-11018256] { grid-column: span 20; } .elem--span-32[data-v-11018256] { grid-column: span 32; } .elem--span-36[data-v-11018256] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-11018256] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-11018256] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-11018256]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-11018256] { display: flex; } /* flex-direction */ .flex-column[data-v-11018256] { flex-direction: column; } .flex-row[data-v-11018256] { flex-direction: row; } /* flex */ .flex-1[data-v-11018256] { flex: 1 !important; } .flex-2[data-v-11018256] { flex: 2; } .flex-3[data-v-11018256] { flex: 3; } .flex-3[data-v-11018256] { flex: 4; } .flex-5[data-v-11018256] { flex: 5; } .flex-auto[data-v-11018256] { flex: auto; } .flex-none[data-v-11018256] { flex: none; } .flex-content[data-v-11018256] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-11018256] { flex-wrap: wrap; } .flex-nowrap[data-v-11018256] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-11018256] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-11018256] { justify-content: flex-start; } .justify-content-end[data-v-11018256] { justify-content: flex-end; } .justify-content-baseline[data-v-11018256] { justify-content: baseline; } .justify-content-center[data-v-11018256] { justify-content: center; } .justify-content-space-between[data-v-11018256] { justify-content: space-between; } .justify-content-space-around[data-v-11018256] { justify-content: space-around; } .justify-content-space-evenly[data-v-11018256] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-11018256] { align-items: flex-start; } .align-items-flex-end[data-v-11018256] { align-items: flex-end; } .align-items-stretch[data-v-11018256] { align-items: stretch; } .align-items-baseline[data-v-11018256] { align-items: baseline; } .align-items-center[data-v-11018256] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-11018256] { align-content: flex-start; } .align-content-flex-end[data-v-11018256] { align-content: flex-end; } .align-content-center[data-v-11018256] { align-content: center; } .align-content-stretch[data-v-11018256] { align-content: stretch; } .align-content-space-between[data-v-11018256] { align-content: space-between; } .align-content-space-around[data-v-11018256] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-11018256] { align-self: flex-start; } .align-self-flex-end[data-v-11018256] { align-self: flex-end; } .align-self-stretch[data-v-11018256] { align-self: stretch; } .align-self-flex-baseline[data-v-11018256] { align-self: baseline; } .align-self-center[data-v-11018256] { align-self: center; } .align-self-auto[data-v-11018256] { align-self: auto; } .flex-gap-1[data-v-11018256] { gap: 4px; } .flex-gap-2[data-v-11018256] { gap: 8px; } .flex-gap-3[data-v-11018256] { gap: 12px; } .flex-gap-4[data-v-11018256] { gap: 16px; } .flex-gap-5[data-v-11018256] { gap: 20px; } .flex-gap-6[data-v-11018256] { gap: 24px; } .flex-gap-7[data-v-11018256] { gap: 28px; } .flex-gap-8[data-v-11018256] { gap: 32px; } .flex-gap-10[data-v-11018256] { gap: 40px; } .flex-gap-12[data-v-11018256] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-11018256] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-11018256] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-11018256] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-11018256] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-11018256] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-11018256] { display: none !important; } } .col-none[data-v-11018256] { display: none; } .col-auto[data-v-11018256] { grid-column: auto; } .col-1[data-v-11018256] { grid-column: span 1; } .col-2[data-v-11018256] { grid-column: span 2; } .col-3[data-v-11018256] { grid-column: span 3; } .col-4[data-v-11018256] { grid-column: span 4; } .col-5[data-v-11018256] { grid-column: span 5; } .col-6[data-v-11018256] { grid-column: span 6; } .col-7[data-v-11018256] { grid-column: span 7; } .col-8[data-v-11018256] { grid-column: span 8; } .col-9[data-v-11018256] { grid-column: span 9; } .col-10[data-v-11018256] { grid-column: span 10; } .col-12[data-v-11018256] { grid-column: span 12; } .col-13[data-v-11018256] { grid-column: span 13; } .col-14[data-v-11018256] { grid-column: span 14; } .col-15[data-v-11018256] { grid-column: span 15; } .col-16[data-v-11018256] { grid-column: span 16; } .col-18[data-v-11018256] { grid-column: span 18; } .col-20[data-v-11018256] { grid-column: span 20; } .col-22[data-v-11018256] { grid-column: span 22; } .col-24[data-v-11018256] { grid-column: span 24; } .col-26[data-v-11018256] { grid-column: span 26; } .col-27[data-v-11018256] { grid-column: span 27; } .col-28[data-v-11018256] { grid-column: span 28; } .col-30[data-v-11018256] { grid-column: span 30; } .col-36[data-v-11018256] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-11018256] { display: none; } .col-md-36[data-v-11018256] { grid-column: span 36; } .col-md-28[data-v-11018256] { grid-column: span 28; } .col-md-27[data-v-11018256] { grid-column: span 27; } .col-md-24[data-v-11018256] { grid-column: span 24; } .col-md-22[data-v-11018256] { grid-column: span 22; } .col-md-20[data-v-11018256] { grid-column: span 20; } .col-md-19[data-v-11018256] { grid-column: span 19; } .col-md-18[data-v-11018256] { grid-column: span 18; } .col-md-17[data-v-11018256] { grid-column: span 17; } .col-md-16[data-v-11018256] { grid-column: span 16; } .col-md-15[data-v-11018256] { grid-column: span 15; } .col-md-14[data-v-11018256] { grid-column: span 14; } .col-md-13[data-v-11018256] { grid-column: span 13; } .col-md-12[data-v-11018256] { grid-column: span 12; } .col-md-10[data-v-11018256] { grid-column: span 10; } .col-md-9[data-v-11018256] { grid-column: span 9; } .col-md-8[data-v-11018256] { grid-column: span 8; } .col-md-6[data-v-11018256] { grid-column: span 6; } .col-md-5[data-v-11018256] { grid-column: span 5; } .col-md-4[data-v-11018256] { grid-column: span 4; } .col-md-3[data-v-11018256] { grid-column: span 3; } .col-md-2[data-v-11018256] { grid-column: span 2; } .col-md-1[data-v-11018256] { grid-column: span 1; } .col-md-auto[data-v-11018256] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-11018256] { display: none; } .col-sm-36[data-v-11018256] { grid-column: span 36; } .col-sm-32[data-v-11018256] { grid-column: span 32; } .col-sm-28[data-v-11018256] { grid-column: span 28; } .col-sm-27[data-v-11018256] { grid-column: span 27; } .col-sm-24[data-v-11018256] { grid-column: span 24; } .col-sm-22[data-v-11018256] { grid-column: span 22; } .col-sm-20[data-v-11018256] { grid-column: span 20; } .col-sm-18[data-v-11018256] { grid-column: span 18; } .col-sm-16[data-v-11018256] { grid-column: span 16; } .col-sm-15[data-v-11018256] { grid-column: span 15; } .col-sm-14[data-v-11018256] { grid-column: span 14; } .col-sm-13[data-v-11018256] { grid-column: span 12; } .col-sm-12[data-v-11018256] { grid-column: span 12; } .col-sm-10[data-v-11018256] { grid-column: span 10; } .col-sm-9[data-v-11018256] { grid-column: span 8; } .col-sm-8[data-v-11018256] { grid-column: span 8; } .col-sm-6[data-v-11018256] { grid-column: span 6; } .col-sm-4[data-v-11018256] { grid-column: span 4; } .col-sm-auto[data-v-11018256] { grid-column: auto; } } .fade-enter-active[data-v-11018256] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-11018256] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-11018256], .fade-leave-to[data-v-11018256] { opacity: 0; } .smart-skeleton[data-v-11018256] { display: flex; flex-direction: column; gap: 18px; padding: 10px 0; min-height: 180px; } .smart-skeleton__header[data-v-11018256] { margin-bottom: 6px; } .smart-skeleton__content[data-v-11018256] { display: flex; flex-direction: column; gap: 12px; } .smart-skeleton__block[data-v-11018256] { display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, #edf1f5 60%, transparent); padding: 14px; border-radius: 8px; } .smart-skeleton__actions[data-v-11018256] { display: flex; justify-content: flex-end; margin-top: 8px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-e6e7e23a]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-e6e7e23a] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-e6e7e23a] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-e6e7e23a]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-e6e7e23a], .theme-mode-light[data-v-e6e7e23a] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-e6e7e23a], .theme-mode-dark[data-v-e6e7e23a] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-e6e7e23a]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-e6e7e23a]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-e6e7e23a] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-e6e7e23a] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-e6e7e23a]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-e6e7e23a], input[disabled][data-v-e6e7e23a] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-e6e7e23a] { opacity: 0.9; } input[readonly][data-v-e6e7e23a] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-e6e7e23a] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-e6e7e23a]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-e6e7e23a]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-e6e7e23a]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-e6e7e23a] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-e6e7e23a]:nth-child(odd), .list-card-desktop__wrapper[data-v-e6e7e23a]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-e6e7e23a]:nth-child(even), .list-card-desktop__wrapper[data-v-e6e7e23a]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-e6e7e23a]:nth-child(odd), .listCardDesktopWrapper[data-v-e6e7e23a]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-e6e7e23a]:nth-child(even), .listCardDesktopWrapper[data-v-e6e7e23a]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-e6e7e23a] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-e6e7e23a] { cursor: pointer; } .card-layout--selectionnable[data-v-e6e7e23a]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-e6e7e23a] { cursor: auto; } .card-layout--drawer[data-v-e6e7e23a] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-e6e7e23a] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-e6e7e23a] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-e6e7e23a] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-e6e7e23a] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-e6e7e23a] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-e6e7e23a]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-e6e7e23a] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-e6e7e23a] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-e6e7e23a] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-e6e7e23a] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-e6e7e23a] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-e6e7e23a] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-e6e7e23a] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-e6e7e23a] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-e6e7e23a] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-e6e7e23a] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-e6e7e23a] { background-color: #eb1515; } .color-chip--dossiers[data-v-e6e7e23a] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-e6e7e23a] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-e6e7e23a] { background-color: #00a79b; } .color-chip--virements[data-v-e6e7e23a] { background-color: var(--secondary-400); } .color-chip--factures[data-v-e6e7e23a] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-e6e7e23a] { background-color: #eb1515; } .color-recherche-dossiers[data-v-e6e7e23a] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-e6e7e23a] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-e6e7e23a] { background-color: #00a79b; } .color-recherche-virements[data-v-e6e7e23a] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-e6e7e23a] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-e6e7e23a] { color: #00a79b; cursor: pointer; } .scrollable[data-v-e6e7e23a] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-e6e7e23a] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-e6e7e23a] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-e6e7e23a] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-e6e7e23a] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-e6e7e23a] { font-weight: 800; } .grid-cell--column[data-v-e6e7e23a] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-e6e7e23a] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-e6e7e23a] { fill: #00a79b; } .grid-cell--disabled[data-v-e6e7e23a] { color: #cccccc; } .grid-cell--disabled svg[data-v-e6e7e23a] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-e6e7e23a] { white-space: nowrap; } .grid-cell--danger svg[data-v-e6e7e23a] { fill: #eb1515; } .grid-cell--span-1[data-v-e6e7e23a] { grid-column: span 1; } .grid-cell--span-2[data-v-e6e7e23a] { grid-column: span 2; } .grid-cell--span-3[data-v-e6e7e23a] { grid-column: span 3; } .grid-cell--span-4[data-v-e6e7e23a] { grid-column: span 4; } .grid-cell--span-5[data-v-e6e7e23a] { grid-column: span 5; } .grid-cell--span-6[data-v-e6e7e23a] { grid-column: span 6; } .grid-cell--span-7[data-v-e6e7e23a] { grid-column: span 7; } .grid-cell--span-8[data-v-e6e7e23a] { grid-column: span 8; } .grid-cell--span-9[data-v-e6e7e23a] { grid-column: span 9; } .grid-cell--span-10[data-v-e6e7e23a] { grid-column: span 10; } .grid-cell--span-12[data-v-e6e7e23a] { grid-column: span 12; } .grid-cell--span-13[data-v-e6e7e23a] { grid-column: span 13; } .grid-cell--span-14[data-v-e6e7e23a] { grid-column: span 14; } .grid-cell--span-16[data-v-e6e7e23a] { grid-column: span 16; } .grid-cell--span-18[data-v-e6e7e23a] { grid-column: span 18; } .grid-cell--span-20[data-v-e6e7e23a] { grid-column: span 20; } .grid-cell--span-32[data-v-e6e7e23a] { grid-column: span 32; } .grid-cell--span-36[data-v-e6e7e23a] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-e6e7e23a] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-e6e7e23a] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-e6e7e23a] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-e6e7e23a] { justify-content: center !important; } .elem--bold span[data-v-e6e7e23a] { font-weight: 800; } .elem--column[data-v-e6e7e23a] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-e6e7e23a] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-e6e7e23a] { fill: #00a79b; } .elem--clickable[data-v-e6e7e23a]:hover { cursor: pointer; } .elem--disabled[data-v-e6e7e23a] { color: #cccccc; } .elem--disabled svg[data-v-e6e7e23a] { fill: #cccccc; } .elem--nowrap span[data-v-e6e7e23a] { white-space: nowrap; } .elem--danger svg[data-v-e6e7e23a] { fill: #eb1515; } .elem--span-1[data-v-e6e7e23a] { grid-column: span 1; } .elem--span-2[data-v-e6e7e23a] { grid-column: span 2; } .elem--span-3[data-v-e6e7e23a] { grid-column: span 3; } .elem--span-4[data-v-e6e7e23a] { grid-column: span 4; } .elem--span-5[data-v-e6e7e23a] { grid-column: span 5; } .elem--span-6[data-v-e6e7e23a] { grid-column: span 6; } .elem--span-7[data-v-e6e7e23a] { grid-column: span 7; } .elem--span-8[data-v-e6e7e23a] { grid-column: span 8; } .elem--span-9[data-v-e6e7e23a] { grid-column: span 9; } .elem--span-10[data-v-e6e7e23a] { grid-column: span 10; } .elem--span-12[data-v-e6e7e23a] { grid-column: span 12; } .elem--span-13[data-v-e6e7e23a] { grid-column: span 13; } .elem--span-14[data-v-e6e7e23a] { grid-column: span 14; } .elem--span-16[data-v-e6e7e23a] { grid-column: span 16; } .elem--span-18[data-v-e6e7e23a] { grid-column: span 18; } .elem--span-20[data-v-e6e7e23a] { grid-column: span 20; } .elem--span-32[data-v-e6e7e23a] { grid-column: span 32; } .elem--span-36[data-v-e6e7e23a] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-e6e7e23a] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-e6e7e23a] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-e6e7e23a]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-e6e7e23a] { display: flex; } /* flex-direction */ .flex-column[data-v-e6e7e23a] { flex-direction: column; } .flex-row[data-v-e6e7e23a] { flex-direction: row; } /* flex */ .flex-1[data-v-e6e7e23a] { flex: 1 !important; } .flex-2[data-v-e6e7e23a] { flex: 2; } .flex-3[data-v-e6e7e23a] { flex: 3; } .flex-3[data-v-e6e7e23a] { flex: 4; } .flex-5[data-v-e6e7e23a] { flex: 5; } .flex-auto[data-v-e6e7e23a] { flex: auto; } .flex-none[data-v-e6e7e23a] { flex: none; } .flex-content[data-v-e6e7e23a] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-e6e7e23a] { flex-wrap: wrap; } .flex-nowrap[data-v-e6e7e23a] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-e6e7e23a] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-e6e7e23a] { justify-content: flex-start; } .justify-content-end[data-v-e6e7e23a] { justify-content: flex-end; } .justify-content-baseline[data-v-e6e7e23a] { justify-content: baseline; } .justify-content-center[data-v-e6e7e23a] { justify-content: center; } .justify-content-space-between[data-v-e6e7e23a] { justify-content: space-between; } .justify-content-space-around[data-v-e6e7e23a] { justify-content: space-around; } .justify-content-space-evenly[data-v-e6e7e23a] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-e6e7e23a] { align-items: flex-start; } .align-items-flex-end[data-v-e6e7e23a] { align-items: flex-end; } .align-items-stretch[data-v-e6e7e23a] { align-items: stretch; } .align-items-baseline[data-v-e6e7e23a] { align-items: baseline; } .align-items-center[data-v-e6e7e23a] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-e6e7e23a] { align-content: flex-start; } .align-content-flex-end[data-v-e6e7e23a] { align-content: flex-end; } .align-content-center[data-v-e6e7e23a] { align-content: center; } .align-content-stretch[data-v-e6e7e23a] { align-content: stretch; } .align-content-space-between[data-v-e6e7e23a] { align-content: space-between; } .align-content-space-around[data-v-e6e7e23a] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-e6e7e23a] { align-self: flex-start; } .align-self-flex-end[data-v-e6e7e23a] { align-self: flex-end; } .align-self-stretch[data-v-e6e7e23a] { align-self: stretch; } .align-self-flex-baseline[data-v-e6e7e23a] { align-self: baseline; } .align-self-center[data-v-e6e7e23a] { align-self: center; } .align-self-auto[data-v-e6e7e23a] { align-self: auto; } .flex-gap-1[data-v-e6e7e23a] { gap: 4px; } .flex-gap-2[data-v-e6e7e23a] { gap: 8px; } .flex-gap-3[data-v-e6e7e23a] { gap: 12px; } .flex-gap-4[data-v-e6e7e23a] { gap: 16px; } .flex-gap-5[data-v-e6e7e23a] { gap: 20px; } .flex-gap-6[data-v-e6e7e23a] { gap: 24px; } .flex-gap-7[data-v-e6e7e23a] { gap: 28px; } .flex-gap-8[data-v-e6e7e23a] { gap: 32px; } .flex-gap-10[data-v-e6e7e23a] { gap: 40px; } .flex-gap-12[data-v-e6e7e23a] { gap: 48px; } .col-none[data-v-e6e7e23a] { display: none; } .col-auto[data-v-e6e7e23a] { grid-column: auto; } .col-1[data-v-e6e7e23a] { grid-column: span 1; } .col-2[data-v-e6e7e23a] { grid-column: span 2; } .col-3[data-v-e6e7e23a] { grid-column: span 3; } .col-4[data-v-e6e7e23a] { grid-column: span 4; } .col-5[data-v-e6e7e23a] { grid-column: span 5; } .col-6[data-v-e6e7e23a] { grid-column: span 6; } .col-7[data-v-e6e7e23a] { grid-column: span 7; } .col-8[data-v-e6e7e23a] { grid-column: span 8; } .col-9[data-v-e6e7e23a] { grid-column: span 9; } .col-10[data-v-e6e7e23a] { grid-column: span 10; } .col-12[data-v-e6e7e23a] { grid-column: span 12; } .col-13[data-v-e6e7e23a] { grid-column: span 13; } .col-14[data-v-e6e7e23a] { grid-column: span 14; } .col-15[data-v-e6e7e23a] { grid-column: span 15; } .col-16[data-v-e6e7e23a] { grid-column: span 16; } .col-18[data-v-e6e7e23a] { grid-column: span 18; } .col-20[data-v-e6e7e23a] { grid-column: span 20; } .col-22[data-v-e6e7e23a] { grid-column: span 22; } .col-24[data-v-e6e7e23a] { grid-column: span 24; } .col-26[data-v-e6e7e23a] { grid-column: span 26; } .col-27[data-v-e6e7e23a] { grid-column: span 27; } .col-28[data-v-e6e7e23a] { grid-column: span 28; } .col-30[data-v-e6e7e23a] { grid-column: span 30; } .col-36[data-v-e6e7e23a] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-e6e7e23a] { display: none; } .col-md-36[data-v-e6e7e23a] { grid-column: span 36; } .col-md-28[data-v-e6e7e23a] { grid-column: span 28; } .col-md-27[data-v-e6e7e23a] { grid-column: span 27; } .col-md-24[data-v-e6e7e23a] { grid-column: span 24; } .col-md-22[data-v-e6e7e23a] { grid-column: span 22; } .col-md-20[data-v-e6e7e23a] { grid-column: span 20; } .col-md-19[data-v-e6e7e23a] { grid-column: span 19; } .col-md-18[data-v-e6e7e23a] { grid-column: span 18; } .col-md-17[data-v-e6e7e23a] { grid-column: span 17; } .col-md-16[data-v-e6e7e23a] { grid-column: span 16; } .col-md-15[data-v-e6e7e23a] { grid-column: span 15; } .col-md-14[data-v-e6e7e23a] { grid-column: span 14; } .col-md-13[data-v-e6e7e23a] { grid-column: span 13; } .col-md-12[data-v-e6e7e23a] { grid-column: span 12; } .col-md-10[data-v-e6e7e23a] { grid-column: span 10; } .col-md-9[data-v-e6e7e23a] { grid-column: span 9; } .col-md-8[data-v-e6e7e23a] { grid-column: span 8; } .col-md-6[data-v-e6e7e23a] { grid-column: span 6; } .col-md-5[data-v-e6e7e23a] { grid-column: span 5; } .col-md-4[data-v-e6e7e23a] { grid-column: span 4; } .col-md-3[data-v-e6e7e23a] { grid-column: span 3; } .col-md-2[data-v-e6e7e23a] { grid-column: span 2; } .col-md-1[data-v-e6e7e23a] { grid-column: span 1; } .col-md-auto[data-v-e6e7e23a] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-e6e7e23a] { display: none; } .col-sm-36[data-v-e6e7e23a] { grid-column: span 36; } .col-sm-32[data-v-e6e7e23a] { grid-column: span 32; } .col-sm-28[data-v-e6e7e23a] { grid-column: span 28; } .col-sm-27[data-v-e6e7e23a] { grid-column: span 27; } .col-sm-24[data-v-e6e7e23a] { grid-column: span 24; } .col-sm-22[data-v-e6e7e23a] { grid-column: span 22; } .col-sm-20[data-v-e6e7e23a] { grid-column: span 20; } .col-sm-18[data-v-e6e7e23a] { grid-column: span 18; } .col-sm-16[data-v-e6e7e23a] { grid-column: span 16; } .col-sm-15[data-v-e6e7e23a] { grid-column: span 15; } .col-sm-14[data-v-e6e7e23a] { grid-column: span 14; } .col-sm-13[data-v-e6e7e23a] { grid-column: span 12; } .col-sm-12[data-v-e6e7e23a] { grid-column: span 12; } .col-sm-10[data-v-e6e7e23a] { grid-column: span 10; } .col-sm-9[data-v-e6e7e23a] { grid-column: span 8; } .col-sm-8[data-v-e6e7e23a] { grid-column: span 8; } .col-sm-6[data-v-e6e7e23a] { grid-column: span 6; } .col-sm-4[data-v-e6e7e23a] { grid-column: span 4; } .col-sm-auto[data-v-e6e7e23a] { grid-column: auto; } } .fade-enter-active[data-v-e6e7e23a] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-e6e7e23a] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-e6e7e23a], .fade-leave-to[data-v-e6e7e23a] { opacity: 0; } @media (max-width: 720px) { .hide-mobile[data-v-e6e7e23a] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-e6e7e23a] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-e6e7e23a] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-e6e7e23a] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-e6e7e23a] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-e6e7e23a] { display: none !important; } } .tab[data-v-e6e7e23a] { display: flex; justify-content: center; align-items: center; padding: 10px 20px; gap: 8px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; background: transparent; user-select: none; position: relative; overflow: hidden; } .tab__label[data-v-e6e7e23a] { font-weight: 500; font-size: 13px; color: var(--text-secondary, #647184); transition: color 0.2s ease; white-space: nowrap; } .tab__icon[data-v-e6e7e23a] { display: none; flex-shrink: 0; color: var(--text-muted, #94a2b8); transition: color 0.2s ease; } .tab[data-v-e6e7e23a]:hover:not(.tab--selected) { background: var(--bg-subtle, #edf1f5); } .tab:hover:not(.tab--selected) .tab__label[data-v-e6e7e23a] { color: var(--text-primary, #4d5462); } .tab--selected[data-v-e6e7e23a] { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-600) 30%, transparent), 0 4px 16px color-mix(in srgb, var(--primary-700) 20%, transparent); } .tab--selected .tab__label[data-v-e6e7e23a] { color: white; font-weight: 600; } .tab--selected .tab__icon[data-v-e6e7e23a] { color: white; } .tab--selected[data-v-e6e7e23a]:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-600) 40%, transparent), 0 6px 20px color-mix(in srgb, var(--primary-700) 25%, transparent); } @media (max-width: 720px) { .tab[data-v-e6e7e23a] { flex-direction: column; padding: 10px 12px; gap: 6px; min-width: 60px; min-height: 60px; border-radius: 12px; } .tab--unselected[data-v-e6e7e23a] { background: var(--bg-subtle, #f8f9fb); } .tab--unselected .tab__icon[data-v-e6e7e23a] { color: var(--primary-500); } .tab--unselected .tab__label[data-v-e6e7e23a] { color: var(--text-primary, #4d5462); } .tab--unselected[data-v-e6e7e23a]:active { background: var(--border-default, #e2e7ef); transform: scale(0.97); } .tab--selected[data-v-e6e7e23a] { padding: 10px 14px; min-width: 68px; } .tab--selected .tab__label[data-v-e6e7e23a] { font-size: 11px; } .tab .tab__icon[data-v-e6e7e23a] { display: flex; } .tab .tab__label[data-v-e6e7e23a] { font-size: 10px; line-height: 1.2; text-align: center; } .tab[data-v-e6e7e23a]:hover:not(.tab--selected) { background: var(--bg-subtle, #f8f9fb); transform: none; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .tabs { display: flex; position: relative; gap: 8px; justify-content: center; transition: all 0.25s ease; white-space: nowrap; } .tabs--start { justify-content: flex-start; } .tabs--mobile { justify-content: flex-start; gap: 8px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-3230ba5d]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-3230ba5d] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-3230ba5d] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-3230ba5d]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-3230ba5d], .theme-mode-light[data-v-3230ba5d] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-3230ba5d], .theme-mode-dark[data-v-3230ba5d] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-3230ba5d]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-3230ba5d]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-3230ba5d] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-3230ba5d] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-3230ba5d]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-3230ba5d], input[disabled][data-v-3230ba5d] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-3230ba5d] { opacity: 0.9; } input[readonly][data-v-3230ba5d] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-3230ba5d] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-3230ba5d]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-3230ba5d]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-3230ba5d]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-3230ba5d] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-3230ba5d]:nth-child(odd), .list-card-desktop__wrapper[data-v-3230ba5d]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-3230ba5d]:nth-child(even), .list-card-desktop__wrapper[data-v-3230ba5d]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-3230ba5d]:nth-child(odd), .listCardDesktopWrapper[data-v-3230ba5d]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-3230ba5d]:nth-child(even), .listCardDesktopWrapper[data-v-3230ba5d]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-3230ba5d] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-3230ba5d] { cursor: pointer; } .card-layout--selectionnable[data-v-3230ba5d]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-3230ba5d] { cursor: auto; } .card-layout--drawer[data-v-3230ba5d] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-3230ba5d] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-3230ba5d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-3230ba5d] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-3230ba5d] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-3230ba5d] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-3230ba5d]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-3230ba5d] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-3230ba5d] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-3230ba5d] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-3230ba5d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-3230ba5d] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-3230ba5d] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-3230ba5d] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-3230ba5d] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-3230ba5d] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-3230ba5d] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-3230ba5d] { background-color: #eb1515; } .color-chip--dossiers[data-v-3230ba5d] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-3230ba5d] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-3230ba5d] { background-color: #00a79b; } .color-chip--virements[data-v-3230ba5d] { background-color: var(--secondary-400); } .color-chip--factures[data-v-3230ba5d] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-3230ba5d] { background-color: #eb1515; } .color-recherche-dossiers[data-v-3230ba5d] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-3230ba5d] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-3230ba5d] { background-color: #00a79b; } .color-recherche-virements[data-v-3230ba5d] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-3230ba5d] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-3230ba5d] { color: #00a79b; cursor: pointer; } .scrollable[data-v-3230ba5d] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-3230ba5d] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-3230ba5d] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-3230ba5d] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-3230ba5d] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-3230ba5d] { font-weight: 800; } .grid-cell--column[data-v-3230ba5d] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-3230ba5d] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-3230ba5d] { fill: #00a79b; } .grid-cell--disabled[data-v-3230ba5d] { color: #cccccc; } .grid-cell--disabled svg[data-v-3230ba5d] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-3230ba5d] { white-space: nowrap; } .grid-cell--danger svg[data-v-3230ba5d] { fill: #eb1515; } .grid-cell--span-1[data-v-3230ba5d] { grid-column: span 1; } .grid-cell--span-2[data-v-3230ba5d] { grid-column: span 2; } .grid-cell--span-3[data-v-3230ba5d] { grid-column: span 3; } .grid-cell--span-4[data-v-3230ba5d] { grid-column: span 4; } .grid-cell--span-5[data-v-3230ba5d] { grid-column: span 5; } .grid-cell--span-6[data-v-3230ba5d] { grid-column: span 6; } .grid-cell--span-7[data-v-3230ba5d] { grid-column: span 7; } .grid-cell--span-8[data-v-3230ba5d] { grid-column: span 8; } .grid-cell--span-9[data-v-3230ba5d] { grid-column: span 9; } .grid-cell--span-10[data-v-3230ba5d] { grid-column: span 10; } .grid-cell--span-12[data-v-3230ba5d] { grid-column: span 12; } .grid-cell--span-13[data-v-3230ba5d] { grid-column: span 13; } .grid-cell--span-14[data-v-3230ba5d] { grid-column: span 14; } .grid-cell--span-16[data-v-3230ba5d] { grid-column: span 16; } .grid-cell--span-18[data-v-3230ba5d] { grid-column: span 18; } .grid-cell--span-20[data-v-3230ba5d] { grid-column: span 20; } .grid-cell--span-32[data-v-3230ba5d] { grid-column: span 32; } .grid-cell--span-36[data-v-3230ba5d] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-3230ba5d] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-3230ba5d] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-3230ba5d] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-3230ba5d] { justify-content: center !important; } .elem--bold span[data-v-3230ba5d] { font-weight: 800; } .elem--column[data-v-3230ba5d] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-3230ba5d] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-3230ba5d] { fill: #00a79b; } .elem--clickable[data-v-3230ba5d]:hover { cursor: pointer; } .elem--disabled[data-v-3230ba5d] { color: #cccccc; } .elem--disabled svg[data-v-3230ba5d] { fill: #cccccc; } .elem--nowrap span[data-v-3230ba5d] { white-space: nowrap; } .elem--danger svg[data-v-3230ba5d] { fill: #eb1515; } .elem--span-1[data-v-3230ba5d] { grid-column: span 1; } .elem--span-2[data-v-3230ba5d] { grid-column: span 2; } .elem--span-3[data-v-3230ba5d] { grid-column: span 3; } .elem--span-4[data-v-3230ba5d] { grid-column: span 4; } .elem--span-5[data-v-3230ba5d] { grid-column: span 5; } .elem--span-6[data-v-3230ba5d] { grid-column: span 6; } .elem--span-7[data-v-3230ba5d] { grid-column: span 7; } .elem--span-8[data-v-3230ba5d] { grid-column: span 8; } .elem--span-9[data-v-3230ba5d] { grid-column: span 9; } .elem--span-10[data-v-3230ba5d] { grid-column: span 10; } .elem--span-12[data-v-3230ba5d] { grid-column: span 12; } .elem--span-13[data-v-3230ba5d] { grid-column: span 13; } .elem--span-14[data-v-3230ba5d] { grid-column: span 14; } .elem--span-16[data-v-3230ba5d] { grid-column: span 16; } .elem--span-18[data-v-3230ba5d] { grid-column: span 18; } .elem--span-20[data-v-3230ba5d] { grid-column: span 20; } .elem--span-32[data-v-3230ba5d] { grid-column: span 32; } .elem--span-36[data-v-3230ba5d] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-3230ba5d] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-3230ba5d] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-3230ba5d]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-3230ba5d] { display: flex; } /* flex-direction */ .flex-column[data-v-3230ba5d] { flex-direction: column; } .flex-row[data-v-3230ba5d] { flex-direction: row; } /* flex */ .flex-1[data-v-3230ba5d] { flex: 1 !important; } .flex-2[data-v-3230ba5d] { flex: 2; } .flex-3[data-v-3230ba5d] { flex: 3; } .flex-3[data-v-3230ba5d] { flex: 4; } .flex-5[data-v-3230ba5d] { flex: 5; } .flex-auto[data-v-3230ba5d] { flex: auto; } .flex-none[data-v-3230ba5d] { flex: none; } .flex-content[data-v-3230ba5d] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-3230ba5d] { flex-wrap: wrap; } .flex-nowrap[data-v-3230ba5d] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-3230ba5d] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-3230ba5d] { justify-content: flex-start; } .justify-content-end[data-v-3230ba5d] { justify-content: flex-end; } .justify-content-baseline[data-v-3230ba5d] { justify-content: baseline; } .justify-content-center[data-v-3230ba5d] { justify-content: center; } .justify-content-space-between[data-v-3230ba5d] { justify-content: space-between; } .justify-content-space-around[data-v-3230ba5d] { justify-content: space-around; } .justify-content-space-evenly[data-v-3230ba5d] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-3230ba5d] { align-items: flex-start; } .align-items-flex-end[data-v-3230ba5d] { align-items: flex-end; } .align-items-stretch[data-v-3230ba5d] { align-items: stretch; } .align-items-baseline[data-v-3230ba5d] { align-items: baseline; } .align-items-center[data-v-3230ba5d] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-3230ba5d] { align-content: flex-start; } .align-content-flex-end[data-v-3230ba5d] { align-content: flex-end; } .align-content-center[data-v-3230ba5d] { align-content: center; } .align-content-stretch[data-v-3230ba5d] { align-content: stretch; } .align-content-space-between[data-v-3230ba5d] { align-content: space-between; } .align-content-space-around[data-v-3230ba5d] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-3230ba5d] { align-self: flex-start; } .align-self-flex-end[data-v-3230ba5d] { align-self: flex-end; } .align-self-stretch[data-v-3230ba5d] { align-self: stretch; } .align-self-flex-baseline[data-v-3230ba5d] { align-self: baseline; } .align-self-center[data-v-3230ba5d] { align-self: center; } .align-self-auto[data-v-3230ba5d] { align-self: auto; } .flex-gap-1[data-v-3230ba5d] { gap: 4px; } .flex-gap-2[data-v-3230ba5d] { gap: 8px; } .flex-gap-3[data-v-3230ba5d] { gap: 12px; } .flex-gap-4[data-v-3230ba5d] { gap: 16px; } .flex-gap-5[data-v-3230ba5d] { gap: 20px; } .flex-gap-6[data-v-3230ba5d] { gap: 24px; } .flex-gap-7[data-v-3230ba5d] { gap: 28px; } .flex-gap-8[data-v-3230ba5d] { gap: 32px; } .flex-gap-10[data-v-3230ba5d] { gap: 40px; } .flex-gap-12[data-v-3230ba5d] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-3230ba5d] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-3230ba5d] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-3230ba5d] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-3230ba5d] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-3230ba5d] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-3230ba5d] { display: none !important; } } .col-none[data-v-3230ba5d] { display: none; } .col-auto[data-v-3230ba5d] { grid-column: auto; } .col-1[data-v-3230ba5d] { grid-column: span 1; } .col-2[data-v-3230ba5d] { grid-column: span 2; } .col-3[data-v-3230ba5d] { grid-column: span 3; } .col-4[data-v-3230ba5d] { grid-column: span 4; } .col-5[data-v-3230ba5d] { grid-column: span 5; } .col-6[data-v-3230ba5d] { grid-column: span 6; } .col-7[data-v-3230ba5d] { grid-column: span 7; } .col-8[data-v-3230ba5d] { grid-column: span 8; } .col-9[data-v-3230ba5d] { grid-column: span 9; } .col-10[data-v-3230ba5d] { grid-column: span 10; } .col-12[data-v-3230ba5d] { grid-column: span 12; } .col-13[data-v-3230ba5d] { grid-column: span 13; } .col-14[data-v-3230ba5d] { grid-column: span 14; } .col-15[data-v-3230ba5d] { grid-column: span 15; } .col-16[data-v-3230ba5d] { grid-column: span 16; } .col-18[data-v-3230ba5d] { grid-column: span 18; } .col-20[data-v-3230ba5d] { grid-column: span 20; } .col-22[data-v-3230ba5d] { grid-column: span 22; } .col-24[data-v-3230ba5d] { grid-column: span 24; } .col-26[data-v-3230ba5d] { grid-column: span 26; } .col-27[data-v-3230ba5d] { grid-column: span 27; } .col-28[data-v-3230ba5d] { grid-column: span 28; } .col-30[data-v-3230ba5d] { grid-column: span 30; } .col-36[data-v-3230ba5d] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-3230ba5d] { display: none; } .col-md-36[data-v-3230ba5d] { grid-column: span 36; } .col-md-28[data-v-3230ba5d] { grid-column: span 28; } .col-md-27[data-v-3230ba5d] { grid-column: span 27; } .col-md-24[data-v-3230ba5d] { grid-column: span 24; } .col-md-22[data-v-3230ba5d] { grid-column: span 22; } .col-md-20[data-v-3230ba5d] { grid-column: span 20; } .col-md-19[data-v-3230ba5d] { grid-column: span 19; } .col-md-18[data-v-3230ba5d] { grid-column: span 18; } .col-md-17[data-v-3230ba5d] { grid-column: span 17; } .col-md-16[data-v-3230ba5d] { grid-column: span 16; } .col-md-15[data-v-3230ba5d] { grid-column: span 15; } .col-md-14[data-v-3230ba5d] { grid-column: span 14; } .col-md-13[data-v-3230ba5d] { grid-column: span 13; } .col-md-12[data-v-3230ba5d] { grid-column: span 12; } .col-md-10[data-v-3230ba5d] { grid-column: span 10; } .col-md-9[data-v-3230ba5d] { grid-column: span 9; } .col-md-8[data-v-3230ba5d] { grid-column: span 8; } .col-md-6[data-v-3230ba5d] { grid-column: span 6; } .col-md-5[data-v-3230ba5d] { grid-column: span 5; } .col-md-4[data-v-3230ba5d] { grid-column: span 4; } .col-md-3[data-v-3230ba5d] { grid-column: span 3; } .col-md-2[data-v-3230ba5d] { grid-column: span 2; } .col-md-1[data-v-3230ba5d] { grid-column: span 1; } .col-md-auto[data-v-3230ba5d] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-3230ba5d] { display: none; } .col-sm-36[data-v-3230ba5d] { grid-column: span 36; } .col-sm-32[data-v-3230ba5d] { grid-column: span 32; } .col-sm-28[data-v-3230ba5d] { grid-column: span 28; } .col-sm-27[data-v-3230ba5d] { grid-column: span 27; } .col-sm-24[data-v-3230ba5d] { grid-column: span 24; } .col-sm-22[data-v-3230ba5d] { grid-column: span 22; } .col-sm-20[data-v-3230ba5d] { grid-column: span 20; } .col-sm-18[data-v-3230ba5d] { grid-column: span 18; } .col-sm-16[data-v-3230ba5d] { grid-column: span 16; } .col-sm-15[data-v-3230ba5d] { grid-column: span 15; } .col-sm-14[data-v-3230ba5d] { grid-column: span 14; } .col-sm-13[data-v-3230ba5d] { grid-column: span 12; } .col-sm-12[data-v-3230ba5d] { grid-column: span 12; } .col-sm-10[data-v-3230ba5d] { grid-column: span 10; } .col-sm-9[data-v-3230ba5d] { grid-column: span 8; } .col-sm-8[data-v-3230ba5d] { grid-column: span 8; } .col-sm-6[data-v-3230ba5d] { grid-column: span 6; } .col-sm-4[data-v-3230ba5d] { grid-column: span 4; } .col-sm-auto[data-v-3230ba5d] { grid-column: auto; } } .fade-enter-active[data-v-3230ba5d] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-3230ba5d] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-3230ba5d], .fade-leave-to[data-v-3230ba5d] { opacity: 0; } .premium-theme-selector[data-v-3230ba5d] { display: flex; flex-direction: column; gap: 20px; /* Mobile Responsive */ } .premium-theme-selector__options[data-v-3230ba5d] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .premium-theme-selector__option[data-v-3230ba5d] { position: relative; background: rgba(var(--secondary-700-rgb), 0.4); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 0; cursor: pointer; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .premium-theme-selector__option[data-v-3230ba5d]:hover:not(.premium-theme-selector__option--active) { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); background: rgba(var(--secondary-700-rgb), 0.6); } .premium-theme-selector__option:hover:not(.premium-theme-selector__option--active) .premium-theme-selector__gradient[data-v-3230ba5d] { opacity: 0.3; } .premium-theme-selector__option:hover:not(.premium-theme-selector__option--active) .premium-theme-selector__icon[data-v-3230ba5d] { transform: rotate(5deg); } .premium-theme-selector__option--active[data-v-3230ba5d] { border-color: rgba(255, 255, 255, 0.3); background: rgba(var(--secondary-600-rgb), 0.5); } .premium-theme-selector__option--active .premium-theme-selector__gradient[data-v-3230ba5d] { opacity: 0.5; } .premium-theme-selector__option--active .premium-theme-selector__icon[data-v-3230ba5d] { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)); } .premium-theme-selector__option--active .premium-theme-selector__glow[data-v-3230ba5d] { opacity: 1; } .premium-theme-selector__option--active .premium-theme-selector__check[data-v-3230ba5d] { opacity: 1; transform: scale(1) rotate(0deg); } .premium-theme-selector__option[data-v-3230ba5d]:active { transform: scale(0.98); } .premium-theme-selector__option:active .premium-theme-selector__ripple[data-v-3230ba5d] { transform: scale(2); opacity: 0; } .premium-theme-selector__option-content[data-v-3230ba5d] { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; gap: 12px; z-index: 2; } .premium-theme-selector__gradient[data-v-3230ba5d] { position: absolute; inset: 0; opacity: 0.15; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .premium-theme-selector__icon[data-v-3230ba5d] { font-size: 48px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 3; user-select: none; } .premium-theme-selector__label[data-v-3230ba5d] { text-transform: uppercase; letter-spacing: 1px; z-index: 3; transition: all 0.3s ease; } .premium-theme-selector__check[data-v-3230ba5d] { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; background: linear-gradient(135deg, var(--primary-400), var(--primary-500)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transform: scale(0) rotate(-180deg); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 4; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.1); } .premium-theme-selector__glow[data-v-3230ba5d] { position: absolute; inset: -2px; border-radius: 16px; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0; } .premium-theme-selector__ripple[data-v-3230ba5d] { position: absolute; inset: 0; border-radius: 50%; transform: scale(0); opacity: 0.5; transition: transform 0.6s ease, opacity 0.6s ease; pointer-events: none; } .premium-theme-selector__description[data-v-3230ba5d] { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: rgba(var(--secondary-800-rgb), 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .premium-theme-selector__sparkle[data-v-3230ba5d] { color: var(--primary-400); animation: sparkle-3230ba5d 2s ease-in-out infinite; } @keyframes sparkle-3230ba5d { 0%, 100% { opacity: 1; transform: rotate(0deg); } 50% { opacity: 0.6; transform: rotate(20deg); } } @media (max-width: 768px) { .premium-theme-selector__options[data-v-3230ba5d] { grid-template-columns: 1fr; } .premium-theme-selector__option-content[data-v-3230ba5d] { padding: 28px 16px; } .premium-theme-selector__icon[data-v-3230ba5d] { font-size: 40px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-b90be058]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-b90be058] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-b90be058] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-b90be058]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-b90be058], .theme-mode-light[data-v-b90be058] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-b90be058], .theme-mode-dark[data-v-b90be058] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-b90be058]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-b90be058]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-b90be058] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-b90be058] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-b90be058]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-b90be058], input[disabled][data-v-b90be058] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-b90be058] { opacity: 0.9; } input[readonly][data-v-b90be058] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-b90be058] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-b90be058]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-b90be058]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-b90be058]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-b90be058] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-b90be058]:nth-child(odd), .list-card-desktop__wrapper[data-v-b90be058]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-b90be058]:nth-child(even), .list-card-desktop__wrapper[data-v-b90be058]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-b90be058]:nth-child(odd), .listCardDesktopWrapper[data-v-b90be058]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-b90be058]:nth-child(even), .listCardDesktopWrapper[data-v-b90be058]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-b90be058] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-b90be058] { cursor: pointer; } .card-layout--selectionnable[data-v-b90be058]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-b90be058] { cursor: auto; } .card-layout--drawer[data-v-b90be058] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-b90be058] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-b90be058] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-b90be058] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-b90be058] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-b90be058] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-b90be058]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-b90be058] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-b90be058] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-b90be058] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-b90be058] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-b90be058] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-b90be058] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-b90be058] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-b90be058] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-b90be058] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-b90be058] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-b90be058] { background-color: #eb1515; } .color-chip--dossiers[data-v-b90be058] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-b90be058] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-b90be058] { background-color: #00a79b; } .color-chip--virements[data-v-b90be058] { background-color: var(--secondary-400); } .color-chip--factures[data-v-b90be058] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-b90be058] { background-color: #eb1515; } .color-recherche-dossiers[data-v-b90be058] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-b90be058] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-b90be058] { background-color: #00a79b; } .color-recherche-virements[data-v-b90be058] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-b90be058] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-b90be058] { color: #00a79b; cursor: pointer; } .scrollable[data-v-b90be058] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-b90be058] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-b90be058] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-b90be058] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-b90be058] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-b90be058] { font-weight: 800; } .grid-cell--column[data-v-b90be058] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-b90be058] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-b90be058] { fill: #00a79b; } .grid-cell--disabled[data-v-b90be058] { color: #cccccc; } .grid-cell--disabled svg[data-v-b90be058] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-b90be058] { white-space: nowrap; } .grid-cell--danger svg[data-v-b90be058] { fill: #eb1515; } .grid-cell--span-1[data-v-b90be058] { grid-column: span 1; } .grid-cell--span-2[data-v-b90be058] { grid-column: span 2; } .grid-cell--span-3[data-v-b90be058] { grid-column: span 3; } .grid-cell--span-4[data-v-b90be058] { grid-column: span 4; } .grid-cell--span-5[data-v-b90be058] { grid-column: span 5; } .grid-cell--span-6[data-v-b90be058] { grid-column: span 6; } .grid-cell--span-7[data-v-b90be058] { grid-column: span 7; } .grid-cell--span-8[data-v-b90be058] { grid-column: span 8; } .grid-cell--span-9[data-v-b90be058] { grid-column: span 9; } .grid-cell--span-10[data-v-b90be058] { grid-column: span 10; } .grid-cell--span-12[data-v-b90be058] { grid-column: span 12; } .grid-cell--span-13[data-v-b90be058] { grid-column: span 13; } .grid-cell--span-14[data-v-b90be058] { grid-column: span 14; } .grid-cell--span-16[data-v-b90be058] { grid-column: span 16; } .grid-cell--span-18[data-v-b90be058] { grid-column: span 18; } .grid-cell--span-20[data-v-b90be058] { grid-column: span 20; } .grid-cell--span-32[data-v-b90be058] { grid-column: span 32; } .grid-cell--span-36[data-v-b90be058] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-b90be058] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-b90be058] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-b90be058] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-b90be058] { justify-content: center !important; } .elem--bold span[data-v-b90be058] { font-weight: 800; } .elem--column[data-v-b90be058] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-b90be058] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-b90be058] { fill: #00a79b; } .elem--clickable[data-v-b90be058]:hover { cursor: pointer; } .elem--disabled[data-v-b90be058] { color: #cccccc; } .elem--disabled svg[data-v-b90be058] { fill: #cccccc; } .elem--nowrap span[data-v-b90be058] { white-space: nowrap; } .elem--danger svg[data-v-b90be058] { fill: #eb1515; } .elem--span-1[data-v-b90be058] { grid-column: span 1; } .elem--span-2[data-v-b90be058] { grid-column: span 2; } .elem--span-3[data-v-b90be058] { grid-column: span 3; } .elem--span-4[data-v-b90be058] { grid-column: span 4; } .elem--span-5[data-v-b90be058] { grid-column: span 5; } .elem--span-6[data-v-b90be058] { grid-column: span 6; } .elem--span-7[data-v-b90be058] { grid-column: span 7; } .elem--span-8[data-v-b90be058] { grid-column: span 8; } .elem--span-9[data-v-b90be058] { grid-column: span 9; } .elem--span-10[data-v-b90be058] { grid-column: span 10; } .elem--span-12[data-v-b90be058] { grid-column: span 12; } .elem--span-13[data-v-b90be058] { grid-column: span 13; } .elem--span-14[data-v-b90be058] { grid-column: span 14; } .elem--span-16[data-v-b90be058] { grid-column: span 16; } .elem--span-18[data-v-b90be058] { grid-column: span 18; } .elem--span-20[data-v-b90be058] { grid-column: span 20; } .elem--span-32[data-v-b90be058] { grid-column: span 32; } .elem--span-36[data-v-b90be058] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-b90be058] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-b90be058] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-b90be058]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-b90be058] { display: flex; } /* flex-direction */ .flex-column[data-v-b90be058] { flex-direction: column; } .flex-row[data-v-b90be058] { flex-direction: row; } /* flex */ .flex-1[data-v-b90be058] { flex: 1 !important; } .flex-2[data-v-b90be058] { flex: 2; } .flex-3[data-v-b90be058] { flex: 3; } .flex-3[data-v-b90be058] { flex: 4; } .flex-5[data-v-b90be058] { flex: 5; } .flex-auto[data-v-b90be058] { flex: auto; } .flex-none[data-v-b90be058] { flex: none; } .flex-content[data-v-b90be058] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-b90be058] { flex-wrap: wrap; } .flex-nowrap[data-v-b90be058] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-b90be058] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-b90be058] { justify-content: flex-start; } .justify-content-end[data-v-b90be058] { justify-content: flex-end; } .justify-content-baseline[data-v-b90be058] { justify-content: baseline; } .justify-content-center[data-v-b90be058] { justify-content: center; } .justify-content-space-between[data-v-b90be058] { justify-content: space-between; } .justify-content-space-around[data-v-b90be058] { justify-content: space-around; } .justify-content-space-evenly[data-v-b90be058] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-b90be058] { align-items: flex-start; } .align-items-flex-end[data-v-b90be058] { align-items: flex-end; } .align-items-stretch[data-v-b90be058] { align-items: stretch; } .align-items-baseline[data-v-b90be058] { align-items: baseline; } .align-items-center[data-v-b90be058] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-b90be058] { align-content: flex-start; } .align-content-flex-end[data-v-b90be058] { align-content: flex-end; } .align-content-center[data-v-b90be058] { align-content: center; } .align-content-stretch[data-v-b90be058] { align-content: stretch; } .align-content-space-between[data-v-b90be058] { align-content: space-between; } .align-content-space-around[data-v-b90be058] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-b90be058] { align-self: flex-start; } .align-self-flex-end[data-v-b90be058] { align-self: flex-end; } .align-self-stretch[data-v-b90be058] { align-self: stretch; } .align-self-flex-baseline[data-v-b90be058] { align-self: baseline; } .align-self-center[data-v-b90be058] { align-self: center; } .align-self-auto[data-v-b90be058] { align-self: auto; } .flex-gap-1[data-v-b90be058] { gap: 4px; } .flex-gap-2[data-v-b90be058] { gap: 8px; } .flex-gap-3[data-v-b90be058] { gap: 12px; } .flex-gap-4[data-v-b90be058] { gap: 16px; } .flex-gap-5[data-v-b90be058] { gap: 20px; } .flex-gap-6[data-v-b90be058] { gap: 24px; } .flex-gap-7[data-v-b90be058] { gap: 28px; } .flex-gap-8[data-v-b90be058] { gap: 32px; } .flex-gap-10[data-v-b90be058] { gap: 40px; } .flex-gap-12[data-v-b90be058] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-b90be058] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-b90be058] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-b90be058] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-b90be058] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-b90be058] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-b90be058] { display: none !important; } } .col-none[data-v-b90be058] { display: none; } .col-auto[data-v-b90be058] { grid-column: auto; } .col-1[data-v-b90be058] { grid-column: span 1; } .col-2[data-v-b90be058] { grid-column: span 2; } .col-3[data-v-b90be058] { grid-column: span 3; } .col-4[data-v-b90be058] { grid-column: span 4; } .col-5[data-v-b90be058] { grid-column: span 5; } .col-6[data-v-b90be058] { grid-column: span 6; } .col-7[data-v-b90be058] { grid-column: span 7; } .col-8[data-v-b90be058] { grid-column: span 8; } .col-9[data-v-b90be058] { grid-column: span 9; } .col-10[data-v-b90be058] { grid-column: span 10; } .col-12[data-v-b90be058] { grid-column: span 12; } .col-13[data-v-b90be058] { grid-column: span 13; } .col-14[data-v-b90be058] { grid-column: span 14; } .col-15[data-v-b90be058] { grid-column: span 15; } .col-16[data-v-b90be058] { grid-column: span 16; } .col-18[data-v-b90be058] { grid-column: span 18; } .col-20[data-v-b90be058] { grid-column: span 20; } .col-22[data-v-b90be058] { grid-column: span 22; } .col-24[data-v-b90be058] { grid-column: span 24; } .col-26[data-v-b90be058] { grid-column: span 26; } .col-27[data-v-b90be058] { grid-column: span 27; } .col-28[data-v-b90be058] { grid-column: span 28; } .col-30[data-v-b90be058] { grid-column: span 30; } .col-36[data-v-b90be058] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-b90be058] { display: none; } .col-md-36[data-v-b90be058] { grid-column: span 36; } .col-md-28[data-v-b90be058] { grid-column: span 28; } .col-md-27[data-v-b90be058] { grid-column: span 27; } .col-md-24[data-v-b90be058] { grid-column: span 24; } .col-md-22[data-v-b90be058] { grid-column: span 22; } .col-md-20[data-v-b90be058] { grid-column: span 20; } .col-md-19[data-v-b90be058] { grid-column: span 19; } .col-md-18[data-v-b90be058] { grid-column: span 18; } .col-md-17[data-v-b90be058] { grid-column: span 17; } .col-md-16[data-v-b90be058] { grid-column: span 16; } .col-md-15[data-v-b90be058] { grid-column: span 15; } .col-md-14[data-v-b90be058] { grid-column: span 14; } .col-md-13[data-v-b90be058] { grid-column: span 13; } .col-md-12[data-v-b90be058] { grid-column: span 12; } .col-md-10[data-v-b90be058] { grid-column: span 10; } .col-md-9[data-v-b90be058] { grid-column: span 9; } .col-md-8[data-v-b90be058] { grid-column: span 8; } .col-md-6[data-v-b90be058] { grid-column: span 6; } .col-md-5[data-v-b90be058] { grid-column: span 5; } .col-md-4[data-v-b90be058] { grid-column: span 4; } .col-md-3[data-v-b90be058] { grid-column: span 3; } .col-md-2[data-v-b90be058] { grid-column: span 2; } .col-md-1[data-v-b90be058] { grid-column: span 1; } .col-md-auto[data-v-b90be058] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-b90be058] { display: none; } .col-sm-36[data-v-b90be058] { grid-column: span 36; } .col-sm-32[data-v-b90be058] { grid-column: span 32; } .col-sm-28[data-v-b90be058] { grid-column: span 28; } .col-sm-27[data-v-b90be058] { grid-column: span 27; } .col-sm-24[data-v-b90be058] { grid-column: span 24; } .col-sm-22[data-v-b90be058] { grid-column: span 22; } .col-sm-20[data-v-b90be058] { grid-column: span 20; } .col-sm-18[data-v-b90be058] { grid-column: span 18; } .col-sm-16[data-v-b90be058] { grid-column: span 16; } .col-sm-15[data-v-b90be058] { grid-column: span 15; } .col-sm-14[data-v-b90be058] { grid-column: span 14; } .col-sm-13[data-v-b90be058] { grid-column: span 12; } .col-sm-12[data-v-b90be058] { grid-column: span 12; } .col-sm-10[data-v-b90be058] { grid-column: span 10; } .col-sm-9[data-v-b90be058] { grid-column: span 8; } .col-sm-8[data-v-b90be058] { grid-column: span 8; } .col-sm-6[data-v-b90be058] { grid-column: span 6; } .col-sm-4[data-v-b90be058] { grid-column: span 4; } .col-sm-auto[data-v-b90be058] { grid-column: auto; } } .fade-enter-active[data-v-b90be058] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-b90be058] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-b90be058], .fade-leave-to[data-v-b90be058] { opacity: 0; } .custom-theme-selector[data-v-b90be058] { display: flex; flex-direction: column; gap: 16px; } .custom-theme-selector__cards[data-v-b90be058] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .custom-theme-selector__card[data-v-b90be058] { position: relative; background: var(--bg-subtle); border: 2px solid var(--border-subtle); border-radius: 12px; padding: 16px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; text-align: left; } .custom-theme-selector__card[data-v-b90be058]:hover:not(.custom-theme-selector__card--active) { border-color: var(--border-default); background: var(--bg-surface); } .custom-theme-selector__card--active[data-v-b90be058] { border-color: var(--primary-400); background: rgba(var(--primary-500-rgb), 0.1); } .custom-theme-selector__card-gradient[data-v-b90be058] { position: absolute; inset: 0; opacity: 0.15; transition: opacity 0.3s ease; } .custom-theme-selector__card:hover .custom-theme-selector__card-gradient[data-v-b90be058], .custom-theme-selector__card--active .custom-theme-selector__card-gradient[data-v-b90be058] { opacity: 0.25; } .custom-theme-selector__card-content[data-v-b90be058] { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; } .custom-theme-selector__label[data-v-b90be058] { font-size: 13px; font-weight: 600; color: var(--text-primary); } .custom-theme-selector__desc[data-v-b90be058] { font-size: 11px; color: var(--text-secondary); } .custom-theme-selector__check[data-v-b90be058] { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: var(--primary-500); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; z-index: 3; } .custom-theme-selector__picker-row[data-v-b90be058] { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .custom-theme-selector__color-input-wrapper[data-v-b90be058] { position: relative; width: 32px; height: 32px; cursor: pointer; flex-shrink: 0; } .custom-theme-selector__color-native[data-v-b90be058] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .custom-theme-selector__color-preview[data-v-b90be058] { width: 100%; height: 100%; border-radius: 6px; border: 2px solid var(--border-default); transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .custom-theme-selector__color-input-wrapper:hover .custom-theme-selector__color-preview[data-v-b90be058] { border-color: var(--primary-400); } .custom-theme-selector__hex-input[data-v-b90be058] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; padding: 6px 8px; font-family: monospace; font-size: 12px; color: var(--input-text); width: 80px; text-transform: uppercase; } .custom-theme-selector__hex-input[data-v-b90be058]:focus { outline: none; border-color: var(--primary-400); } .custom-theme-selector__quick[data-v-b90be058] { padding: 0 4px; } .custom-theme-selector__quick-colors[data-v-b90be058] { display: flex; flex-wrap: wrap; gap: 8px; } .custom-theme-selector__quick-color[data-v-b90be058] { width: 24px; height: 24px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .custom-theme-selector__quick-color[data-v-b90be058]:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .custom-theme-selector__quick-color--active[data-v-b90be058] { border-color: var(--primary-500); box-shadow: 0 0 0 2px var(--primary-400), 0 4px 10px rgba(0, 0, 0, 0.2); } .custom-theme-selector__palette-preview[data-v-b90be058] { padding: 8px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 10px; } .custom-theme-selector__palette[data-v-b90be058] { display: flex; gap: 3px; height: 24px; border-radius: 6px; overflow: hidden; } .custom-theme-selector__palette-shade[data-v-b90be058] { flex: 1; transition: transform 0.2s ease; } .custom-theme-selector__palette-shade[data-v-b90be058]:first-child { border-radius: 4px 0 0 4px; } .custom-theme-selector__palette-shade[data-v-b90be058]:last-child { border-radius: 0 4px 4px 0; } .custom-theme-selector__palette-shade[data-v-b90be058]:hover { transform: scaleY(1.2); } @media (max-width: 480px) { .custom-theme-selector__cards[data-v-b90be058] { grid-template-columns: 1fr; } .custom-theme-selector__quick-colors[data-v-b90be058] { justify-content: center; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-ee518205]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-ee518205] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-ee518205] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-ee518205]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-ee518205], .theme-mode-light[data-v-ee518205] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-ee518205], .theme-mode-dark[data-v-ee518205] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-ee518205]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-ee518205]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-ee518205] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-ee518205] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-ee518205]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-ee518205], input[disabled][data-v-ee518205] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-ee518205] { opacity: 0.9; } input[readonly][data-v-ee518205] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-ee518205] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-ee518205]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-ee518205]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-ee518205]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-ee518205] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-ee518205]:nth-child(odd), .list-card-desktop__wrapper[data-v-ee518205]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-ee518205]:nth-child(even), .list-card-desktop__wrapper[data-v-ee518205]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-ee518205]:nth-child(odd), .listCardDesktopWrapper[data-v-ee518205]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-ee518205]:nth-child(even), .listCardDesktopWrapper[data-v-ee518205]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-ee518205] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-ee518205] { cursor: pointer; } .card-layout--selectionnable[data-v-ee518205]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-ee518205] { cursor: auto; } .card-layout--drawer[data-v-ee518205] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-ee518205] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-ee518205] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-ee518205] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-ee518205] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-ee518205] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-ee518205]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-ee518205] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-ee518205] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-ee518205] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-ee518205] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-ee518205] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-ee518205] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-ee518205] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-ee518205] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-ee518205] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-ee518205] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-ee518205] { background-color: #eb1515; } .color-chip--dossiers[data-v-ee518205] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-ee518205] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-ee518205] { background-color: #00a79b; } .color-chip--virements[data-v-ee518205] { background-color: var(--secondary-400); } .color-chip--factures[data-v-ee518205] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-ee518205] { background-color: #eb1515; } .color-recherche-dossiers[data-v-ee518205] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-ee518205] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-ee518205] { background-color: #00a79b; } .color-recherche-virements[data-v-ee518205] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-ee518205] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-ee518205] { color: #00a79b; cursor: pointer; } .scrollable[data-v-ee518205] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-ee518205] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-ee518205] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-ee518205] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-ee518205] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-ee518205] { font-weight: 800; } .grid-cell--column[data-v-ee518205] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-ee518205] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-ee518205] { fill: #00a79b; } .grid-cell--disabled[data-v-ee518205] { color: #cccccc; } .grid-cell--disabled svg[data-v-ee518205] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-ee518205] { white-space: nowrap; } .grid-cell--danger svg[data-v-ee518205] { fill: #eb1515; } .grid-cell--span-1[data-v-ee518205] { grid-column: span 1; } .grid-cell--span-2[data-v-ee518205] { grid-column: span 2; } .grid-cell--span-3[data-v-ee518205] { grid-column: span 3; } .grid-cell--span-4[data-v-ee518205] { grid-column: span 4; } .grid-cell--span-5[data-v-ee518205] { grid-column: span 5; } .grid-cell--span-6[data-v-ee518205] { grid-column: span 6; } .grid-cell--span-7[data-v-ee518205] { grid-column: span 7; } .grid-cell--span-8[data-v-ee518205] { grid-column: span 8; } .grid-cell--span-9[data-v-ee518205] { grid-column: span 9; } .grid-cell--span-10[data-v-ee518205] { grid-column: span 10; } .grid-cell--span-12[data-v-ee518205] { grid-column: span 12; } .grid-cell--span-13[data-v-ee518205] { grid-column: span 13; } .grid-cell--span-14[data-v-ee518205] { grid-column: span 14; } .grid-cell--span-16[data-v-ee518205] { grid-column: span 16; } .grid-cell--span-18[data-v-ee518205] { grid-column: span 18; } .grid-cell--span-20[data-v-ee518205] { grid-column: span 20; } .grid-cell--span-32[data-v-ee518205] { grid-column: span 32; } .grid-cell--span-36[data-v-ee518205] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-ee518205] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-ee518205] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-ee518205] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-ee518205] { justify-content: center !important; } .elem--bold span[data-v-ee518205] { font-weight: 800; } .elem--column[data-v-ee518205] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-ee518205] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-ee518205] { fill: #00a79b; } .elem--clickable[data-v-ee518205]:hover { cursor: pointer; } .elem--disabled[data-v-ee518205] { color: #cccccc; } .elem--disabled svg[data-v-ee518205] { fill: #cccccc; } .elem--nowrap span[data-v-ee518205] { white-space: nowrap; } .elem--danger svg[data-v-ee518205] { fill: #eb1515; } .elem--span-1[data-v-ee518205] { grid-column: span 1; } .elem--span-2[data-v-ee518205] { grid-column: span 2; } .elem--span-3[data-v-ee518205] { grid-column: span 3; } .elem--span-4[data-v-ee518205] { grid-column: span 4; } .elem--span-5[data-v-ee518205] { grid-column: span 5; } .elem--span-6[data-v-ee518205] { grid-column: span 6; } .elem--span-7[data-v-ee518205] { grid-column: span 7; } .elem--span-8[data-v-ee518205] { grid-column: span 8; } .elem--span-9[data-v-ee518205] { grid-column: span 9; } .elem--span-10[data-v-ee518205] { grid-column: span 10; } .elem--span-12[data-v-ee518205] { grid-column: span 12; } .elem--span-13[data-v-ee518205] { grid-column: span 13; } .elem--span-14[data-v-ee518205] { grid-column: span 14; } .elem--span-16[data-v-ee518205] { grid-column: span 16; } .elem--span-18[data-v-ee518205] { grid-column: span 18; } .elem--span-20[data-v-ee518205] { grid-column: span 20; } .elem--span-32[data-v-ee518205] { grid-column: span 32; } .elem--span-36[data-v-ee518205] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-ee518205] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-ee518205] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-ee518205]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-ee518205] { display: flex; } /* flex-direction */ .flex-column[data-v-ee518205] { flex-direction: column; } .flex-row[data-v-ee518205] { flex-direction: row; } /* flex */ .flex-1[data-v-ee518205] { flex: 1 !important; } .flex-2[data-v-ee518205] { flex: 2; } .flex-3[data-v-ee518205] { flex: 3; } .flex-3[data-v-ee518205] { flex: 4; } .flex-5[data-v-ee518205] { flex: 5; } .flex-auto[data-v-ee518205] { flex: auto; } .flex-none[data-v-ee518205] { flex: none; } .flex-content[data-v-ee518205] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-ee518205] { flex-wrap: wrap; } .flex-nowrap[data-v-ee518205] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-ee518205] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-ee518205] { justify-content: flex-start; } .justify-content-end[data-v-ee518205] { justify-content: flex-end; } .justify-content-baseline[data-v-ee518205] { justify-content: baseline; } .justify-content-center[data-v-ee518205] { justify-content: center; } .justify-content-space-between[data-v-ee518205] { justify-content: space-between; } .justify-content-space-around[data-v-ee518205] { justify-content: space-around; } .justify-content-space-evenly[data-v-ee518205] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-ee518205] { align-items: flex-start; } .align-items-flex-end[data-v-ee518205] { align-items: flex-end; } .align-items-stretch[data-v-ee518205] { align-items: stretch; } .align-items-baseline[data-v-ee518205] { align-items: baseline; } .align-items-center[data-v-ee518205] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-ee518205] { align-content: flex-start; } .align-content-flex-end[data-v-ee518205] { align-content: flex-end; } .align-content-center[data-v-ee518205] { align-content: center; } .align-content-stretch[data-v-ee518205] { align-content: stretch; } .align-content-space-between[data-v-ee518205] { align-content: space-between; } .align-content-space-around[data-v-ee518205] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-ee518205] { align-self: flex-start; } .align-self-flex-end[data-v-ee518205] { align-self: flex-end; } .align-self-stretch[data-v-ee518205] { align-self: stretch; } .align-self-flex-baseline[data-v-ee518205] { align-self: baseline; } .align-self-center[data-v-ee518205] { align-self: center; } .align-self-auto[data-v-ee518205] { align-self: auto; } .flex-gap-1[data-v-ee518205] { gap: 4px; } .flex-gap-2[data-v-ee518205] { gap: 8px; } .flex-gap-3[data-v-ee518205] { gap: 12px; } .flex-gap-4[data-v-ee518205] { gap: 16px; } .flex-gap-5[data-v-ee518205] { gap: 20px; } .flex-gap-6[data-v-ee518205] { gap: 24px; } .flex-gap-7[data-v-ee518205] { gap: 28px; } .flex-gap-8[data-v-ee518205] { gap: 32px; } .flex-gap-10[data-v-ee518205] { gap: 40px; } .flex-gap-12[data-v-ee518205] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-ee518205] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-ee518205] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-ee518205] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-ee518205] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-ee518205] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-ee518205] { display: none !important; } } .col-none[data-v-ee518205] { display: none; } .col-auto[data-v-ee518205] { grid-column: auto; } .col-1[data-v-ee518205] { grid-column: span 1; } .col-2[data-v-ee518205] { grid-column: span 2; } .col-3[data-v-ee518205] { grid-column: span 3; } .col-4[data-v-ee518205] { grid-column: span 4; } .col-5[data-v-ee518205] { grid-column: span 5; } .col-6[data-v-ee518205] { grid-column: span 6; } .col-7[data-v-ee518205] { grid-column: span 7; } .col-8[data-v-ee518205] { grid-column: span 8; } .col-9[data-v-ee518205] { grid-column: span 9; } .col-10[data-v-ee518205] { grid-column: span 10; } .col-12[data-v-ee518205] { grid-column: span 12; } .col-13[data-v-ee518205] { grid-column: span 13; } .col-14[data-v-ee518205] { grid-column: span 14; } .col-15[data-v-ee518205] { grid-column: span 15; } .col-16[data-v-ee518205] { grid-column: span 16; } .col-18[data-v-ee518205] { grid-column: span 18; } .col-20[data-v-ee518205] { grid-column: span 20; } .col-22[data-v-ee518205] { grid-column: span 22; } .col-24[data-v-ee518205] { grid-column: span 24; } .col-26[data-v-ee518205] { grid-column: span 26; } .col-27[data-v-ee518205] { grid-column: span 27; } .col-28[data-v-ee518205] { grid-column: span 28; } .col-30[data-v-ee518205] { grid-column: span 30; } .col-36[data-v-ee518205] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-ee518205] { display: none; } .col-md-36[data-v-ee518205] { grid-column: span 36; } .col-md-28[data-v-ee518205] { grid-column: span 28; } .col-md-27[data-v-ee518205] { grid-column: span 27; } .col-md-24[data-v-ee518205] { grid-column: span 24; } .col-md-22[data-v-ee518205] { grid-column: span 22; } .col-md-20[data-v-ee518205] { grid-column: span 20; } .col-md-19[data-v-ee518205] { grid-column: span 19; } .col-md-18[data-v-ee518205] { grid-column: span 18; } .col-md-17[data-v-ee518205] { grid-column: span 17; } .col-md-16[data-v-ee518205] { grid-column: span 16; } .col-md-15[data-v-ee518205] { grid-column: span 15; } .col-md-14[data-v-ee518205] { grid-column: span 14; } .col-md-13[data-v-ee518205] { grid-column: span 13; } .col-md-12[data-v-ee518205] { grid-column: span 12; } .col-md-10[data-v-ee518205] { grid-column: span 10; } .col-md-9[data-v-ee518205] { grid-column: span 9; } .col-md-8[data-v-ee518205] { grid-column: span 8; } .col-md-6[data-v-ee518205] { grid-column: span 6; } .col-md-5[data-v-ee518205] { grid-column: span 5; } .col-md-4[data-v-ee518205] { grid-column: span 4; } .col-md-3[data-v-ee518205] { grid-column: span 3; } .col-md-2[data-v-ee518205] { grid-column: span 2; } .col-md-1[data-v-ee518205] { grid-column: span 1; } .col-md-auto[data-v-ee518205] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-ee518205] { display: none; } .col-sm-36[data-v-ee518205] { grid-column: span 36; } .col-sm-32[data-v-ee518205] { grid-column: span 32; } .col-sm-28[data-v-ee518205] { grid-column: span 28; } .col-sm-27[data-v-ee518205] { grid-column: span 27; } .col-sm-24[data-v-ee518205] { grid-column: span 24; } .col-sm-22[data-v-ee518205] { grid-column: span 22; } .col-sm-20[data-v-ee518205] { grid-column: span 20; } .col-sm-18[data-v-ee518205] { grid-column: span 18; } .col-sm-16[data-v-ee518205] { grid-column: span 16; } .col-sm-15[data-v-ee518205] { grid-column: span 15; } .col-sm-14[data-v-ee518205] { grid-column: span 14; } .col-sm-13[data-v-ee518205] { grid-column: span 12; } .col-sm-12[data-v-ee518205] { grid-column: span 12; } .col-sm-10[data-v-ee518205] { grid-column: span 10; } .col-sm-9[data-v-ee518205] { grid-column: span 8; } .col-sm-8[data-v-ee518205] { grid-column: span 8; } .col-sm-6[data-v-ee518205] { grid-column: span 6; } .col-sm-4[data-v-ee518205] { grid-column: span 4; } .col-sm-auto[data-v-ee518205] { grid-column: auto; } } .fade-enter-active[data-v-ee518205] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-ee518205] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-ee518205], .fade-leave-to[data-v-ee518205] { opacity: 0; } .toast[data-v-ee518205] { position: relative; width: 360px; margin-top: 10px; animation: fadeIn 0.5s ease-out; } .toast__content[data-v-ee518205] { position: relative; display: flex; align-items: center; justify-content: space-between; background: #f8f9fb; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); overflow: hidden; } .toast__close[data-v-ee518205] { position: absolute; top: 6px; right: 8px; background: transparent; border: none; color: #4d5462; font-size: 14px; cursor: pointer; transition: color 0.1s; } .toast__close[data-v-ee518205]:hover { color: #2b303a; } /* Animations */ .slide-fade-enter-active[data-v-ee518205] { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .slide-fade-leave-active[data-v-ee518205] { transition: all 0.4s ease-in-out; } .slide-fade-enter-from[data-v-ee518205], .slide-fade-leave-to[data-v-ee518205] { opacity: 0; transform: translateY(-25px); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-bd2f2272]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-bd2f2272] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-bd2f2272] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-bd2f2272]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-bd2f2272], .theme-mode-light[data-v-bd2f2272] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-bd2f2272], .theme-mode-dark[data-v-bd2f2272] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-bd2f2272]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-bd2f2272]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-bd2f2272] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-bd2f2272] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-bd2f2272]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-bd2f2272], input[disabled][data-v-bd2f2272] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-bd2f2272] { opacity: 0.9; } input[readonly][data-v-bd2f2272] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-bd2f2272] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-bd2f2272]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-bd2f2272]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-bd2f2272]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-bd2f2272] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-bd2f2272]:nth-child(odd), .list-card-desktop__wrapper[data-v-bd2f2272]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-bd2f2272]:nth-child(even), .list-card-desktop__wrapper[data-v-bd2f2272]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-bd2f2272]:nth-child(odd), .listCardDesktopWrapper[data-v-bd2f2272]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-bd2f2272]:nth-child(even), .listCardDesktopWrapper[data-v-bd2f2272]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-bd2f2272] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-bd2f2272] { cursor: pointer; } .card-layout--selectionnable[data-v-bd2f2272]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-bd2f2272] { cursor: auto; } .card-layout--drawer[data-v-bd2f2272] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-bd2f2272] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-bd2f2272] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-bd2f2272] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-bd2f2272] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-bd2f2272] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-bd2f2272]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-bd2f2272] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-bd2f2272] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-bd2f2272] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-bd2f2272] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-bd2f2272] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-bd2f2272] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-bd2f2272] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-bd2f2272] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-bd2f2272] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-bd2f2272] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-bd2f2272] { background-color: #eb1515; } .color-chip--dossiers[data-v-bd2f2272] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-bd2f2272] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-bd2f2272] { background-color: #00a79b; } .color-chip--virements[data-v-bd2f2272] { background-color: var(--secondary-400); } .color-chip--factures[data-v-bd2f2272] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-bd2f2272] { background-color: #eb1515; } .color-recherche-dossiers[data-v-bd2f2272] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-bd2f2272] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-bd2f2272] { background-color: #00a79b; } .color-recherche-virements[data-v-bd2f2272] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-bd2f2272] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-bd2f2272] { color: #00a79b; cursor: pointer; } .scrollable[data-v-bd2f2272] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-bd2f2272] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-bd2f2272] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-bd2f2272] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-bd2f2272] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-bd2f2272] { font-weight: 800; } .grid-cell--column[data-v-bd2f2272] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-bd2f2272] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-bd2f2272] { fill: #00a79b; } .grid-cell--disabled[data-v-bd2f2272] { color: #cccccc; } .grid-cell--disabled svg[data-v-bd2f2272] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-bd2f2272] { white-space: nowrap; } .grid-cell--danger svg[data-v-bd2f2272] { fill: #eb1515; } .grid-cell--span-1[data-v-bd2f2272] { grid-column: span 1; } .grid-cell--span-2[data-v-bd2f2272] { grid-column: span 2; } .grid-cell--span-3[data-v-bd2f2272] { grid-column: span 3; } .grid-cell--span-4[data-v-bd2f2272] { grid-column: span 4; } .grid-cell--span-5[data-v-bd2f2272] { grid-column: span 5; } .grid-cell--span-6[data-v-bd2f2272] { grid-column: span 6; } .grid-cell--span-7[data-v-bd2f2272] { grid-column: span 7; } .grid-cell--span-8[data-v-bd2f2272] { grid-column: span 8; } .grid-cell--span-9[data-v-bd2f2272] { grid-column: span 9; } .grid-cell--span-10[data-v-bd2f2272] { grid-column: span 10; } .grid-cell--span-12[data-v-bd2f2272] { grid-column: span 12; } .grid-cell--span-13[data-v-bd2f2272] { grid-column: span 13; } .grid-cell--span-14[data-v-bd2f2272] { grid-column: span 14; } .grid-cell--span-16[data-v-bd2f2272] { grid-column: span 16; } .grid-cell--span-18[data-v-bd2f2272] { grid-column: span 18; } .grid-cell--span-20[data-v-bd2f2272] { grid-column: span 20; } .grid-cell--span-32[data-v-bd2f2272] { grid-column: span 32; } .grid-cell--span-36[data-v-bd2f2272] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-bd2f2272] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-bd2f2272] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-bd2f2272] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-bd2f2272] { justify-content: center !important; } .elem--bold span[data-v-bd2f2272] { font-weight: 800; } .elem--column[data-v-bd2f2272] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-bd2f2272] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-bd2f2272] { fill: #00a79b; } .elem--clickable[data-v-bd2f2272]:hover { cursor: pointer; } .elem--disabled[data-v-bd2f2272] { color: #cccccc; } .elem--disabled svg[data-v-bd2f2272] { fill: #cccccc; } .elem--nowrap span[data-v-bd2f2272] { white-space: nowrap; } .elem--danger svg[data-v-bd2f2272] { fill: #eb1515; } .elem--span-1[data-v-bd2f2272] { grid-column: span 1; } .elem--span-2[data-v-bd2f2272] { grid-column: span 2; } .elem--span-3[data-v-bd2f2272] { grid-column: span 3; } .elem--span-4[data-v-bd2f2272] { grid-column: span 4; } .elem--span-5[data-v-bd2f2272] { grid-column: span 5; } .elem--span-6[data-v-bd2f2272] { grid-column: span 6; } .elem--span-7[data-v-bd2f2272] { grid-column: span 7; } .elem--span-8[data-v-bd2f2272] { grid-column: span 8; } .elem--span-9[data-v-bd2f2272] { grid-column: span 9; } .elem--span-10[data-v-bd2f2272] { grid-column: span 10; } .elem--span-12[data-v-bd2f2272] { grid-column: span 12; } .elem--span-13[data-v-bd2f2272] { grid-column: span 13; } .elem--span-14[data-v-bd2f2272] { grid-column: span 14; } .elem--span-16[data-v-bd2f2272] { grid-column: span 16; } .elem--span-18[data-v-bd2f2272] { grid-column: span 18; } .elem--span-20[data-v-bd2f2272] { grid-column: span 20; } .elem--span-32[data-v-bd2f2272] { grid-column: span 32; } .elem--span-36[data-v-bd2f2272] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-bd2f2272] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-bd2f2272] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-bd2f2272]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-bd2f2272] { display: flex; } /* flex-direction */ .flex-column[data-v-bd2f2272] { flex-direction: column; } .flex-row[data-v-bd2f2272] { flex-direction: row; } /* flex */ .flex-1[data-v-bd2f2272] { flex: 1 !important; } .flex-2[data-v-bd2f2272] { flex: 2; } .flex-3[data-v-bd2f2272] { flex: 3; } .flex-3[data-v-bd2f2272] { flex: 4; } .flex-5[data-v-bd2f2272] { flex: 5; } .flex-auto[data-v-bd2f2272] { flex: auto; } .flex-none[data-v-bd2f2272] { flex: none; } .flex-content[data-v-bd2f2272] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-bd2f2272] { flex-wrap: wrap; } .flex-nowrap[data-v-bd2f2272] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-bd2f2272] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-bd2f2272] { justify-content: flex-start; } .justify-content-end[data-v-bd2f2272] { justify-content: flex-end; } .justify-content-baseline[data-v-bd2f2272] { justify-content: baseline; } .justify-content-center[data-v-bd2f2272] { justify-content: center; } .justify-content-space-between[data-v-bd2f2272] { justify-content: space-between; } .justify-content-space-around[data-v-bd2f2272] { justify-content: space-around; } .justify-content-space-evenly[data-v-bd2f2272] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-bd2f2272] { align-items: flex-start; } .align-items-flex-end[data-v-bd2f2272] { align-items: flex-end; } .align-items-stretch[data-v-bd2f2272] { align-items: stretch; } .align-items-baseline[data-v-bd2f2272] { align-items: baseline; } .align-items-center[data-v-bd2f2272] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-bd2f2272] { align-content: flex-start; } .align-content-flex-end[data-v-bd2f2272] { align-content: flex-end; } .align-content-center[data-v-bd2f2272] { align-content: center; } .align-content-stretch[data-v-bd2f2272] { align-content: stretch; } .align-content-space-between[data-v-bd2f2272] { align-content: space-between; } .align-content-space-around[data-v-bd2f2272] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-bd2f2272] { align-self: flex-start; } .align-self-flex-end[data-v-bd2f2272] { align-self: flex-end; } .align-self-stretch[data-v-bd2f2272] { align-self: stretch; } .align-self-flex-baseline[data-v-bd2f2272] { align-self: baseline; } .align-self-center[data-v-bd2f2272] { align-self: center; } .align-self-auto[data-v-bd2f2272] { align-self: auto; } .flex-gap-1[data-v-bd2f2272] { gap: 4px; } .flex-gap-2[data-v-bd2f2272] { gap: 8px; } .flex-gap-3[data-v-bd2f2272] { gap: 12px; } .flex-gap-4[data-v-bd2f2272] { gap: 16px; } .flex-gap-5[data-v-bd2f2272] { gap: 20px; } .flex-gap-6[data-v-bd2f2272] { gap: 24px; } .flex-gap-7[data-v-bd2f2272] { gap: 28px; } .flex-gap-8[data-v-bd2f2272] { gap: 32px; } .flex-gap-10[data-v-bd2f2272] { gap: 40px; } .flex-gap-12[data-v-bd2f2272] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-bd2f2272] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-bd2f2272] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-bd2f2272] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-bd2f2272] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-bd2f2272] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-bd2f2272] { display: none !important; } } .col-none[data-v-bd2f2272] { display: none; } .col-auto[data-v-bd2f2272] { grid-column: auto; } .col-1[data-v-bd2f2272] { grid-column: span 1; } .col-2[data-v-bd2f2272] { grid-column: span 2; } .col-3[data-v-bd2f2272] { grid-column: span 3; } .col-4[data-v-bd2f2272] { grid-column: span 4; } .col-5[data-v-bd2f2272] { grid-column: span 5; } .col-6[data-v-bd2f2272] { grid-column: span 6; } .col-7[data-v-bd2f2272] { grid-column: span 7; } .col-8[data-v-bd2f2272] { grid-column: span 8; } .col-9[data-v-bd2f2272] { grid-column: span 9; } .col-10[data-v-bd2f2272] { grid-column: span 10; } .col-12[data-v-bd2f2272] { grid-column: span 12; } .col-13[data-v-bd2f2272] { grid-column: span 13; } .col-14[data-v-bd2f2272] { grid-column: span 14; } .col-15[data-v-bd2f2272] { grid-column: span 15; } .col-16[data-v-bd2f2272] { grid-column: span 16; } .col-18[data-v-bd2f2272] { grid-column: span 18; } .col-20[data-v-bd2f2272] { grid-column: span 20; } .col-22[data-v-bd2f2272] { grid-column: span 22; } .col-24[data-v-bd2f2272] { grid-column: span 24; } .col-26[data-v-bd2f2272] { grid-column: span 26; } .col-27[data-v-bd2f2272] { grid-column: span 27; } .col-28[data-v-bd2f2272] { grid-column: span 28; } .col-30[data-v-bd2f2272] { grid-column: span 30; } .col-36[data-v-bd2f2272] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-bd2f2272] { display: none; } .col-md-36[data-v-bd2f2272] { grid-column: span 36; } .col-md-28[data-v-bd2f2272] { grid-column: span 28; } .col-md-27[data-v-bd2f2272] { grid-column: span 27; } .col-md-24[data-v-bd2f2272] { grid-column: span 24; } .col-md-22[data-v-bd2f2272] { grid-column: span 22; } .col-md-20[data-v-bd2f2272] { grid-column: span 20; } .col-md-19[data-v-bd2f2272] { grid-column: span 19; } .col-md-18[data-v-bd2f2272] { grid-column: span 18; } .col-md-17[data-v-bd2f2272] { grid-column: span 17; } .col-md-16[data-v-bd2f2272] { grid-column: span 16; } .col-md-15[data-v-bd2f2272] { grid-column: span 15; } .col-md-14[data-v-bd2f2272] { grid-column: span 14; } .col-md-13[data-v-bd2f2272] { grid-column: span 13; } .col-md-12[data-v-bd2f2272] { grid-column: span 12; } .col-md-10[data-v-bd2f2272] { grid-column: span 10; } .col-md-9[data-v-bd2f2272] { grid-column: span 9; } .col-md-8[data-v-bd2f2272] { grid-column: span 8; } .col-md-6[data-v-bd2f2272] { grid-column: span 6; } .col-md-5[data-v-bd2f2272] { grid-column: span 5; } .col-md-4[data-v-bd2f2272] { grid-column: span 4; } .col-md-3[data-v-bd2f2272] { grid-column: span 3; } .col-md-2[data-v-bd2f2272] { grid-column: span 2; } .col-md-1[data-v-bd2f2272] { grid-column: span 1; } .col-md-auto[data-v-bd2f2272] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-bd2f2272] { display: none; } .col-sm-36[data-v-bd2f2272] { grid-column: span 36; } .col-sm-32[data-v-bd2f2272] { grid-column: span 32; } .col-sm-28[data-v-bd2f2272] { grid-column: span 28; } .col-sm-27[data-v-bd2f2272] { grid-column: span 27; } .col-sm-24[data-v-bd2f2272] { grid-column: span 24; } .col-sm-22[data-v-bd2f2272] { grid-column: span 22; } .col-sm-20[data-v-bd2f2272] { grid-column: span 20; } .col-sm-18[data-v-bd2f2272] { grid-column: span 18; } .col-sm-16[data-v-bd2f2272] { grid-column: span 16; } .col-sm-15[data-v-bd2f2272] { grid-column: span 15; } .col-sm-14[data-v-bd2f2272] { grid-column: span 14; } .col-sm-13[data-v-bd2f2272] { grid-column: span 12; } .col-sm-12[data-v-bd2f2272] { grid-column: span 12; } .col-sm-10[data-v-bd2f2272] { grid-column: span 10; } .col-sm-9[data-v-bd2f2272] { grid-column: span 8; } .col-sm-8[data-v-bd2f2272] { grid-column: span 8; } .col-sm-6[data-v-bd2f2272] { grid-column: span 6; } .col-sm-4[data-v-bd2f2272] { grid-column: span 4; } .col-sm-auto[data-v-bd2f2272] { grid-column: auto; } } .fade-enter-active[data-v-bd2f2272] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-bd2f2272] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-bd2f2272], .fade-leave-to[data-v-bd2f2272] { opacity: 0; } .compact-toast[data-v-bd2f2272] { display: flex; align-items: center; background: color-mix(in srgb, #2b303a 95%, transparent); color: white; border-radius: 8px; padding: 8px 10px; width: 220px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } .compact-toast .toast-img[data-v-bd2f2272] { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; margin-right: 8px; } .compact-toast .toast-info[data-v-bd2f2272] { flex: 1; display: flex; flex-direction: column; gap: 2px; } .compact-toast .toast-close[data-v-bd2f2272] { background: transparent; border: none; color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: 12px; transition: color 0.2s; } .compact-toast .toast-close[data-v-bd2f2272]:hover { color: white; } .compact-toast .toast-discount[data-v-bd2f2272] { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .compact-toast .toast-discount__badge[data-v-bd2f2272] { padding: 2px 6px; background: linear-gradient(135deg, #2cbb66 0%, #1f9a50 100%); border-radius: 4px; font-size: 10px; font-weight: 700; color: white; } .compact-toast .toast-discount__savings[data-v-bd2f2272] { font-size: 10px; color: #3ccf77; font-weight: 600; } /* 💫 Animation plus douce */ .compact-toast-fade-enter-active[data-v-bd2f2272], .compact-toast-fade-leave-active[data-v-bd2f2272] { transition: all 0.35s ease; } .compact-toast-fade-enter-from[data-v-bd2f2272], .compact-toast-fade-leave-to[data-v-bd2f2272] { opacity: 0; transform: translateY(-10px); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-ee4407d2]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-ee4407d2] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-ee4407d2] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-ee4407d2]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-ee4407d2], .theme-mode-light[data-v-ee4407d2] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-ee4407d2], .theme-mode-dark[data-v-ee4407d2] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-ee4407d2]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-ee4407d2]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-ee4407d2] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-ee4407d2] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-ee4407d2]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-ee4407d2], input[disabled][data-v-ee4407d2] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-ee4407d2] { opacity: 0.9; } input[readonly][data-v-ee4407d2] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-ee4407d2] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-ee4407d2]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-ee4407d2]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-ee4407d2]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-ee4407d2] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-ee4407d2]:nth-child(odd), .list-card-desktop__wrapper[data-v-ee4407d2]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-ee4407d2]:nth-child(even), .list-card-desktop__wrapper[data-v-ee4407d2]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-ee4407d2]:nth-child(odd), .listCardDesktopWrapper[data-v-ee4407d2]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-ee4407d2]:nth-child(even), .listCardDesktopWrapper[data-v-ee4407d2]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-ee4407d2] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-ee4407d2] { cursor: pointer; } .card-layout--selectionnable[data-v-ee4407d2]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-ee4407d2] { cursor: auto; } .card-layout--drawer[data-v-ee4407d2] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-ee4407d2] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-ee4407d2] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-ee4407d2] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-ee4407d2] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-ee4407d2] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-ee4407d2]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-ee4407d2] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-ee4407d2] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-ee4407d2] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-ee4407d2] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-ee4407d2] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-ee4407d2] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-ee4407d2] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-ee4407d2] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-ee4407d2] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-ee4407d2] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-ee4407d2] { background-color: #eb1515; } .color-chip--dossiers[data-v-ee4407d2] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-ee4407d2] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-ee4407d2] { background-color: #00a79b; } .color-chip--virements[data-v-ee4407d2] { background-color: var(--secondary-400); } .color-chip--factures[data-v-ee4407d2] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-ee4407d2] { background-color: #eb1515; } .color-recherche-dossiers[data-v-ee4407d2] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-ee4407d2] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-ee4407d2] { background-color: #00a79b; } .color-recherche-virements[data-v-ee4407d2] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-ee4407d2] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-ee4407d2] { color: #00a79b; cursor: pointer; } .scrollable[data-v-ee4407d2] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-ee4407d2] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-ee4407d2] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-ee4407d2] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-ee4407d2] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-ee4407d2] { font-weight: 800; } .grid-cell--column[data-v-ee4407d2] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-ee4407d2] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-ee4407d2] { fill: #00a79b; } .grid-cell--disabled[data-v-ee4407d2] { color: #cccccc; } .grid-cell--disabled svg[data-v-ee4407d2] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-ee4407d2] { white-space: nowrap; } .grid-cell--danger svg[data-v-ee4407d2] { fill: #eb1515; } .grid-cell--span-1[data-v-ee4407d2] { grid-column: span 1; } .grid-cell--span-2[data-v-ee4407d2] { grid-column: span 2; } .grid-cell--span-3[data-v-ee4407d2] { grid-column: span 3; } .grid-cell--span-4[data-v-ee4407d2] { grid-column: span 4; } .grid-cell--span-5[data-v-ee4407d2] { grid-column: span 5; } .grid-cell--span-6[data-v-ee4407d2] { grid-column: span 6; } .grid-cell--span-7[data-v-ee4407d2] { grid-column: span 7; } .grid-cell--span-8[data-v-ee4407d2] { grid-column: span 8; } .grid-cell--span-9[data-v-ee4407d2] { grid-column: span 9; } .grid-cell--span-10[data-v-ee4407d2] { grid-column: span 10; } .grid-cell--span-12[data-v-ee4407d2] { grid-column: span 12; } .grid-cell--span-13[data-v-ee4407d2] { grid-column: span 13; } .grid-cell--span-14[data-v-ee4407d2] { grid-column: span 14; } .grid-cell--span-16[data-v-ee4407d2] { grid-column: span 16; } .grid-cell--span-18[data-v-ee4407d2] { grid-column: span 18; } .grid-cell--span-20[data-v-ee4407d2] { grid-column: span 20; } .grid-cell--span-32[data-v-ee4407d2] { grid-column: span 32; } .grid-cell--span-36[data-v-ee4407d2] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-ee4407d2] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-ee4407d2] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-ee4407d2] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-ee4407d2] { justify-content: center !important; } .elem--bold span[data-v-ee4407d2] { font-weight: 800; } .elem--column[data-v-ee4407d2] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-ee4407d2] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-ee4407d2] { fill: #00a79b; } .elem--clickable[data-v-ee4407d2]:hover { cursor: pointer; } .elem--disabled[data-v-ee4407d2] { color: #cccccc; } .elem--disabled svg[data-v-ee4407d2] { fill: #cccccc; } .elem--nowrap span[data-v-ee4407d2] { white-space: nowrap; } .elem--danger svg[data-v-ee4407d2] { fill: #eb1515; } .elem--span-1[data-v-ee4407d2] { grid-column: span 1; } .elem--span-2[data-v-ee4407d2] { grid-column: span 2; } .elem--span-3[data-v-ee4407d2] { grid-column: span 3; } .elem--span-4[data-v-ee4407d2] { grid-column: span 4; } .elem--span-5[data-v-ee4407d2] { grid-column: span 5; } .elem--span-6[data-v-ee4407d2] { grid-column: span 6; } .elem--span-7[data-v-ee4407d2] { grid-column: span 7; } .elem--span-8[data-v-ee4407d2] { grid-column: span 8; } .elem--span-9[data-v-ee4407d2] { grid-column: span 9; } .elem--span-10[data-v-ee4407d2] { grid-column: span 10; } .elem--span-12[data-v-ee4407d2] { grid-column: span 12; } .elem--span-13[data-v-ee4407d2] { grid-column: span 13; } .elem--span-14[data-v-ee4407d2] { grid-column: span 14; } .elem--span-16[data-v-ee4407d2] { grid-column: span 16; } .elem--span-18[data-v-ee4407d2] { grid-column: span 18; } .elem--span-20[data-v-ee4407d2] { grid-column: span 20; } .elem--span-32[data-v-ee4407d2] { grid-column: span 32; } .elem--span-36[data-v-ee4407d2] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-ee4407d2] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-ee4407d2] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-ee4407d2]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-ee4407d2] { display: flex; } /* flex-direction */ .flex-column[data-v-ee4407d2] { flex-direction: column; } .flex-row[data-v-ee4407d2] { flex-direction: row; } /* flex */ .flex-1[data-v-ee4407d2] { flex: 1 !important; } .flex-2[data-v-ee4407d2] { flex: 2; } .flex-3[data-v-ee4407d2] { flex: 3; } .flex-3[data-v-ee4407d2] { flex: 4; } .flex-5[data-v-ee4407d2] { flex: 5; } .flex-auto[data-v-ee4407d2] { flex: auto; } .flex-none[data-v-ee4407d2] { flex: none; } .flex-content[data-v-ee4407d2] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-ee4407d2] { flex-wrap: wrap; } .flex-nowrap[data-v-ee4407d2] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-ee4407d2] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-ee4407d2] { justify-content: flex-start; } .justify-content-end[data-v-ee4407d2] { justify-content: flex-end; } .justify-content-baseline[data-v-ee4407d2] { justify-content: baseline; } .justify-content-center[data-v-ee4407d2] { justify-content: center; } .justify-content-space-between[data-v-ee4407d2] { justify-content: space-between; } .justify-content-space-around[data-v-ee4407d2] { justify-content: space-around; } .justify-content-space-evenly[data-v-ee4407d2] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-ee4407d2] { align-items: flex-start; } .align-items-flex-end[data-v-ee4407d2] { align-items: flex-end; } .align-items-stretch[data-v-ee4407d2] { align-items: stretch; } .align-items-baseline[data-v-ee4407d2] { align-items: baseline; } .align-items-center[data-v-ee4407d2] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-ee4407d2] { align-content: flex-start; } .align-content-flex-end[data-v-ee4407d2] { align-content: flex-end; } .align-content-center[data-v-ee4407d2] { align-content: center; } .align-content-stretch[data-v-ee4407d2] { align-content: stretch; } .align-content-space-between[data-v-ee4407d2] { align-content: space-between; } .align-content-space-around[data-v-ee4407d2] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-ee4407d2] { align-self: flex-start; } .align-self-flex-end[data-v-ee4407d2] { align-self: flex-end; } .align-self-stretch[data-v-ee4407d2] { align-self: stretch; } .align-self-flex-baseline[data-v-ee4407d2] { align-self: baseline; } .align-self-center[data-v-ee4407d2] { align-self: center; } .align-self-auto[data-v-ee4407d2] { align-self: auto; } .flex-gap-1[data-v-ee4407d2] { gap: 4px; } .flex-gap-2[data-v-ee4407d2] { gap: 8px; } .flex-gap-3[data-v-ee4407d2] { gap: 12px; } .flex-gap-4[data-v-ee4407d2] { gap: 16px; } .flex-gap-5[data-v-ee4407d2] { gap: 20px; } .flex-gap-6[data-v-ee4407d2] { gap: 24px; } .flex-gap-7[data-v-ee4407d2] { gap: 28px; } .flex-gap-8[data-v-ee4407d2] { gap: 32px; } .flex-gap-10[data-v-ee4407d2] { gap: 40px; } .flex-gap-12[data-v-ee4407d2] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-ee4407d2] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-ee4407d2] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-ee4407d2] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-ee4407d2] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-ee4407d2] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-ee4407d2] { display: none !important; } } .col-none[data-v-ee4407d2] { display: none; } .col-auto[data-v-ee4407d2] { grid-column: auto; } .col-1[data-v-ee4407d2] { grid-column: span 1; } .col-2[data-v-ee4407d2] { grid-column: span 2; } .col-3[data-v-ee4407d2] { grid-column: span 3; } .col-4[data-v-ee4407d2] { grid-column: span 4; } .col-5[data-v-ee4407d2] { grid-column: span 5; } .col-6[data-v-ee4407d2] { grid-column: span 6; } .col-7[data-v-ee4407d2] { grid-column: span 7; } .col-8[data-v-ee4407d2] { grid-column: span 8; } .col-9[data-v-ee4407d2] { grid-column: span 9; } .col-10[data-v-ee4407d2] { grid-column: span 10; } .col-12[data-v-ee4407d2] { grid-column: span 12; } .col-13[data-v-ee4407d2] { grid-column: span 13; } .col-14[data-v-ee4407d2] { grid-column: span 14; } .col-15[data-v-ee4407d2] { grid-column: span 15; } .col-16[data-v-ee4407d2] { grid-column: span 16; } .col-18[data-v-ee4407d2] { grid-column: span 18; } .col-20[data-v-ee4407d2] { grid-column: span 20; } .col-22[data-v-ee4407d2] { grid-column: span 22; } .col-24[data-v-ee4407d2] { grid-column: span 24; } .col-26[data-v-ee4407d2] { grid-column: span 26; } .col-27[data-v-ee4407d2] { grid-column: span 27; } .col-28[data-v-ee4407d2] { grid-column: span 28; } .col-30[data-v-ee4407d2] { grid-column: span 30; } .col-36[data-v-ee4407d2] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-ee4407d2] { display: none; } .col-md-36[data-v-ee4407d2] { grid-column: span 36; } .col-md-28[data-v-ee4407d2] { grid-column: span 28; } .col-md-27[data-v-ee4407d2] { grid-column: span 27; } .col-md-24[data-v-ee4407d2] { grid-column: span 24; } .col-md-22[data-v-ee4407d2] { grid-column: span 22; } .col-md-20[data-v-ee4407d2] { grid-column: span 20; } .col-md-19[data-v-ee4407d2] { grid-column: span 19; } .col-md-18[data-v-ee4407d2] { grid-column: span 18; } .col-md-17[data-v-ee4407d2] { grid-column: span 17; } .col-md-16[data-v-ee4407d2] { grid-column: span 16; } .col-md-15[data-v-ee4407d2] { grid-column: span 15; } .col-md-14[data-v-ee4407d2] { grid-column: span 14; } .col-md-13[data-v-ee4407d2] { grid-column: span 13; } .col-md-12[data-v-ee4407d2] { grid-column: span 12; } .col-md-10[data-v-ee4407d2] { grid-column: span 10; } .col-md-9[data-v-ee4407d2] { grid-column: span 9; } .col-md-8[data-v-ee4407d2] { grid-column: span 8; } .col-md-6[data-v-ee4407d2] { grid-column: span 6; } .col-md-5[data-v-ee4407d2] { grid-column: span 5; } .col-md-4[data-v-ee4407d2] { grid-column: span 4; } .col-md-3[data-v-ee4407d2] { grid-column: span 3; } .col-md-2[data-v-ee4407d2] { grid-column: span 2; } .col-md-1[data-v-ee4407d2] { grid-column: span 1; } .col-md-auto[data-v-ee4407d2] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-ee4407d2] { display: none; } .col-sm-36[data-v-ee4407d2] { grid-column: span 36; } .col-sm-32[data-v-ee4407d2] { grid-column: span 32; } .col-sm-28[data-v-ee4407d2] { grid-column: span 28; } .col-sm-27[data-v-ee4407d2] { grid-column: span 27; } .col-sm-24[data-v-ee4407d2] { grid-column: span 24; } .col-sm-22[data-v-ee4407d2] { grid-column: span 22; } .col-sm-20[data-v-ee4407d2] { grid-column: span 20; } .col-sm-18[data-v-ee4407d2] { grid-column: span 18; } .col-sm-16[data-v-ee4407d2] { grid-column: span 16; } .col-sm-15[data-v-ee4407d2] { grid-column: span 15; } .col-sm-14[data-v-ee4407d2] { grid-column: span 14; } .col-sm-13[data-v-ee4407d2] { grid-column: span 12; } .col-sm-12[data-v-ee4407d2] { grid-column: span 12; } .col-sm-10[data-v-ee4407d2] { grid-column: span 10; } .col-sm-9[data-v-ee4407d2] { grid-column: span 8; } .col-sm-8[data-v-ee4407d2] { grid-column: span 8; } .col-sm-6[data-v-ee4407d2] { grid-column: span 6; } .col-sm-4[data-v-ee4407d2] { grid-column: span 4; } .col-sm-auto[data-v-ee4407d2] { grid-column: auto; } } .fade-enter-active[data-v-ee4407d2] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-ee4407d2] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-ee4407d2], .fade-leave-to[data-v-ee4407d2] { opacity: 0; } .compact-toast[data-v-ee4407d2] { display: flex; align-items: center; background: color-mix(in srgb, #2b303a 95%, transparent); color: white; border-radius: 8px; padding: 8px 10px; width: 220px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } .compact-toast .toast-img[data-v-ee4407d2] { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; margin-right: 8px; } .compact-toast .toast-info[data-v-ee4407d2] { flex: 1; display: flex; flex-direction: column; gap: 2px; } .compact-toast .toast-close[data-v-ee4407d2] { background: transparent; border: none; color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: 12px; transition: color 0.2s; } .compact-toast .toast-close[data-v-ee4407d2]:hover { color: white; } .compact-toast .toast-discount-badge[data-v-ee4407d2] { display: inline-block; margin-top: 2px; padding: 2px 5px; background: linear-gradient(135deg, #2cbb66 0%, #1f9a50 100%); border-radius: 3px; font-size: 9px; font-weight: 700; color: white; } /* 💫 Animation plus douce */ .compact-toast-fade-enter-active[data-v-ee4407d2], .compact-toast-fade-leave-active[data-v-ee4407d2] { transition: all 0.35s ease; } .compact-toast-fade-enter-from[data-v-ee4407d2], .compact-toast-fade-leave-to[data-v-ee4407d2] { opacity: 0; transform: translateY(-10px); } html body[data-v-f6137838] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-f6137838] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-f6137838]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-f6137838], input[disabled][data-v-f6137838] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-f6137838] { opacity: 0.9; } input[readonly][data-v-f6137838] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-f6137838] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-f6137838]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-f6137838]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-f6137838]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-f6137838] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-f6137838]:nth-child(odd), .list-card-desktop__wrapper[data-v-f6137838]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-f6137838]:nth-child(even), .list-card-desktop__wrapper[data-v-f6137838]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-f6137838]:nth-child(odd), .listCardDesktopWrapper[data-v-f6137838]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-f6137838]:nth-child(even), .listCardDesktopWrapper[data-v-f6137838]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-f6137838] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-f6137838] { cursor: pointer; } .card-layout--selectionnable[data-v-f6137838]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-f6137838] { cursor: auto; } .card-layout--drawer[data-v-f6137838] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-f6137838] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-f6137838] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-f6137838] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-f6137838] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-f6137838] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-f6137838]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-f6137838] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-f6137838] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-f6137838] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-f6137838] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-f6137838] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-f6137838] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-f6137838] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-f6137838] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-f6137838] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-f6137838] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-f6137838] { background-color: #eb1515; } .color-chip--dossiers[data-v-f6137838] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-f6137838] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-f6137838] { background-color: #00a79b; } .color-chip--virements[data-v-f6137838] { background-color: var(--secondary-400); } .color-chip--factures[data-v-f6137838] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-f6137838] { background-color: #eb1515; } .color-recherche-dossiers[data-v-f6137838] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-f6137838] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-f6137838] { background-color: #00a79b; } .color-recherche-virements[data-v-f6137838] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-f6137838] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-f6137838] { color: #00a79b; cursor: pointer; } .scrollable[data-v-f6137838] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-f6137838] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-f6137838] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-f6137838] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-f6137838] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-f6137838] { font-weight: 800; } .grid-cell--column[data-v-f6137838] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-f6137838] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-f6137838] { fill: #00a79b; } .grid-cell--disabled[data-v-f6137838] { color: #cccccc; } .grid-cell--disabled svg[data-v-f6137838] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-f6137838] { white-space: nowrap; } .grid-cell--danger svg[data-v-f6137838] { fill: #eb1515; } .grid-cell--span-1[data-v-f6137838] { grid-column: span 1; } .grid-cell--span-2[data-v-f6137838] { grid-column: span 2; } .grid-cell--span-3[data-v-f6137838] { grid-column: span 3; } .grid-cell--span-4[data-v-f6137838] { grid-column: span 4; } .grid-cell--span-5[data-v-f6137838] { grid-column: span 5; } .grid-cell--span-6[data-v-f6137838] { grid-column: span 6; } .grid-cell--span-7[data-v-f6137838] { grid-column: span 7; } .grid-cell--span-8[data-v-f6137838] { grid-column: span 8; } .grid-cell--span-9[data-v-f6137838] { grid-column: span 9; } .grid-cell--span-10[data-v-f6137838] { grid-column: span 10; } .grid-cell--span-12[data-v-f6137838] { grid-column: span 12; } .grid-cell--span-13[data-v-f6137838] { grid-column: span 13; } .grid-cell--span-14[data-v-f6137838] { grid-column: span 14; } .grid-cell--span-16[data-v-f6137838] { grid-column: span 16; } .grid-cell--span-18[data-v-f6137838] { grid-column: span 18; } .grid-cell--span-20[data-v-f6137838] { grid-column: span 20; } .grid-cell--span-32[data-v-f6137838] { grid-column: span 32; } .grid-cell--span-36[data-v-f6137838] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-f6137838] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-f6137838] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-f6137838] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-f6137838] { justify-content: center !important; } .elem--bold span[data-v-f6137838] { font-weight: 800; } .elem--column[data-v-f6137838] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-f6137838] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-f6137838] { fill: #00a79b; } .elem--clickable[data-v-f6137838]:hover { cursor: pointer; } .elem--disabled[data-v-f6137838] { color: #cccccc; } .elem--disabled svg[data-v-f6137838] { fill: #cccccc; } .elem--nowrap span[data-v-f6137838] { white-space: nowrap; } .elem--danger svg[data-v-f6137838] { fill: #eb1515; } .elem--span-1[data-v-f6137838] { grid-column: span 1; } .elem--span-2[data-v-f6137838] { grid-column: span 2; } .elem--span-3[data-v-f6137838] { grid-column: span 3; } .elem--span-4[data-v-f6137838] { grid-column: span 4; } .elem--span-5[data-v-f6137838] { grid-column: span 5; } .elem--span-6[data-v-f6137838] { grid-column: span 6; } .elem--span-7[data-v-f6137838] { grid-column: span 7; } .elem--span-8[data-v-f6137838] { grid-column: span 8; } .elem--span-9[data-v-f6137838] { grid-column: span 9; } .elem--span-10[data-v-f6137838] { grid-column: span 10; } .elem--span-12[data-v-f6137838] { grid-column: span 12; } .elem--span-13[data-v-f6137838] { grid-column: span 13; } .elem--span-14[data-v-f6137838] { grid-column: span 14; } .elem--span-16[data-v-f6137838] { grid-column: span 16; } .elem--span-18[data-v-f6137838] { grid-column: span 18; } .elem--span-20[data-v-f6137838] { grid-column: span 20; } .elem--span-32[data-v-f6137838] { grid-column: span 32; } .elem--span-36[data-v-f6137838] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-f6137838] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-f6137838] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-f6137838]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-f6137838] { display: flex; } /* flex-direction */ .flex-column[data-v-f6137838] { flex-direction: column; } .flex-row[data-v-f6137838] { flex-direction: row; } /* flex */ .flex-1[data-v-f6137838] { flex: 1 !important; } .flex-2[data-v-f6137838] { flex: 2; } .flex-3[data-v-f6137838] { flex: 3; } .flex-3[data-v-f6137838] { flex: 4; } .flex-5[data-v-f6137838] { flex: 5; } .flex-auto[data-v-f6137838] { flex: auto; } .flex-none[data-v-f6137838] { flex: none; } .flex-content[data-v-f6137838] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-f6137838] { flex-wrap: wrap; } .flex-nowrap[data-v-f6137838] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-f6137838] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-f6137838] { justify-content: flex-start; } .justify-content-end[data-v-f6137838] { justify-content: flex-end; } .justify-content-baseline[data-v-f6137838] { justify-content: baseline; } .justify-content-center[data-v-f6137838] { justify-content: center; } .justify-content-space-between[data-v-f6137838] { justify-content: space-between; } .justify-content-space-around[data-v-f6137838] { justify-content: space-around; } .justify-content-space-evenly[data-v-f6137838] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-f6137838] { align-items: flex-start; } .align-items-flex-end[data-v-f6137838] { align-items: flex-end; } .align-items-stretch[data-v-f6137838] { align-items: stretch; } .align-items-baseline[data-v-f6137838] { align-items: baseline; } .align-items-center[data-v-f6137838] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-f6137838] { align-content: flex-start; } .align-content-flex-end[data-v-f6137838] { align-content: flex-end; } .align-content-center[data-v-f6137838] { align-content: center; } .align-content-stretch[data-v-f6137838] { align-content: stretch; } .align-content-space-between[data-v-f6137838] { align-content: space-between; } .align-content-space-around[data-v-f6137838] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-f6137838] { align-self: flex-start; } .align-self-flex-end[data-v-f6137838] { align-self: flex-end; } .align-self-stretch[data-v-f6137838] { align-self: stretch; } .align-self-flex-baseline[data-v-f6137838] { align-self: baseline; } .align-self-center[data-v-f6137838] { align-self: center; } .align-self-auto[data-v-f6137838] { align-self: auto; } .flex-gap-1[data-v-f6137838] { gap: 4px; } .flex-gap-2[data-v-f6137838] { gap: 8px; } .flex-gap-3[data-v-f6137838] { gap: 12px; } .flex-gap-4[data-v-f6137838] { gap: 16px; } .flex-gap-5[data-v-f6137838] { gap: 20px; } .flex-gap-6[data-v-f6137838] { gap: 24px; } .flex-gap-7[data-v-f6137838] { gap: 28px; } .flex-gap-8[data-v-f6137838] { gap: 32px; } .flex-gap-10[data-v-f6137838] { gap: 40px; } .flex-gap-12[data-v-f6137838] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-f6137838] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-f6137838] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-f6137838] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-f6137838] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-f6137838] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-f6137838] { display: none !important; } } .col-none[data-v-f6137838] { display: none; } .col-auto[data-v-f6137838] { grid-column: auto; } .col-1[data-v-f6137838] { grid-column: span 1; } .col-2[data-v-f6137838] { grid-column: span 2; } .col-3[data-v-f6137838] { grid-column: span 3; } .col-4[data-v-f6137838] { grid-column: span 4; } .col-5[data-v-f6137838] { grid-column: span 5; } .col-6[data-v-f6137838] { grid-column: span 6; } .col-7[data-v-f6137838] { grid-column: span 7; } .col-8[data-v-f6137838] { grid-column: span 8; } .col-9[data-v-f6137838] { grid-column: span 9; } .col-10[data-v-f6137838] { grid-column: span 10; } .col-12[data-v-f6137838] { grid-column: span 12; } .col-13[data-v-f6137838] { grid-column: span 13; } .col-14[data-v-f6137838] { grid-column: span 14; } .col-15[data-v-f6137838] { grid-column: span 15; } .col-16[data-v-f6137838] { grid-column: span 16; } .col-18[data-v-f6137838] { grid-column: span 18; } .col-20[data-v-f6137838] { grid-column: span 20; } .col-22[data-v-f6137838] { grid-column: span 22; } .col-24[data-v-f6137838] { grid-column: span 24; } .col-26[data-v-f6137838] { grid-column: span 26; } .col-27[data-v-f6137838] { grid-column: span 27; } .col-28[data-v-f6137838] { grid-column: span 28; } .col-30[data-v-f6137838] { grid-column: span 30; } .col-36[data-v-f6137838] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-f6137838] { display: none; } .col-md-36[data-v-f6137838] { grid-column: span 36; } .col-md-28[data-v-f6137838] { grid-column: span 28; } .col-md-27[data-v-f6137838] { grid-column: span 27; } .col-md-24[data-v-f6137838] { grid-column: span 24; } .col-md-22[data-v-f6137838] { grid-column: span 22; } .col-md-20[data-v-f6137838] { grid-column: span 20; } .col-md-19[data-v-f6137838] { grid-column: span 19; } .col-md-18[data-v-f6137838] { grid-column: span 18; } .col-md-17[data-v-f6137838] { grid-column: span 17; } .col-md-16[data-v-f6137838] { grid-column: span 16; } .col-md-15[data-v-f6137838] { grid-column: span 15; } .col-md-14[data-v-f6137838] { grid-column: span 14; } .col-md-13[data-v-f6137838] { grid-column: span 13; } .col-md-12[data-v-f6137838] { grid-column: span 12; } .col-md-10[data-v-f6137838] { grid-column: span 10; } .col-md-9[data-v-f6137838] { grid-column: span 9; } .col-md-8[data-v-f6137838] { grid-column: span 8; } .col-md-6[data-v-f6137838] { grid-column: span 6; } .col-md-5[data-v-f6137838] { grid-column: span 5; } .col-md-4[data-v-f6137838] { grid-column: span 4; } .col-md-3[data-v-f6137838] { grid-column: span 3; } .col-md-2[data-v-f6137838] { grid-column: span 2; } .col-md-1[data-v-f6137838] { grid-column: span 1; } .col-md-auto[data-v-f6137838] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-f6137838] { display: none; } .col-sm-36[data-v-f6137838] { grid-column: span 36; } .col-sm-32[data-v-f6137838] { grid-column: span 32; } .col-sm-28[data-v-f6137838] { grid-column: span 28; } .col-sm-27[data-v-f6137838] { grid-column: span 27; } .col-sm-24[data-v-f6137838] { grid-column: span 24; } .col-sm-22[data-v-f6137838] { grid-column: span 22; } .col-sm-20[data-v-f6137838] { grid-column: span 20; } .col-sm-18[data-v-f6137838] { grid-column: span 18; } .col-sm-16[data-v-f6137838] { grid-column: span 16; } .col-sm-15[data-v-f6137838] { grid-column: span 15; } .col-sm-14[data-v-f6137838] { grid-column: span 14; } .col-sm-13[data-v-f6137838] { grid-column: span 12; } .col-sm-12[data-v-f6137838] { grid-column: span 12; } .col-sm-10[data-v-f6137838] { grid-column: span 10; } .col-sm-9[data-v-f6137838] { grid-column: span 8; } .col-sm-8[data-v-f6137838] { grid-column: span 8; } .col-sm-6[data-v-f6137838] { grid-column: span 6; } .col-sm-4[data-v-f6137838] { grid-column: span 4; } .col-sm-auto[data-v-f6137838] { grid-column: auto; } } .fade-enter-active[data-v-f6137838] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-f6137838] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-f6137838], .fade-leave-to[data-v-f6137838] { opacity: 0; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-f6137838]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-f6137838] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-f6137838] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-f6137838]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-f6137838], .theme-mode-light[data-v-f6137838] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-f6137838], .theme-mode-dark[data-v-f6137838] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-f6137838]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-f6137838]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ .bottom-sheet-overlay[data-v-f6137838] { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; } .bottom-sheet[data-v-f6137838] { position: relative; width: 100%; max-height: 85vh; background: var(--surface-1); border: 1px solid var(--border-default); border-bottom: none; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-sheet__handle[data-v-f6137838] { display: flex; justify-content: center; padding: 12px 0 8px; cursor: grab; } .bottom-sheet__handle[data-v-f6137838]:active { cursor: grabbing; } .bottom-sheet__handle-bar[data-v-f6137838] { width: 36px; height: 4px; background: var(--border-default); border-radius: 2px; transition: background 0.2s ease; } .bottom-sheet__handle-bar[data-v-f6137838]:hover { background: var(--text-muted); } .bottom-sheet__header[data-v-f6137838] { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 16px; border-bottom: 1px solid var(--border-default); } .bottom-sheet__title[data-v-f6137838] { font-family: 'Instrument Sans', -apple-system, sans-serif; font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; } .bottom-sheet__close[data-v-f6137838] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--bg-subtle); border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; } .bottom-sheet__close[data-v-f6137838]:hover { background: var(--bg-elevated); color: var(--text-primary); } .bottom-sheet__close[data-v-f6137838]:active { transform: scale(0.95); } .bottom-sheet__content[data-v-f6137838] { flex: 1; overflow-y: auto; padding: 20px; overscroll-behavior: contain; } .bottom-sheet__content[data-v-f6137838]::-webkit-scrollbar { width: 6px; } .bottom-sheet__content[data-v-f6137838]::-webkit-scrollbar-track { background: transparent; } .bottom-sheet__content[data-v-f6137838]::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; } .bottom-sheet__actions[data-v-f6137838] { padding: 16px 20px; border-top: 1px solid var(--border-default); background: var(--bg-surface); } .bottom-sheet-enter-active[data-v-f6137838], .bottom-sheet-leave-active[data-v-f6137838] { transition: opacity 0.3s ease; } .bottom-sheet-enter-active .bottom-sheet[data-v-f6137838], .bottom-sheet-leave-active .bottom-sheet[data-v-f6137838] { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .bottom-sheet-enter-from[data-v-f6137838], .bottom-sheet-leave-to[data-v-f6137838] { opacity: 0; } .bottom-sheet-enter-from .bottom-sheet[data-v-f6137838], .bottom-sheet-leave-to .bottom-sheet[data-v-f6137838] { transform: translateY(100%); } .bottom-sheet-enter-to[data-v-f6137838], .bottom-sheet-leave-from[data-v-f6137838] { opacity: 1; } .bottom-sheet-enter-to .bottom-sheet[data-v-f6137838], .bottom-sheet-leave-from .bottom-sheet[data-v-f6137838] { transform: translateY(0); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-6d575e2d]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-6d575e2d] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-6d575e2d] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-6d575e2d]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-6d575e2d], .theme-mode-light[data-v-6d575e2d] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-6d575e2d], .theme-mode-dark[data-v-6d575e2d] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-6d575e2d]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-6d575e2d]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-6d575e2d] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-6d575e2d] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-6d575e2d]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-6d575e2d], input[disabled][data-v-6d575e2d] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-6d575e2d] { opacity: 0.9; } input[readonly][data-v-6d575e2d] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-6d575e2d] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-6d575e2d]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-6d575e2d]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-6d575e2d]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-6d575e2d] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-6d575e2d]:nth-child(odd), .list-card-desktop__wrapper[data-v-6d575e2d]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-6d575e2d]:nth-child(even), .list-card-desktop__wrapper[data-v-6d575e2d]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-6d575e2d]:nth-child(odd), .listCardDesktopWrapper[data-v-6d575e2d]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-6d575e2d]:nth-child(even), .listCardDesktopWrapper[data-v-6d575e2d]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-6d575e2d] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-6d575e2d] { cursor: pointer; } .card-layout--selectionnable[data-v-6d575e2d]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-6d575e2d] { cursor: auto; } .card-layout--drawer[data-v-6d575e2d] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-6d575e2d] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-6d575e2d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-6d575e2d] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-6d575e2d] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-6d575e2d] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-6d575e2d]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-6d575e2d] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-6d575e2d] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-6d575e2d] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-6d575e2d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-6d575e2d] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-6d575e2d] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-6d575e2d] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-6d575e2d] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-6d575e2d] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-6d575e2d] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-6d575e2d] { background-color: #eb1515; } .color-chip--dossiers[data-v-6d575e2d] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-6d575e2d] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-6d575e2d] { background-color: #00a79b; } .color-chip--virements[data-v-6d575e2d] { background-color: var(--secondary-400); } .color-chip--factures[data-v-6d575e2d] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-6d575e2d] { background-color: #eb1515; } .color-recherche-dossiers[data-v-6d575e2d] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-6d575e2d] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-6d575e2d] { background-color: #00a79b; } .color-recherche-virements[data-v-6d575e2d] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-6d575e2d] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-6d575e2d] { color: #00a79b; cursor: pointer; } .scrollable[data-v-6d575e2d] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-6d575e2d] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-6d575e2d] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-6d575e2d] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-6d575e2d] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-6d575e2d] { font-weight: 800; } .grid-cell--column[data-v-6d575e2d] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-6d575e2d] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-6d575e2d] { fill: #00a79b; } .grid-cell--disabled[data-v-6d575e2d] { color: #cccccc; } .grid-cell--disabled svg[data-v-6d575e2d] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-6d575e2d] { white-space: nowrap; } .grid-cell--danger svg[data-v-6d575e2d] { fill: #eb1515; } .grid-cell--span-1[data-v-6d575e2d] { grid-column: span 1; } .grid-cell--span-2[data-v-6d575e2d] { grid-column: span 2; } .grid-cell--span-3[data-v-6d575e2d] { grid-column: span 3; } .grid-cell--span-4[data-v-6d575e2d] { grid-column: span 4; } .grid-cell--span-5[data-v-6d575e2d] { grid-column: span 5; } .grid-cell--span-6[data-v-6d575e2d] { grid-column: span 6; } .grid-cell--span-7[data-v-6d575e2d] { grid-column: span 7; } .grid-cell--span-8[data-v-6d575e2d] { grid-column: span 8; } .grid-cell--span-9[data-v-6d575e2d] { grid-column: span 9; } .grid-cell--span-10[data-v-6d575e2d] { grid-column: span 10; } .grid-cell--span-12[data-v-6d575e2d] { grid-column: span 12; } .grid-cell--span-13[data-v-6d575e2d] { grid-column: span 13; } .grid-cell--span-14[data-v-6d575e2d] { grid-column: span 14; } .grid-cell--span-16[data-v-6d575e2d] { grid-column: span 16; } .grid-cell--span-18[data-v-6d575e2d] { grid-column: span 18; } .grid-cell--span-20[data-v-6d575e2d] { grid-column: span 20; } .grid-cell--span-32[data-v-6d575e2d] { grid-column: span 32; } .grid-cell--span-36[data-v-6d575e2d] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-6d575e2d] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-6d575e2d] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-6d575e2d] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-6d575e2d] { justify-content: center !important; } .elem--bold span[data-v-6d575e2d] { font-weight: 800; } .elem--column[data-v-6d575e2d] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-6d575e2d] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-6d575e2d] { fill: #00a79b; } .elem--clickable[data-v-6d575e2d]:hover { cursor: pointer; } .elem--disabled[data-v-6d575e2d] { color: #cccccc; } .elem--disabled svg[data-v-6d575e2d] { fill: #cccccc; } .elem--nowrap span[data-v-6d575e2d] { white-space: nowrap; } .elem--danger svg[data-v-6d575e2d] { fill: #eb1515; } .elem--span-1[data-v-6d575e2d] { grid-column: span 1; } .elem--span-2[data-v-6d575e2d] { grid-column: span 2; } .elem--span-3[data-v-6d575e2d] { grid-column: span 3; } .elem--span-4[data-v-6d575e2d] { grid-column: span 4; } .elem--span-5[data-v-6d575e2d] { grid-column: span 5; } .elem--span-6[data-v-6d575e2d] { grid-column: span 6; } .elem--span-7[data-v-6d575e2d] { grid-column: span 7; } .elem--span-8[data-v-6d575e2d] { grid-column: span 8; } .elem--span-9[data-v-6d575e2d] { grid-column: span 9; } .elem--span-10[data-v-6d575e2d] { grid-column: span 10; } .elem--span-12[data-v-6d575e2d] { grid-column: span 12; } .elem--span-13[data-v-6d575e2d] { grid-column: span 13; } .elem--span-14[data-v-6d575e2d] { grid-column: span 14; } .elem--span-16[data-v-6d575e2d] { grid-column: span 16; } .elem--span-18[data-v-6d575e2d] { grid-column: span 18; } .elem--span-20[data-v-6d575e2d] { grid-column: span 20; } .elem--span-32[data-v-6d575e2d] { grid-column: span 32; } .elem--span-36[data-v-6d575e2d] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-6d575e2d] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-6d575e2d] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-6d575e2d]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-6d575e2d] { display: flex; } /* flex-direction */ .flex-column[data-v-6d575e2d] { flex-direction: column; } .flex-row[data-v-6d575e2d] { flex-direction: row; } /* flex */ .flex-1[data-v-6d575e2d] { flex: 1 !important; } .flex-2[data-v-6d575e2d] { flex: 2; } .flex-3[data-v-6d575e2d] { flex: 3; } .flex-3[data-v-6d575e2d] { flex: 4; } .flex-5[data-v-6d575e2d] { flex: 5; } .flex-auto[data-v-6d575e2d] { flex: auto; } .flex-none[data-v-6d575e2d] { flex: none; } .flex-content[data-v-6d575e2d] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-6d575e2d] { flex-wrap: wrap; } .flex-nowrap[data-v-6d575e2d] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-6d575e2d] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-6d575e2d] { justify-content: flex-start; } .justify-content-end[data-v-6d575e2d] { justify-content: flex-end; } .justify-content-baseline[data-v-6d575e2d] { justify-content: baseline; } .justify-content-center[data-v-6d575e2d] { justify-content: center; } .justify-content-space-between[data-v-6d575e2d] { justify-content: space-between; } .justify-content-space-around[data-v-6d575e2d] { justify-content: space-around; } .justify-content-space-evenly[data-v-6d575e2d] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-6d575e2d] { align-items: flex-start; } .align-items-flex-end[data-v-6d575e2d] { align-items: flex-end; } .align-items-stretch[data-v-6d575e2d] { align-items: stretch; } .align-items-baseline[data-v-6d575e2d] { align-items: baseline; } .align-items-center[data-v-6d575e2d] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-6d575e2d] { align-content: flex-start; } .align-content-flex-end[data-v-6d575e2d] { align-content: flex-end; } .align-content-center[data-v-6d575e2d] { align-content: center; } .align-content-stretch[data-v-6d575e2d] { align-content: stretch; } .align-content-space-between[data-v-6d575e2d] { align-content: space-between; } .align-content-space-around[data-v-6d575e2d] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-6d575e2d] { align-self: flex-start; } .align-self-flex-end[data-v-6d575e2d] { align-self: flex-end; } .align-self-stretch[data-v-6d575e2d] { align-self: stretch; } .align-self-flex-baseline[data-v-6d575e2d] { align-self: baseline; } .align-self-center[data-v-6d575e2d] { align-self: center; } .align-self-auto[data-v-6d575e2d] { align-self: auto; } .flex-gap-1[data-v-6d575e2d] { gap: 4px; } .flex-gap-2[data-v-6d575e2d] { gap: 8px; } .flex-gap-3[data-v-6d575e2d] { gap: 12px; } .flex-gap-4[data-v-6d575e2d] { gap: 16px; } .flex-gap-5[data-v-6d575e2d] { gap: 20px; } .flex-gap-6[data-v-6d575e2d] { gap: 24px; } .flex-gap-7[data-v-6d575e2d] { gap: 28px; } .flex-gap-8[data-v-6d575e2d] { gap: 32px; } .flex-gap-10[data-v-6d575e2d] { gap: 40px; } .flex-gap-12[data-v-6d575e2d] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-6d575e2d] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-6d575e2d] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-6d575e2d] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-6d575e2d] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-6d575e2d] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-6d575e2d] { display: none !important; } } .col-none[data-v-6d575e2d] { display: none; } .col-auto[data-v-6d575e2d] { grid-column: auto; } .col-1[data-v-6d575e2d] { grid-column: span 1; } .col-2[data-v-6d575e2d] { grid-column: span 2; } .col-3[data-v-6d575e2d] { grid-column: span 3; } .col-4[data-v-6d575e2d] { grid-column: span 4; } .col-5[data-v-6d575e2d] { grid-column: span 5; } .col-6[data-v-6d575e2d] { grid-column: span 6; } .col-7[data-v-6d575e2d] { grid-column: span 7; } .col-8[data-v-6d575e2d] { grid-column: span 8; } .col-9[data-v-6d575e2d] { grid-column: span 9; } .col-10[data-v-6d575e2d] { grid-column: span 10; } .col-12[data-v-6d575e2d] { grid-column: span 12; } .col-13[data-v-6d575e2d] { grid-column: span 13; } .col-14[data-v-6d575e2d] { grid-column: span 14; } .col-15[data-v-6d575e2d] { grid-column: span 15; } .col-16[data-v-6d575e2d] { grid-column: span 16; } .col-18[data-v-6d575e2d] { grid-column: span 18; } .col-20[data-v-6d575e2d] { grid-column: span 20; } .col-22[data-v-6d575e2d] { grid-column: span 22; } .col-24[data-v-6d575e2d] { grid-column: span 24; } .col-26[data-v-6d575e2d] { grid-column: span 26; } .col-27[data-v-6d575e2d] { grid-column: span 27; } .col-28[data-v-6d575e2d] { grid-column: span 28; } .col-30[data-v-6d575e2d] { grid-column: span 30; } .col-36[data-v-6d575e2d] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-6d575e2d] { display: none; } .col-md-36[data-v-6d575e2d] { grid-column: span 36; } .col-md-28[data-v-6d575e2d] { grid-column: span 28; } .col-md-27[data-v-6d575e2d] { grid-column: span 27; } .col-md-24[data-v-6d575e2d] { grid-column: span 24; } .col-md-22[data-v-6d575e2d] { grid-column: span 22; } .col-md-20[data-v-6d575e2d] { grid-column: span 20; } .col-md-19[data-v-6d575e2d] { grid-column: span 19; } .col-md-18[data-v-6d575e2d] { grid-column: span 18; } .col-md-17[data-v-6d575e2d] { grid-column: span 17; } .col-md-16[data-v-6d575e2d] { grid-column: span 16; } .col-md-15[data-v-6d575e2d] { grid-column: span 15; } .col-md-14[data-v-6d575e2d] { grid-column: span 14; } .col-md-13[data-v-6d575e2d] { grid-column: span 13; } .col-md-12[data-v-6d575e2d] { grid-column: span 12; } .col-md-10[data-v-6d575e2d] { grid-column: span 10; } .col-md-9[data-v-6d575e2d] { grid-column: span 9; } .col-md-8[data-v-6d575e2d] { grid-column: span 8; } .col-md-6[data-v-6d575e2d] { grid-column: span 6; } .col-md-5[data-v-6d575e2d] { grid-column: span 5; } .col-md-4[data-v-6d575e2d] { grid-column: span 4; } .col-md-3[data-v-6d575e2d] { grid-column: span 3; } .col-md-2[data-v-6d575e2d] { grid-column: span 2; } .col-md-1[data-v-6d575e2d] { grid-column: span 1; } .col-md-auto[data-v-6d575e2d] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-6d575e2d] { display: none; } .col-sm-36[data-v-6d575e2d] { grid-column: span 36; } .col-sm-32[data-v-6d575e2d] { grid-column: span 32; } .col-sm-28[data-v-6d575e2d] { grid-column: span 28; } .col-sm-27[data-v-6d575e2d] { grid-column: span 27; } .col-sm-24[data-v-6d575e2d] { grid-column: span 24; } .col-sm-22[data-v-6d575e2d] { grid-column: span 22; } .col-sm-20[data-v-6d575e2d] { grid-column: span 20; } .col-sm-18[data-v-6d575e2d] { grid-column: span 18; } .col-sm-16[data-v-6d575e2d] { grid-column: span 16; } .col-sm-15[data-v-6d575e2d] { grid-column: span 15; } .col-sm-14[data-v-6d575e2d] { grid-column: span 14; } .col-sm-13[data-v-6d575e2d] { grid-column: span 12; } .col-sm-12[data-v-6d575e2d] { grid-column: span 12; } .col-sm-10[data-v-6d575e2d] { grid-column: span 10; } .col-sm-9[data-v-6d575e2d] { grid-column: span 8; } .col-sm-8[data-v-6d575e2d] { grid-column: span 8; } .col-sm-6[data-v-6d575e2d] { grid-column: span 6; } .col-sm-4[data-v-6d575e2d] { grid-column: span 4; } .col-sm-auto[data-v-6d575e2d] { grid-column: auto; } } .fade-enter-active[data-v-6d575e2d] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-6d575e2d] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-6d575e2d], .fade-leave-to[data-v-6d575e2d] { opacity: 0; } .required[data-v-6d575e2d]::after { content: '*'; color: #eb1515; margin-left: 4px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-9db15ed2]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-9db15ed2] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-9db15ed2] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-9db15ed2]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-9db15ed2], .theme-mode-light[data-v-9db15ed2] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-9db15ed2], .theme-mode-dark[data-v-9db15ed2] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-9db15ed2]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-9db15ed2]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-9db15ed2] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-9db15ed2] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-9db15ed2]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-9db15ed2], input[disabled][data-v-9db15ed2] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-9db15ed2] { opacity: 0.9; } input[readonly][data-v-9db15ed2] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-9db15ed2] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-9db15ed2]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-9db15ed2]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-9db15ed2]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-9db15ed2] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-9db15ed2]:nth-child(odd), .list-card-desktop__wrapper[data-v-9db15ed2]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-9db15ed2]:nth-child(even), .list-card-desktop__wrapper[data-v-9db15ed2]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-9db15ed2]:nth-child(odd), .listCardDesktopWrapper[data-v-9db15ed2]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-9db15ed2]:nth-child(even), .listCardDesktopWrapper[data-v-9db15ed2]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-9db15ed2] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-9db15ed2] { cursor: pointer; } .card-layout--selectionnable[data-v-9db15ed2]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-9db15ed2] { cursor: auto; } .card-layout--drawer[data-v-9db15ed2] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-9db15ed2] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-9db15ed2] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-9db15ed2] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-9db15ed2] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-9db15ed2] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-9db15ed2]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-9db15ed2] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-9db15ed2] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-9db15ed2] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-9db15ed2] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-9db15ed2] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-9db15ed2] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-9db15ed2] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-9db15ed2] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-9db15ed2] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-9db15ed2] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-9db15ed2] { background-color: #eb1515; } .color-chip--dossiers[data-v-9db15ed2] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-9db15ed2] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-9db15ed2] { background-color: #00a79b; } .color-chip--virements[data-v-9db15ed2] { background-color: var(--secondary-400); } .color-chip--factures[data-v-9db15ed2] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-9db15ed2] { background-color: #eb1515; } .color-recherche-dossiers[data-v-9db15ed2] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-9db15ed2] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-9db15ed2] { background-color: #00a79b; } .color-recherche-virements[data-v-9db15ed2] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-9db15ed2] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-9db15ed2] { color: #00a79b; cursor: pointer; } .scrollable[data-v-9db15ed2] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-9db15ed2] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-9db15ed2] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-9db15ed2] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-9db15ed2] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-9db15ed2] { font-weight: 800; } .grid-cell--column[data-v-9db15ed2] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-9db15ed2] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-9db15ed2] { fill: #00a79b; } .grid-cell--disabled[data-v-9db15ed2] { color: #cccccc; } .grid-cell--disabled svg[data-v-9db15ed2] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-9db15ed2] { white-space: nowrap; } .grid-cell--danger svg[data-v-9db15ed2] { fill: #eb1515; } .grid-cell--span-1[data-v-9db15ed2] { grid-column: span 1; } .grid-cell--span-2[data-v-9db15ed2] { grid-column: span 2; } .grid-cell--span-3[data-v-9db15ed2] { grid-column: span 3; } .grid-cell--span-4[data-v-9db15ed2] { grid-column: span 4; } .grid-cell--span-5[data-v-9db15ed2] { grid-column: span 5; } .grid-cell--span-6[data-v-9db15ed2] { grid-column: span 6; } .grid-cell--span-7[data-v-9db15ed2] { grid-column: span 7; } .grid-cell--span-8[data-v-9db15ed2] { grid-column: span 8; } .grid-cell--span-9[data-v-9db15ed2] { grid-column: span 9; } .grid-cell--span-10[data-v-9db15ed2] { grid-column: span 10; } .grid-cell--span-12[data-v-9db15ed2] { grid-column: span 12; } .grid-cell--span-13[data-v-9db15ed2] { grid-column: span 13; } .grid-cell--span-14[data-v-9db15ed2] { grid-column: span 14; } .grid-cell--span-16[data-v-9db15ed2] { grid-column: span 16; } .grid-cell--span-18[data-v-9db15ed2] { grid-column: span 18; } .grid-cell--span-20[data-v-9db15ed2] { grid-column: span 20; } .grid-cell--span-32[data-v-9db15ed2] { grid-column: span 32; } .grid-cell--span-36[data-v-9db15ed2] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-9db15ed2] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-9db15ed2] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-9db15ed2] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-9db15ed2] { justify-content: center !important; } .elem--bold span[data-v-9db15ed2] { font-weight: 800; } .elem--column[data-v-9db15ed2] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-9db15ed2] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-9db15ed2] { fill: #00a79b; } .elem--clickable[data-v-9db15ed2]:hover { cursor: pointer; } .elem--disabled[data-v-9db15ed2] { color: #cccccc; } .elem--disabled svg[data-v-9db15ed2] { fill: #cccccc; } .elem--nowrap span[data-v-9db15ed2] { white-space: nowrap; } .elem--danger svg[data-v-9db15ed2] { fill: #eb1515; } .elem--span-1[data-v-9db15ed2] { grid-column: span 1; } .elem--span-2[data-v-9db15ed2] { grid-column: span 2; } .elem--span-3[data-v-9db15ed2] { grid-column: span 3; } .elem--span-4[data-v-9db15ed2] { grid-column: span 4; } .elem--span-5[data-v-9db15ed2] { grid-column: span 5; } .elem--span-6[data-v-9db15ed2] { grid-column: span 6; } .elem--span-7[data-v-9db15ed2] { grid-column: span 7; } .elem--span-8[data-v-9db15ed2] { grid-column: span 8; } .elem--span-9[data-v-9db15ed2] { grid-column: span 9; } .elem--span-10[data-v-9db15ed2] { grid-column: span 10; } .elem--span-12[data-v-9db15ed2] { grid-column: span 12; } .elem--span-13[data-v-9db15ed2] { grid-column: span 13; } .elem--span-14[data-v-9db15ed2] { grid-column: span 14; } .elem--span-16[data-v-9db15ed2] { grid-column: span 16; } .elem--span-18[data-v-9db15ed2] { grid-column: span 18; } .elem--span-20[data-v-9db15ed2] { grid-column: span 20; } .elem--span-32[data-v-9db15ed2] { grid-column: span 32; } .elem--span-36[data-v-9db15ed2] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-9db15ed2] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-9db15ed2] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-9db15ed2]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-9db15ed2] { display: flex; } /* flex-direction */ .flex-column[data-v-9db15ed2] { flex-direction: column; } .flex-row[data-v-9db15ed2] { flex-direction: row; } /* flex */ .flex-1[data-v-9db15ed2] { flex: 1 !important; } .flex-2[data-v-9db15ed2] { flex: 2; } .flex-3[data-v-9db15ed2] { flex: 3; } .flex-3[data-v-9db15ed2] { flex: 4; } .flex-5[data-v-9db15ed2] { flex: 5; } .flex-auto[data-v-9db15ed2] { flex: auto; } .flex-none[data-v-9db15ed2] { flex: none; } .flex-content[data-v-9db15ed2] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-9db15ed2] { flex-wrap: wrap; } .flex-nowrap[data-v-9db15ed2] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-9db15ed2] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-9db15ed2] { justify-content: flex-start; } .justify-content-end[data-v-9db15ed2] { justify-content: flex-end; } .justify-content-baseline[data-v-9db15ed2] { justify-content: baseline; } .justify-content-center[data-v-9db15ed2] { justify-content: center; } .justify-content-space-between[data-v-9db15ed2] { justify-content: space-between; } .justify-content-space-around[data-v-9db15ed2] { justify-content: space-around; } .justify-content-space-evenly[data-v-9db15ed2] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-9db15ed2] { align-items: flex-start; } .align-items-flex-end[data-v-9db15ed2] { align-items: flex-end; } .align-items-stretch[data-v-9db15ed2] { align-items: stretch; } .align-items-baseline[data-v-9db15ed2] { align-items: baseline; } .align-items-center[data-v-9db15ed2] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-9db15ed2] { align-content: flex-start; } .align-content-flex-end[data-v-9db15ed2] { align-content: flex-end; } .align-content-center[data-v-9db15ed2] { align-content: center; } .align-content-stretch[data-v-9db15ed2] { align-content: stretch; } .align-content-space-between[data-v-9db15ed2] { align-content: space-between; } .align-content-space-around[data-v-9db15ed2] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-9db15ed2] { align-self: flex-start; } .align-self-flex-end[data-v-9db15ed2] { align-self: flex-end; } .align-self-stretch[data-v-9db15ed2] { align-self: stretch; } .align-self-flex-baseline[data-v-9db15ed2] { align-self: baseline; } .align-self-center[data-v-9db15ed2] { align-self: center; } .align-self-auto[data-v-9db15ed2] { align-self: auto; } .flex-gap-1[data-v-9db15ed2] { gap: 4px; } .flex-gap-2[data-v-9db15ed2] { gap: 8px; } .flex-gap-3[data-v-9db15ed2] { gap: 12px; } .flex-gap-4[data-v-9db15ed2] { gap: 16px; } .flex-gap-5[data-v-9db15ed2] { gap: 20px; } .flex-gap-6[data-v-9db15ed2] { gap: 24px; } .flex-gap-7[data-v-9db15ed2] { gap: 28px; } .flex-gap-8[data-v-9db15ed2] { gap: 32px; } .flex-gap-10[data-v-9db15ed2] { gap: 40px; } .flex-gap-12[data-v-9db15ed2] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-9db15ed2] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-9db15ed2] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-9db15ed2] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-9db15ed2] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-9db15ed2] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-9db15ed2] { display: none !important; } } .col-none[data-v-9db15ed2] { display: none; } .col-auto[data-v-9db15ed2] { grid-column: auto; } .col-1[data-v-9db15ed2] { grid-column: span 1; } .col-2[data-v-9db15ed2] { grid-column: span 2; } .col-3[data-v-9db15ed2] { grid-column: span 3; } .col-4[data-v-9db15ed2] { grid-column: span 4; } .col-5[data-v-9db15ed2] { grid-column: span 5; } .col-6[data-v-9db15ed2] { grid-column: span 6; } .col-7[data-v-9db15ed2] { grid-column: span 7; } .col-8[data-v-9db15ed2] { grid-column: span 8; } .col-9[data-v-9db15ed2] { grid-column: span 9; } .col-10[data-v-9db15ed2] { grid-column: span 10; } .col-12[data-v-9db15ed2] { grid-column: span 12; } .col-13[data-v-9db15ed2] { grid-column: span 13; } .col-14[data-v-9db15ed2] { grid-column: span 14; } .col-15[data-v-9db15ed2] { grid-column: span 15; } .col-16[data-v-9db15ed2] { grid-column: span 16; } .col-18[data-v-9db15ed2] { grid-column: span 18; } .col-20[data-v-9db15ed2] { grid-column: span 20; } .col-22[data-v-9db15ed2] { grid-column: span 22; } .col-24[data-v-9db15ed2] { grid-column: span 24; } .col-26[data-v-9db15ed2] { grid-column: span 26; } .col-27[data-v-9db15ed2] { grid-column: span 27; } .col-28[data-v-9db15ed2] { grid-column: span 28; } .col-30[data-v-9db15ed2] { grid-column: span 30; } .col-36[data-v-9db15ed2] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-9db15ed2] { display: none; } .col-md-36[data-v-9db15ed2] { grid-column: span 36; } .col-md-28[data-v-9db15ed2] { grid-column: span 28; } .col-md-27[data-v-9db15ed2] { grid-column: span 27; } .col-md-24[data-v-9db15ed2] { grid-column: span 24; } .col-md-22[data-v-9db15ed2] { grid-column: span 22; } .col-md-20[data-v-9db15ed2] { grid-column: span 20; } .col-md-19[data-v-9db15ed2] { grid-column: span 19; } .col-md-18[data-v-9db15ed2] { grid-column: span 18; } .col-md-17[data-v-9db15ed2] { grid-column: span 17; } .col-md-16[data-v-9db15ed2] { grid-column: span 16; } .col-md-15[data-v-9db15ed2] { grid-column: span 15; } .col-md-14[data-v-9db15ed2] { grid-column: span 14; } .col-md-13[data-v-9db15ed2] { grid-column: span 13; } .col-md-12[data-v-9db15ed2] { grid-column: span 12; } .col-md-10[data-v-9db15ed2] { grid-column: span 10; } .col-md-9[data-v-9db15ed2] { grid-column: span 9; } .col-md-8[data-v-9db15ed2] { grid-column: span 8; } .col-md-6[data-v-9db15ed2] { grid-column: span 6; } .col-md-5[data-v-9db15ed2] { grid-column: span 5; } .col-md-4[data-v-9db15ed2] { grid-column: span 4; } .col-md-3[data-v-9db15ed2] { grid-column: span 3; } .col-md-2[data-v-9db15ed2] { grid-column: span 2; } .col-md-1[data-v-9db15ed2] { grid-column: span 1; } .col-md-auto[data-v-9db15ed2] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-9db15ed2] { display: none; } .col-sm-36[data-v-9db15ed2] { grid-column: span 36; } .col-sm-32[data-v-9db15ed2] { grid-column: span 32; } .col-sm-28[data-v-9db15ed2] { grid-column: span 28; } .col-sm-27[data-v-9db15ed2] { grid-column: span 27; } .col-sm-24[data-v-9db15ed2] { grid-column: span 24; } .col-sm-22[data-v-9db15ed2] { grid-column: span 22; } .col-sm-20[data-v-9db15ed2] { grid-column: span 20; } .col-sm-18[data-v-9db15ed2] { grid-column: span 18; } .col-sm-16[data-v-9db15ed2] { grid-column: span 16; } .col-sm-15[data-v-9db15ed2] { grid-column: span 15; } .col-sm-14[data-v-9db15ed2] { grid-column: span 14; } .col-sm-13[data-v-9db15ed2] { grid-column: span 12; } .col-sm-12[data-v-9db15ed2] { grid-column: span 12; } .col-sm-10[data-v-9db15ed2] { grid-column: span 10; } .col-sm-9[data-v-9db15ed2] { grid-column: span 8; } .col-sm-8[data-v-9db15ed2] { grid-column: span 8; } .col-sm-6[data-v-9db15ed2] { grid-column: span 6; } .col-sm-4[data-v-9db15ed2] { grid-column: span 4; } .col-sm-auto[data-v-9db15ed2] { grid-column: auto; } } .fade-enter-active[data-v-9db15ed2] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-9db15ed2] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-9db15ed2], .fade-leave-to[data-v-9db15ed2] { opacity: 0; } /* ══════════════════════════════════════════════════════════════ DROPDOWN CONTAINER — Light/Dark Theme Support ══════════════════════════════════════════════════════════════ Utilise les variables CSS sémantiques de semantic-theme.less: - --dropdown-bg, --dropdown-border, --dropdown-shadow - --dropdown-item-hover, --dropdown-item-active - --input-bg, --input-border, --input-text, --input-placeholder - --scrollbar-thumb, --scrollbar-track ══════════════════════════════════════════════════════════════ */ .dropdown[data-v-9db15ed2] { flex: 1; display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--input-border); position: relative; cursor: pointer; } .dropdown svg[data-v-9db15ed2] { flex: none; fill: var(--text-muted); background: transparent; transform: scale(0.8); } .dropdown input[data-v-9db15ed2] { cursor: pointer !important; background: transparent; color: var(--input-text); } .dropdown input[data-v-9db15ed2]::placeholder { color: var(--input-placeholder); } .dropdown--disabled[data-v-9db15ed2], .dropdown--readonly[data-v-9db15ed2] { cursor: default; } .dropdown--disabled svg[data-v-9db15ed2], .dropdown--readonly svg[data-v-9db15ed2] { fill: var(--text-disabled); background: var(--input-bg-disabled); } .dropdown--disabled svg[data-v-9db15ed2]:hover, .dropdown--readonly svg[data-v-9db15ed2]:hover { cursor: default; } .dropdown--disabled[data-v-9db15ed2] { background-color: var(--input-bg-disabled); opacity: 0.9; } .dropdown--disabled svg[data-v-9db15ed2] { background: var(--input-bg-disabled); } .dropdown--readonly[data-v-9db15ed2] { background-color: var(--bg-surface); } .dropdown--readonly svg[data-v-9db15ed2] { background: var(--bg-surface); } .dropdown[data-v-9db15ed2]:not(.dropdown--disabled, .dropdown--readonly):hover { border-color: var(--input-border-hover); } .dropdown[data-v-9db15ed2]:not(.dropdown--disabled, .dropdown--readonly):focus-within { box-shadow: var(--focus-ring); border-color: var(--input-border-focus); } .dropdown--small[data-v-9db15ed2] { height: 30px; padding: 4px; font-size: 12px; border-radius: 4px; } .dropdown--medium[data-v-9db15ed2] { height: 40px; padding: 8px; font-size: 14px; border-radius: 6px; } .dropdown--large[data-v-9db15ed2] { height: 48px; padding: 8px; font-size: 14px; border-radius: 8px; } .dropdown__menu { min-width: 80px; margin-top: 8px; border: 1px solid var(--dropdown-border); border-radius: 6px; z-index: 9999; background-color: var(--dropdown-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-height: 260px; overflow-y: auto; box-shadow: var(--dropdown-shadow); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } .dropdown__menu { width: 8px; } .dropdown__menu { background: var(--scrollbar-track); border-radius: 10px; } .dropdown__menu { background-color: var(--scrollbar-thumb); border-radius: 10px; } .dropdown__menu--no-data { overflow: hidden; border: none; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .wrapper { position: relative; flex: 1; } .wrapper__hint-container { display: flex; align-items: flex-start; flex-direction: column; caret-color: transparent; } .wrapper__hint-container ::v-deep(.basic-hint) { padding-top: 4px; padding-left: 4px; } .wrapper__hint { height: 14px; margin-top: calc(-4px); margin-bottom: 4px; } .wrapper__alert { position: absolute; left: 0; top: 100%; z-index: 1; display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; font-size: 12px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: opacity 0.15s ease; white-space: nowrap; } .wrapper__alert:hover { opacity: 0.8; } .wrapper__alert-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .wrapper__alert-message { flex: 1; } .wrapper__alert--danger { color: #ff4d4d; } .wrapper__alert--danger .wrapper__alert-icon { color: #ff4d4d; } .wrapper__alert--warning { color: #d9580a; } .wrapper__alert--warning .wrapper__alert-icon { color: #f97316; } .wrapper__alert--success { color: #2cbb66; } .wrapper__alert--success .wrapper__alert-icon { color: #2cbb66; } .wrapper__alert--info { color: #14adff; } .wrapper__alert--info .wrapper__alert-icon { color: #14adff; } .wrapper :deep(.alert--label) { padding: 0; } .wrapper__alert--container { position: absolute; } .wrapper__alert--container:hover { cursor: pointer; text-decoration: underline; } .field-alert-enter-active { animation: fieldAlertIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .field-alert-leave-active { animation: fieldAlertOut 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes fieldAlertIn { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fieldAlertOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* ══════════════════════════════════════════════════════════════ INPUT CONTAINER — Light/Dark Theme Support ══════════════════════════════════════════════════════════════ Utilise les variables CSS sémantiques de semantic-theme.less: - --input-bg, --input-bg-disabled - --input-border, --input-border-hover, --input-border-focus - --input-text, --input-placeholder ══════════════════════════════════════════════════════════════ */ .input-container { position: relative; display: flex; justify-content: flex-start; align-items: center; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; transition: all 0.2s ease; min-width: 0; /* --- Champs --- */ /* --- Icônes droites (pile, œil, etc.) --- */ /* --- Icône gauche --- */ /* --- Icône delete / close --- */ /* --- Hover / Focus / Disabled --- */ } .input-container input, .input-container textarea, .input-container select { background: transparent; color: var(--input-text); } .input-container input::placeholder, .input-container textarea::placeholder, .input-container select::placeholder { color: var(--input-placeholder); } .input-container svg { fill: var(--text-muted); color: var(--text-muted); flex-shrink: 0; } .input-container__field { flex: 1; min-width: 0; display: flex; align-items: center; } .input-container__icons-right { display: inline-flex; align-items: center; gap: 8px; padding-right: 6px; margin-left: 4px; } .input-container__icon-left { margin-right: 6px; margin-left: 4px; } .input-container__icon-delete { margin: 0 4px; } .input-container:not(.input-container--disabled, .input-container--readonly):hover { border-color: var(--input-border-hover); } .input-container:not( .input-container--error, .input-container--success, .input-container--disabled, .input-container--readonly ):focus-within { box-shadow: var(--focus-ring); border-color: var(--input-border-focus); } .input-container--disabled, .input-container--readonly { cursor: default; opacity: 0.9; border: 1px solid var(--input-border); } .input-container--disabled svg, .input-container--readonly svg { fill: var(--text-disabled); background: var(--input-bg-disabled); pointer-events: none; } .input-container--disabled { background-color: var(--input-bg-disabled); } .input-container--readonly { background-color: var(--bg-surface); } .input-container--large { padding: 10px; } .input-container--medium { padding: 6px; } .input-container--small { padding: 3px; } .input-container--table { flex: 1; } .input-container--table :deep(.alert__icon) { transform: scale(0.7) !important; } .input-container--ghost { background: transparent; border-color: var(--border-default); } .input-container--ghost input, .input-container--ghost textarea, .input-container--ghost select { background: transparent; } .input-container--ghost svg { background: transparent; color: var(--text-muted); } .input-container--ghost:not(.input-container--disabled, .input-container--readonly):hover { border-color: var(--border-strong); background: var(--hover-overlay); } .input-container--ghost:not( .input-container--error, .input-container--success, .input-container--disabled, .input-container--readonly ):focus-within { border-color: var(--input-border-focus); background: var(--hover-overlay); box-shadow: none; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-11aae68b]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-11aae68b] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-11aae68b] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-11aae68b]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-11aae68b], .theme-mode-light[data-v-11aae68b] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-11aae68b], .theme-mode-dark[data-v-11aae68b] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-11aae68b]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-11aae68b]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-11aae68b] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-11aae68b] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-11aae68b]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-11aae68b], input[disabled][data-v-11aae68b] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-11aae68b] { opacity: 0.9; } input[readonly][data-v-11aae68b] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-11aae68b] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-11aae68b]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-11aae68b]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-11aae68b]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-11aae68b] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-11aae68b]:nth-child(odd), .list-card-desktop__wrapper[data-v-11aae68b]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-11aae68b]:nth-child(even), .list-card-desktop__wrapper[data-v-11aae68b]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-11aae68b]:nth-child(odd), .listCardDesktopWrapper[data-v-11aae68b]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-11aae68b]:nth-child(even), .listCardDesktopWrapper[data-v-11aae68b]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-11aae68b] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-11aae68b] { cursor: pointer; } .card-layout--selectionnable[data-v-11aae68b]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-11aae68b] { cursor: auto; } .card-layout--drawer[data-v-11aae68b] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-11aae68b] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-11aae68b] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-11aae68b] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-11aae68b] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-11aae68b] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-11aae68b]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-11aae68b] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-11aae68b] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-11aae68b] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-11aae68b] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-11aae68b] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-11aae68b] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-11aae68b] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-11aae68b] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-11aae68b] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-11aae68b] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-11aae68b] { background-color: #eb1515; } .color-chip--dossiers[data-v-11aae68b] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-11aae68b] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-11aae68b] { background-color: #00a79b; } .color-chip--virements[data-v-11aae68b] { background-color: var(--secondary-400); } .color-chip--factures[data-v-11aae68b] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-11aae68b] { background-color: #eb1515; } .color-recherche-dossiers[data-v-11aae68b] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-11aae68b] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-11aae68b] { background-color: #00a79b; } .color-recherche-virements[data-v-11aae68b] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-11aae68b] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-11aae68b] { color: #00a79b; cursor: pointer; } .scrollable[data-v-11aae68b] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-11aae68b] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-11aae68b] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-11aae68b] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-11aae68b] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-11aae68b] { font-weight: 800; } .grid-cell--column[data-v-11aae68b] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-11aae68b] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-11aae68b] { fill: #00a79b; } .grid-cell--disabled[data-v-11aae68b] { color: #cccccc; } .grid-cell--disabled svg[data-v-11aae68b] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-11aae68b] { white-space: nowrap; } .grid-cell--danger svg[data-v-11aae68b] { fill: #eb1515; } .grid-cell--span-1[data-v-11aae68b] { grid-column: span 1; } .grid-cell--span-2[data-v-11aae68b] { grid-column: span 2; } .grid-cell--span-3[data-v-11aae68b] { grid-column: span 3; } .grid-cell--span-4[data-v-11aae68b] { grid-column: span 4; } .grid-cell--span-5[data-v-11aae68b] { grid-column: span 5; } .grid-cell--span-6[data-v-11aae68b] { grid-column: span 6; } .grid-cell--span-7[data-v-11aae68b] { grid-column: span 7; } .grid-cell--span-8[data-v-11aae68b] { grid-column: span 8; } .grid-cell--span-9[data-v-11aae68b] { grid-column: span 9; } .grid-cell--span-10[data-v-11aae68b] { grid-column: span 10; } .grid-cell--span-12[data-v-11aae68b] { grid-column: span 12; } .grid-cell--span-13[data-v-11aae68b] { grid-column: span 13; } .grid-cell--span-14[data-v-11aae68b] { grid-column: span 14; } .grid-cell--span-16[data-v-11aae68b] { grid-column: span 16; } .grid-cell--span-18[data-v-11aae68b] { grid-column: span 18; } .grid-cell--span-20[data-v-11aae68b] { grid-column: span 20; } .grid-cell--span-32[data-v-11aae68b] { grid-column: span 32; } .grid-cell--span-36[data-v-11aae68b] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-11aae68b] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-11aae68b] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-11aae68b] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-11aae68b] { justify-content: center !important; } .elem--bold span[data-v-11aae68b] { font-weight: 800; } .elem--column[data-v-11aae68b] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-11aae68b] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-11aae68b] { fill: #00a79b; } .elem--clickable[data-v-11aae68b]:hover { cursor: pointer; } .elem--disabled[data-v-11aae68b] { color: #cccccc; } .elem--disabled svg[data-v-11aae68b] { fill: #cccccc; } .elem--nowrap span[data-v-11aae68b] { white-space: nowrap; } .elem--danger svg[data-v-11aae68b] { fill: #eb1515; } .elem--span-1[data-v-11aae68b] { grid-column: span 1; } .elem--span-2[data-v-11aae68b] { grid-column: span 2; } .elem--span-3[data-v-11aae68b] { grid-column: span 3; } .elem--span-4[data-v-11aae68b] { grid-column: span 4; } .elem--span-5[data-v-11aae68b] { grid-column: span 5; } .elem--span-6[data-v-11aae68b] { grid-column: span 6; } .elem--span-7[data-v-11aae68b] { grid-column: span 7; } .elem--span-8[data-v-11aae68b] { grid-column: span 8; } .elem--span-9[data-v-11aae68b] { grid-column: span 9; } .elem--span-10[data-v-11aae68b] { grid-column: span 10; } .elem--span-12[data-v-11aae68b] { grid-column: span 12; } .elem--span-13[data-v-11aae68b] { grid-column: span 13; } .elem--span-14[data-v-11aae68b] { grid-column: span 14; } .elem--span-16[data-v-11aae68b] { grid-column: span 16; } .elem--span-18[data-v-11aae68b] { grid-column: span 18; } .elem--span-20[data-v-11aae68b] { grid-column: span 20; } .elem--span-32[data-v-11aae68b] { grid-column: span 32; } .elem--span-36[data-v-11aae68b] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-11aae68b] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-11aae68b] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-11aae68b]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-11aae68b] { display: flex; } /* flex-direction */ .flex-column[data-v-11aae68b] { flex-direction: column; } .flex-row[data-v-11aae68b] { flex-direction: row; } /* flex */ .flex-1[data-v-11aae68b] { flex: 1 !important; } .flex-2[data-v-11aae68b] { flex: 2; } .flex-3[data-v-11aae68b] { flex: 3; } .flex-3[data-v-11aae68b] { flex: 4; } .flex-5[data-v-11aae68b] { flex: 5; } .flex-auto[data-v-11aae68b] { flex: auto; } .flex-none[data-v-11aae68b] { flex: none; } .flex-content[data-v-11aae68b] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-11aae68b] { flex-wrap: wrap; } .flex-nowrap[data-v-11aae68b] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-11aae68b] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-11aae68b] { justify-content: flex-start; } .justify-content-end[data-v-11aae68b] { justify-content: flex-end; } .justify-content-baseline[data-v-11aae68b] { justify-content: baseline; } .justify-content-center[data-v-11aae68b] { justify-content: center; } .justify-content-space-between[data-v-11aae68b] { justify-content: space-between; } .justify-content-space-around[data-v-11aae68b] { justify-content: space-around; } .justify-content-space-evenly[data-v-11aae68b] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-11aae68b] { align-items: flex-start; } .align-items-flex-end[data-v-11aae68b] { align-items: flex-end; } .align-items-stretch[data-v-11aae68b] { align-items: stretch; } .align-items-baseline[data-v-11aae68b] { align-items: baseline; } .align-items-center[data-v-11aae68b] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-11aae68b] { align-content: flex-start; } .align-content-flex-end[data-v-11aae68b] { align-content: flex-end; } .align-content-center[data-v-11aae68b] { align-content: center; } .align-content-stretch[data-v-11aae68b] { align-content: stretch; } .align-content-space-between[data-v-11aae68b] { align-content: space-between; } .align-content-space-around[data-v-11aae68b] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-11aae68b] { align-self: flex-start; } .align-self-flex-end[data-v-11aae68b] { align-self: flex-end; } .align-self-stretch[data-v-11aae68b] { align-self: stretch; } .align-self-flex-baseline[data-v-11aae68b] { align-self: baseline; } .align-self-center[data-v-11aae68b] { align-self: center; } .align-self-auto[data-v-11aae68b] { align-self: auto; } .flex-gap-1[data-v-11aae68b] { gap: 4px; } .flex-gap-2[data-v-11aae68b] { gap: 8px; } .flex-gap-3[data-v-11aae68b] { gap: 12px; } .flex-gap-4[data-v-11aae68b] { gap: 16px; } .flex-gap-5[data-v-11aae68b] { gap: 20px; } .flex-gap-6[data-v-11aae68b] { gap: 24px; } .flex-gap-7[data-v-11aae68b] { gap: 28px; } .flex-gap-8[data-v-11aae68b] { gap: 32px; } .flex-gap-10[data-v-11aae68b] { gap: 40px; } .flex-gap-12[data-v-11aae68b] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-11aae68b] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-11aae68b] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-11aae68b] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-11aae68b] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-11aae68b] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-11aae68b] { display: none !important; } } .col-none[data-v-11aae68b] { display: none; } .col-auto[data-v-11aae68b] { grid-column: auto; } .col-1[data-v-11aae68b] { grid-column: span 1; } .col-2[data-v-11aae68b] { grid-column: span 2; } .col-3[data-v-11aae68b] { grid-column: span 3; } .col-4[data-v-11aae68b] { grid-column: span 4; } .col-5[data-v-11aae68b] { grid-column: span 5; } .col-6[data-v-11aae68b] { grid-column: span 6; } .col-7[data-v-11aae68b] { grid-column: span 7; } .col-8[data-v-11aae68b] { grid-column: span 8; } .col-9[data-v-11aae68b] { grid-column: span 9; } .col-10[data-v-11aae68b] { grid-column: span 10; } .col-12[data-v-11aae68b] { grid-column: span 12; } .col-13[data-v-11aae68b] { grid-column: span 13; } .col-14[data-v-11aae68b] { grid-column: span 14; } .col-15[data-v-11aae68b] { grid-column: span 15; } .col-16[data-v-11aae68b] { grid-column: span 16; } .col-18[data-v-11aae68b] { grid-column: span 18; } .col-20[data-v-11aae68b] { grid-column: span 20; } .col-22[data-v-11aae68b] { grid-column: span 22; } .col-24[data-v-11aae68b] { grid-column: span 24; } .col-26[data-v-11aae68b] { grid-column: span 26; } .col-27[data-v-11aae68b] { grid-column: span 27; } .col-28[data-v-11aae68b] { grid-column: span 28; } .col-30[data-v-11aae68b] { grid-column: span 30; } .col-36[data-v-11aae68b] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-11aae68b] { display: none; } .col-md-36[data-v-11aae68b] { grid-column: span 36; } .col-md-28[data-v-11aae68b] { grid-column: span 28; } .col-md-27[data-v-11aae68b] { grid-column: span 27; } .col-md-24[data-v-11aae68b] { grid-column: span 24; } .col-md-22[data-v-11aae68b] { grid-column: span 22; } .col-md-20[data-v-11aae68b] { grid-column: span 20; } .col-md-19[data-v-11aae68b] { grid-column: span 19; } .col-md-18[data-v-11aae68b] { grid-column: span 18; } .col-md-17[data-v-11aae68b] { grid-column: span 17; } .col-md-16[data-v-11aae68b] { grid-column: span 16; } .col-md-15[data-v-11aae68b] { grid-column: span 15; } .col-md-14[data-v-11aae68b] { grid-column: span 14; } .col-md-13[data-v-11aae68b] { grid-column: span 13; } .col-md-12[data-v-11aae68b] { grid-column: span 12; } .col-md-10[data-v-11aae68b] { grid-column: span 10; } .col-md-9[data-v-11aae68b] { grid-column: span 9; } .col-md-8[data-v-11aae68b] { grid-column: span 8; } .col-md-6[data-v-11aae68b] { grid-column: span 6; } .col-md-5[data-v-11aae68b] { grid-column: span 5; } .col-md-4[data-v-11aae68b] { grid-column: span 4; } .col-md-3[data-v-11aae68b] { grid-column: span 3; } .col-md-2[data-v-11aae68b] { grid-column: span 2; } .col-md-1[data-v-11aae68b] { grid-column: span 1; } .col-md-auto[data-v-11aae68b] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-11aae68b] { display: none; } .col-sm-36[data-v-11aae68b] { grid-column: span 36; } .col-sm-32[data-v-11aae68b] { grid-column: span 32; } .col-sm-28[data-v-11aae68b] { grid-column: span 28; } .col-sm-27[data-v-11aae68b] { grid-column: span 27; } .col-sm-24[data-v-11aae68b] { grid-column: span 24; } .col-sm-22[data-v-11aae68b] { grid-column: span 22; } .col-sm-20[data-v-11aae68b] { grid-column: span 20; } .col-sm-18[data-v-11aae68b] { grid-column: span 18; } .col-sm-16[data-v-11aae68b] { grid-column: span 16; } .col-sm-15[data-v-11aae68b] { grid-column: span 15; } .col-sm-14[data-v-11aae68b] { grid-column: span 14; } .col-sm-13[data-v-11aae68b] { grid-column: span 12; } .col-sm-12[data-v-11aae68b] { grid-column: span 12; } .col-sm-10[data-v-11aae68b] { grid-column: span 10; } .col-sm-9[data-v-11aae68b] { grid-column: span 8; } .col-sm-8[data-v-11aae68b] { grid-column: span 8; } .col-sm-6[data-v-11aae68b] { grid-column: span 6; } .col-sm-4[data-v-11aae68b] { grid-column: span 4; } .col-sm-auto[data-v-11aae68b] { grid-column: auto; } } .fade-enter-active[data-v-11aae68b] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-11aae68b] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-11aae68b], .fade-leave-to[data-v-11aae68b] { opacity: 0; } .wrapper__hint-container[data-v-11aae68b] { display: flex; flex-direction: column; caret-color: transparent; } .wrapper__hint-container[data-v-11aae68b] .basic-hint { padding-top: 4px; } .wrapper__label[data-v-11aae68b] { height: auto; } .wrapper__hint[data-v-11aae68b] { height: 14px; margin-top: calc(-4px); margin-bottom: 4px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-2eccb12e]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-2eccb12e] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-2eccb12e] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-2eccb12e]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-2eccb12e], .theme-mode-light[data-v-2eccb12e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-2eccb12e], .theme-mode-dark[data-v-2eccb12e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-2eccb12e]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-2eccb12e]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-2eccb12e] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-2eccb12e] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-2eccb12e]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-2eccb12e], input[disabled][data-v-2eccb12e] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-2eccb12e] { opacity: 0.9; } input[readonly][data-v-2eccb12e] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-2eccb12e] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-2eccb12e]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-2eccb12e]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-2eccb12e]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-2eccb12e] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-2eccb12e]:nth-child(odd), .list-card-desktop__wrapper[data-v-2eccb12e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-2eccb12e]:nth-child(even), .list-card-desktop__wrapper[data-v-2eccb12e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-2eccb12e]:nth-child(odd), .listCardDesktopWrapper[data-v-2eccb12e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-2eccb12e]:nth-child(even), .listCardDesktopWrapper[data-v-2eccb12e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-2eccb12e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-2eccb12e] { cursor: pointer; } .card-layout--selectionnable[data-v-2eccb12e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-2eccb12e] { cursor: auto; } .card-layout--drawer[data-v-2eccb12e] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-2eccb12e] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-2eccb12e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-2eccb12e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-2eccb12e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-2eccb12e] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-2eccb12e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-2eccb12e] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-2eccb12e] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-2eccb12e] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-2eccb12e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-2eccb12e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-2eccb12e] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-2eccb12e] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-2eccb12e] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-2eccb12e] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-2eccb12e] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-2eccb12e] { background-color: #eb1515; } .color-chip--dossiers[data-v-2eccb12e] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-2eccb12e] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-2eccb12e] { background-color: #00a79b; } .color-chip--virements[data-v-2eccb12e] { background-color: var(--secondary-400); } .color-chip--factures[data-v-2eccb12e] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-2eccb12e] { background-color: #eb1515; } .color-recherche-dossiers[data-v-2eccb12e] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-2eccb12e] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-2eccb12e] { background-color: #00a79b; } .color-recherche-virements[data-v-2eccb12e] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-2eccb12e] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-2eccb12e] { color: #00a79b; cursor: pointer; } .scrollable[data-v-2eccb12e] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-2eccb12e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-2eccb12e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-2eccb12e] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-2eccb12e] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-2eccb12e] { font-weight: 800; } .grid-cell--column[data-v-2eccb12e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-2eccb12e] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-2eccb12e] { fill: #00a79b; } .grid-cell--disabled[data-v-2eccb12e] { color: #cccccc; } .grid-cell--disabled svg[data-v-2eccb12e] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-2eccb12e] { white-space: nowrap; } .grid-cell--danger svg[data-v-2eccb12e] { fill: #eb1515; } .grid-cell--span-1[data-v-2eccb12e] { grid-column: span 1; } .grid-cell--span-2[data-v-2eccb12e] { grid-column: span 2; } .grid-cell--span-3[data-v-2eccb12e] { grid-column: span 3; } .grid-cell--span-4[data-v-2eccb12e] { grid-column: span 4; } .grid-cell--span-5[data-v-2eccb12e] { grid-column: span 5; } .grid-cell--span-6[data-v-2eccb12e] { grid-column: span 6; } .grid-cell--span-7[data-v-2eccb12e] { grid-column: span 7; } .grid-cell--span-8[data-v-2eccb12e] { grid-column: span 8; } .grid-cell--span-9[data-v-2eccb12e] { grid-column: span 9; } .grid-cell--span-10[data-v-2eccb12e] { grid-column: span 10; } .grid-cell--span-12[data-v-2eccb12e] { grid-column: span 12; } .grid-cell--span-13[data-v-2eccb12e] { grid-column: span 13; } .grid-cell--span-14[data-v-2eccb12e] { grid-column: span 14; } .grid-cell--span-16[data-v-2eccb12e] { grid-column: span 16; } .grid-cell--span-18[data-v-2eccb12e] { grid-column: span 18; } .grid-cell--span-20[data-v-2eccb12e] { grid-column: span 20; } .grid-cell--span-32[data-v-2eccb12e] { grid-column: span 32; } .grid-cell--span-36[data-v-2eccb12e] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-2eccb12e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-2eccb12e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-2eccb12e] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-2eccb12e] { justify-content: center !important; } .elem--bold span[data-v-2eccb12e] { font-weight: 800; } .elem--column[data-v-2eccb12e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-2eccb12e] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-2eccb12e] { fill: #00a79b; } .elem--clickable[data-v-2eccb12e]:hover { cursor: pointer; } .elem--disabled[data-v-2eccb12e] { color: #cccccc; } .elem--disabled svg[data-v-2eccb12e] { fill: #cccccc; } .elem--nowrap span[data-v-2eccb12e] { white-space: nowrap; } .elem--danger svg[data-v-2eccb12e] { fill: #eb1515; } .elem--span-1[data-v-2eccb12e] { grid-column: span 1; } .elem--span-2[data-v-2eccb12e] { grid-column: span 2; } .elem--span-3[data-v-2eccb12e] { grid-column: span 3; } .elem--span-4[data-v-2eccb12e] { grid-column: span 4; } .elem--span-5[data-v-2eccb12e] { grid-column: span 5; } .elem--span-6[data-v-2eccb12e] { grid-column: span 6; } .elem--span-7[data-v-2eccb12e] { grid-column: span 7; } .elem--span-8[data-v-2eccb12e] { grid-column: span 8; } .elem--span-9[data-v-2eccb12e] { grid-column: span 9; } .elem--span-10[data-v-2eccb12e] { grid-column: span 10; } .elem--span-12[data-v-2eccb12e] { grid-column: span 12; } .elem--span-13[data-v-2eccb12e] { grid-column: span 13; } .elem--span-14[data-v-2eccb12e] { grid-column: span 14; } .elem--span-16[data-v-2eccb12e] { grid-column: span 16; } .elem--span-18[data-v-2eccb12e] { grid-column: span 18; } .elem--span-20[data-v-2eccb12e] { grid-column: span 20; } .elem--span-32[data-v-2eccb12e] { grid-column: span 32; } .elem--span-36[data-v-2eccb12e] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-2eccb12e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-2eccb12e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-2eccb12e]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-2eccb12e] { display: flex; } /* flex-direction */ .flex-column[data-v-2eccb12e] { flex-direction: column; } .flex-row[data-v-2eccb12e] { flex-direction: row; } /* flex */ .flex-1[data-v-2eccb12e] { flex: 1 !important; } .flex-2[data-v-2eccb12e] { flex: 2; } .flex-3[data-v-2eccb12e] { flex: 3; } .flex-3[data-v-2eccb12e] { flex: 4; } .flex-5[data-v-2eccb12e] { flex: 5; } .flex-auto[data-v-2eccb12e] { flex: auto; } .flex-none[data-v-2eccb12e] { flex: none; } .flex-content[data-v-2eccb12e] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-2eccb12e] { flex-wrap: wrap; } .flex-nowrap[data-v-2eccb12e] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-2eccb12e] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-2eccb12e] { justify-content: flex-start; } .justify-content-end[data-v-2eccb12e] { justify-content: flex-end; } .justify-content-baseline[data-v-2eccb12e] { justify-content: baseline; } .justify-content-center[data-v-2eccb12e] { justify-content: center; } .justify-content-space-between[data-v-2eccb12e] { justify-content: space-between; } .justify-content-space-around[data-v-2eccb12e] { justify-content: space-around; } .justify-content-space-evenly[data-v-2eccb12e] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-2eccb12e] { align-items: flex-start; } .align-items-flex-end[data-v-2eccb12e] { align-items: flex-end; } .align-items-stretch[data-v-2eccb12e] { align-items: stretch; } .align-items-baseline[data-v-2eccb12e] { align-items: baseline; } .align-items-center[data-v-2eccb12e] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-2eccb12e] { align-content: flex-start; } .align-content-flex-end[data-v-2eccb12e] { align-content: flex-end; } .align-content-center[data-v-2eccb12e] { align-content: center; } .align-content-stretch[data-v-2eccb12e] { align-content: stretch; } .align-content-space-between[data-v-2eccb12e] { align-content: space-between; } .align-content-space-around[data-v-2eccb12e] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-2eccb12e] { align-self: flex-start; } .align-self-flex-end[data-v-2eccb12e] { align-self: flex-end; } .align-self-stretch[data-v-2eccb12e] { align-self: stretch; } .align-self-flex-baseline[data-v-2eccb12e] { align-self: baseline; } .align-self-center[data-v-2eccb12e] { align-self: center; } .align-self-auto[data-v-2eccb12e] { align-self: auto; } .flex-gap-1[data-v-2eccb12e] { gap: 4px; } .flex-gap-2[data-v-2eccb12e] { gap: 8px; } .flex-gap-3[data-v-2eccb12e] { gap: 12px; } .flex-gap-4[data-v-2eccb12e] { gap: 16px; } .flex-gap-5[data-v-2eccb12e] { gap: 20px; } .flex-gap-6[data-v-2eccb12e] { gap: 24px; } .flex-gap-7[data-v-2eccb12e] { gap: 28px; } .flex-gap-8[data-v-2eccb12e] { gap: 32px; } .flex-gap-10[data-v-2eccb12e] { gap: 40px; } .flex-gap-12[data-v-2eccb12e] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-2eccb12e] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-2eccb12e] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-2eccb12e] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-2eccb12e] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-2eccb12e] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-2eccb12e] { display: none !important; } } .col-none[data-v-2eccb12e] { display: none; } .col-auto[data-v-2eccb12e] { grid-column: auto; } .col-1[data-v-2eccb12e] { grid-column: span 1; } .col-2[data-v-2eccb12e] { grid-column: span 2; } .col-3[data-v-2eccb12e] { grid-column: span 3; } .col-4[data-v-2eccb12e] { grid-column: span 4; } .col-5[data-v-2eccb12e] { grid-column: span 5; } .col-6[data-v-2eccb12e] { grid-column: span 6; } .col-7[data-v-2eccb12e] { grid-column: span 7; } .col-8[data-v-2eccb12e] { grid-column: span 8; } .col-9[data-v-2eccb12e] { grid-column: span 9; } .col-10[data-v-2eccb12e] { grid-column: span 10; } .col-12[data-v-2eccb12e] { grid-column: span 12; } .col-13[data-v-2eccb12e] { grid-column: span 13; } .col-14[data-v-2eccb12e] { grid-column: span 14; } .col-15[data-v-2eccb12e] { grid-column: span 15; } .col-16[data-v-2eccb12e] { grid-column: span 16; } .col-18[data-v-2eccb12e] { grid-column: span 18; } .col-20[data-v-2eccb12e] { grid-column: span 20; } .col-22[data-v-2eccb12e] { grid-column: span 22; } .col-24[data-v-2eccb12e] { grid-column: span 24; } .col-26[data-v-2eccb12e] { grid-column: span 26; } .col-27[data-v-2eccb12e] { grid-column: span 27; } .col-28[data-v-2eccb12e] { grid-column: span 28; } .col-30[data-v-2eccb12e] { grid-column: span 30; } .col-36[data-v-2eccb12e] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-2eccb12e] { display: none; } .col-md-36[data-v-2eccb12e] { grid-column: span 36; } .col-md-28[data-v-2eccb12e] { grid-column: span 28; } .col-md-27[data-v-2eccb12e] { grid-column: span 27; } .col-md-24[data-v-2eccb12e] { grid-column: span 24; } .col-md-22[data-v-2eccb12e] { grid-column: span 22; } .col-md-20[data-v-2eccb12e] { grid-column: span 20; } .col-md-19[data-v-2eccb12e] { grid-column: span 19; } .col-md-18[data-v-2eccb12e] { grid-column: span 18; } .col-md-17[data-v-2eccb12e] { grid-column: span 17; } .col-md-16[data-v-2eccb12e] { grid-column: span 16; } .col-md-15[data-v-2eccb12e] { grid-column: span 15; } .col-md-14[data-v-2eccb12e] { grid-column: span 14; } .col-md-13[data-v-2eccb12e] { grid-column: span 13; } .col-md-12[data-v-2eccb12e] { grid-column: span 12; } .col-md-10[data-v-2eccb12e] { grid-column: span 10; } .col-md-9[data-v-2eccb12e] { grid-column: span 9; } .col-md-8[data-v-2eccb12e] { grid-column: span 8; } .col-md-6[data-v-2eccb12e] { grid-column: span 6; } .col-md-5[data-v-2eccb12e] { grid-column: span 5; } .col-md-4[data-v-2eccb12e] { grid-column: span 4; } .col-md-3[data-v-2eccb12e] { grid-column: span 3; } .col-md-2[data-v-2eccb12e] { grid-column: span 2; } .col-md-1[data-v-2eccb12e] { grid-column: span 1; } .col-md-auto[data-v-2eccb12e] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-2eccb12e] { display: none; } .col-sm-36[data-v-2eccb12e] { grid-column: span 36; } .col-sm-32[data-v-2eccb12e] { grid-column: span 32; } .col-sm-28[data-v-2eccb12e] { grid-column: span 28; } .col-sm-27[data-v-2eccb12e] { grid-column: span 27; } .col-sm-24[data-v-2eccb12e] { grid-column: span 24; } .col-sm-22[data-v-2eccb12e] { grid-column: span 22; } .col-sm-20[data-v-2eccb12e] { grid-column: span 20; } .col-sm-18[data-v-2eccb12e] { grid-column: span 18; } .col-sm-16[data-v-2eccb12e] { grid-column: span 16; } .col-sm-15[data-v-2eccb12e] { grid-column: span 15; } .col-sm-14[data-v-2eccb12e] { grid-column: span 14; } .col-sm-13[data-v-2eccb12e] { grid-column: span 12; } .col-sm-12[data-v-2eccb12e] { grid-column: span 12; } .col-sm-10[data-v-2eccb12e] { grid-column: span 10; } .col-sm-9[data-v-2eccb12e] { grid-column: span 8; } .col-sm-8[data-v-2eccb12e] { grid-column: span 8; } .col-sm-6[data-v-2eccb12e] { grid-column: span 6; } .col-sm-4[data-v-2eccb12e] { grid-column: span 4; } .col-sm-auto[data-v-2eccb12e] { grid-column: auto; } } .fade-enter-active[data-v-2eccb12e] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-2eccb12e] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-2eccb12e], .fade-leave-to[data-v-2eccb12e] { opacity: 0; } /* ========================================================== 🧭 WRAPPER ========================================================== */ .floating-wrapper[data-v-2eccb12e] { position: relative; display: inline-flex; align-items: center; justify-content: center; user-select: none; } .floating-wrapper__trigger[data-v-2eccb12e] { display: inline-flex; align-items: center; justify-content: center; } .floating-wrapper__grace-zone[data-v-2eccb12e] { position: fixed; height: 12px; pointer-events: none; background: transparent; z-index: 1500; } /* ========================================================== 🧊 FLOATING DROPDOWN — Neural Glass v2 ========================================================== */ .floating-dropdown[data-v-2eccb12e] { position: fixed; z-index: 2000; /* 🌫️ Glass effect variant */ background: rgba(var(--secondary-900-rgb), 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 14px; padding: 16px 14px 12px; /* 🫥 Subtle border */ border: 1px solid color-mix(in srgb, #94a2b8 6%, transparent); /* 🧠 Neural-shadow */ box-shadow: 0 8px 26px rgba(var(--primary-900-rgb), 0.4), 0 4px 18px rgba(0, 0, 0, 0.55); animation: fadeScaleIn-2eccb12e 0.22s cubic-bezier(0.25, 1, 0.5, 1); /* Arrow */ } .floating-dropdown__arrow[data-v-2eccb12e] { position: absolute; top: -7px; width: 14px; height: 14px; background: rgba(var(--secondary-900-rgb), 0.92); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, #94a2b8 6%, transparent); border-bottom: none; border-right: none; transform: rotate(45deg); border-radius: 4px 0 0 0; /* halo */ box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.25), 0 0 6px rgba(var(--primary-700-rgb), 0.15); } /* ========================================================== ✨ Animations — Neural Smooth ========================================================== */ @keyframes fadeScaleIn-2eccb12e { 0% { opacity: 0; transform: translateY(6px) scale(0.95); } 60% { opacity: 1; transform: translateY(2px) scale(1); } 100% { transform: translateY(0) scale(1); } } .fade-slide-enter-active[data-v-2eccb12e], .fade-slide-leave-active[data-v-2eccb12e] { transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1); } .fade-slide-enter-from[data-v-2eccb12e], .fade-slide-leave-to[data-v-2eccb12e] { opacity: 0; transform: translateY(8px); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ :root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"], .theme-mode-light { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"], .theme-mode-dark { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly], input[disabled] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled] { opacity: 0.9; } input[readonly] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar { /* Chrome, Safari, Edge Chromium */ } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper:nth-child(odd), .list-card-desktop__wrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper:nth-child(even), .list-card-desktop__wrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper:nth-child(odd), .listCardDesktopWrapper:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper:nth-child(even), .listCardDesktopWrapper:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable { cursor: pointer; } .card-layout--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer { cursor: auto; } .card-layout--drawer { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable { cursor: pointer; } .cardLayoutWrapper--selectionnable:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer { cursor: auto; } .cardLayoutWrapper--drawer { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes { background-color: #eb1515; } .color-chip--dossiers { background-color: #ffa807; } .color-chip--drf-demandes { background-color: #e71754; } .color-chip--drf-dossiers { background-color: #00a79b; } .color-chip--virements { background-color: var(--secondary-400); } .color-chip--factures { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes { background-color: #eb1515; } .color-recherche-dossiers { background-color: #ffa807; } .color-recherche-drf-demandes { background-color: #e71754; } .color-recherche-drf-dossiers { background-color: #00a79b; } .color-recherche-virements { background-color: var(--secondary-400); } .color-recherche-factures { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link { color: #00a79b; cursor: pointer; } .scrollable { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg { transform: scale(0.7); overflow: visible; } .grid-cell--center { justify-content: center !important; } .grid-cell--bold .grid-cell__text { font-weight: 800; } .grid-cell--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg { fill: #00a79b; } .grid-cell--disabled { color: #cccccc; } .grid-cell--disabled svg { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text { white-space: nowrap; } .grid-cell--danger svg { fill: #eb1515; } .grid-cell--span-1 { grid-column: span 1; } .grid-cell--span-2 { grid-column: span 2; } .grid-cell--span-3 { grid-column: span 3; } .grid-cell--span-4 { grid-column: span 4; } .grid-cell--span-5 { grid-column: span 5; } .grid-cell--span-6 { grid-column: span 6; } .grid-cell--span-7 { grid-column: span 7; } .grid-cell--span-8 { grid-column: span 8; } .grid-cell--span-9 { grid-column: span 9; } .grid-cell--span-10 { grid-column: span 10; } .grid-cell--span-12 { grid-column: span 12; } .grid-cell--span-13 { grid-column: span 13; } .grid-cell--span-14 { grid-column: span 14; } .grid-cell--span-16 { grid-column: span 16; } .grid-cell--span-18 { grid-column: span 18; } .grid-cell--span-20 { grid-column: span 20; } .grid-cell--span-32 { grid-column: span 32; } .grid-cell--span-36 { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg { transform: scale(0.7); overflow: visible; } .elem--center { justify-content: center !important; } .elem--bold span { font-weight: 800; } .elem--column { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable { color: #00a79b; cursor: pointer; } .elem--clickable svg { fill: #00a79b; } .elem--clickable:hover { cursor: pointer; } .elem--disabled { color: #cccccc; } .elem--disabled svg { fill: #cccccc; } .elem--nowrap span { white-space: nowrap; } .elem--danger svg { fill: #eb1515; } .elem--span-1 { grid-column: span 1; } .elem--span-2 { grid-column: span 2; } .elem--span-3 { grid-column: span 3; } .elem--span-4 { grid-column: span 4; } .elem--span-5 { grid-column: span 5; } .elem--span-6 { grid-column: span 6; } .elem--span-7 { grid-column: span 7; } .elem--span-8 { grid-column: span 8; } .elem--span-9 { grid-column: span 9; } .elem--span-10 { grid-column: span 10; } .elem--span-12 { grid-column: span 12; } .elem--span-13 { grid-column: span 13; } .elem--span-14 { grid-column: span 14; } .elem--span-16 { grid-column: span 16; } .elem--span-18 { grid-column: span 18; } .elem--span-20 { grid-column: span 20; } .elem--span-32 { grid-column: span 32; } .elem--span-36 { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex { display: flex; } /* flex-direction */ .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } /* flex */ .flex-1 { flex: 1 !important; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-3 { flex: 4; } .flex-5 { flex: 5; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-content { flex: content; } /* flex-wrap */ .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-baseline { justify-content: baseline; } .justify-content-center { justify-content: center; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } /* align-items */ .align-items-flex-start { align-items: flex-start; } .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .align-items-center { align-items: center; } /* align-content */ .align-content-flex-start { align-content: flex-start; } .align-content-flex-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } /* align-self */ .align-self-flex-start { align-self: flex-start; } .align-self-flex-end { align-self: flex-end; } .align-self-stretch { align-self: stretch; } .align-self-flex-baseline { align-self: baseline; } .align-self-center { align-self: center; } .align-self-auto { align-self: auto; } .flex-gap-1 { gap: 4px; } .flex-gap-2 { gap: 8px; } .flex-gap-3 { gap: 12px; } .flex-gap-4 { gap: 16px; } .flex-gap-5 { gap: 20px; } .flex-gap-6 { gap: 24px; } .flex-gap-7 { gap: 28px; } .flex-gap-8 { gap: 32px; } .flex-gap-10 { gap: 40px; } .flex-gap-12 { gap: 48px; } @media (max-width: 720px) { .hide-mobile { display: none !important; } } @media (max-width: 1160px) { .hide-tablet { display: none !important; } } @media (min-width: 721px) { .show-mobile-only { display: none !important; } } @media (max-width: 720px) { .show-tablet-only { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only { display: none !important; } } .col-none { display: none; } .col-auto { grid-column: auto; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; } .col-13 { grid-column: span 13; } .col-14 { grid-column: span 14; } .col-15 { grid-column: span 15; } .col-16 { grid-column: span 16; } .col-18 { grid-column: span 18; } .col-20 { grid-column: span 20; } .col-22 { grid-column: span 22; } .col-24 { grid-column: span 24; } .col-26 { grid-column: span 26; } .col-27 { grid-column: span 27; } .col-28 { grid-column: span 28; } .col-30 { grid-column: span 30; } .col-36 { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none { display: none; } .col-md-36 { grid-column: span 36; } .col-md-28 { grid-column: span 28; } .col-md-27 { grid-column: span 27; } .col-md-24 { grid-column: span 24; } .col-md-22 { grid-column: span 22; } .col-md-20 { grid-column: span 20; } .col-md-19 { grid-column: span 19; } .col-md-18 { grid-column: span 18; } .col-md-17 { grid-column: span 17; } .col-md-16 { grid-column: span 16; } .col-md-15 { grid-column: span 15; } .col-md-14 { grid-column: span 14; } .col-md-13 { grid-column: span 13; } .col-md-12 { grid-column: span 12; } .col-md-10 { grid-column: span 10; } .col-md-9 { grid-column: span 9; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; } .col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; } .col-md-2 { grid-column: span 2; } .col-md-1 { grid-column: span 1; } .col-md-auto { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none { display: none; } .col-sm-36 { grid-column: span 36; } .col-sm-32 { grid-column: span 32; } .col-sm-28 { grid-column: span 28; } .col-sm-27 { grid-column: span 27; } .col-sm-24 { grid-column: span 24; } .col-sm-22 { grid-column: span 22; } .col-sm-20 { grid-column: span 20; } .col-sm-18 { grid-column: span 18; } .col-sm-16 { grid-column: span 16; } .col-sm-15 { grid-column: span 15; } .col-sm-14 { grid-column: span 14; } .col-sm-13 { grid-column: span 12; } .col-sm-12 { grid-column: span 12; } .col-sm-10 { grid-column: span 10; } .col-sm-9 { grid-column: span 8; } .col-sm-8 { grid-column: span 8; } .col-sm-6 { grid-column: span 6; } .col-sm-4 { grid-column: span 4; } .col-sm-auto { grid-column: auto; } } .fade-enter-active { transition: opacity 0.3s ease-out; } .fade-leave-active { transition: opacity 0.6s ease-in; } .fade-enter-from, .fade-leave-to { opacity: 0; } .input-container svg { cursor: pointer; } .input-container--disabled input { background-color: #edf1f5; } .input-container--large { height: 48px; border-radius: 8px; } .input-container--large input { font-size: 14px; } .input-container--medium { height: 40px; border-radius: 6px; } .input-container--medium input { font-size: 12px; } @media (max-width: 720px) { .input-container--medium { height: 44px; } } .input-container--small { height: 30px; border-radius: 4px; } .input-container--small input { font-size: 10px; } @media (max-width: 720px) { .input-container--small { height: 44px; } .input-container--small input { font-size: 12px; } } .input-container--success { color: #1f9a50; border-color: #1f9a50; } .input-container--success:hover { border-color: #1f9a50; } .input-container--error { color: #eb1515; border-color: #eb1515; } .input-container--error:hover { border-color: #eb1515; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-17ab90ea]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-17ab90ea] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-17ab90ea] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-17ab90ea]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-17ab90ea], .theme-mode-light[data-v-17ab90ea] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-17ab90ea], .theme-mode-dark[data-v-17ab90ea] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-17ab90ea]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-17ab90ea]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-17ab90ea] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-17ab90ea] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-17ab90ea]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-17ab90ea], input[disabled][data-v-17ab90ea] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-17ab90ea] { opacity: 0.9; } input[readonly][data-v-17ab90ea] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-17ab90ea] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-17ab90ea]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-17ab90ea]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-17ab90ea]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-17ab90ea] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-17ab90ea]:nth-child(odd), .list-card-desktop__wrapper[data-v-17ab90ea]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-17ab90ea]:nth-child(even), .list-card-desktop__wrapper[data-v-17ab90ea]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-17ab90ea]:nth-child(odd), .listCardDesktopWrapper[data-v-17ab90ea]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-17ab90ea]:nth-child(even), .listCardDesktopWrapper[data-v-17ab90ea]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-17ab90ea] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-17ab90ea] { cursor: pointer; } .card-layout--selectionnable[data-v-17ab90ea]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-17ab90ea] { cursor: auto; } .card-layout--drawer[data-v-17ab90ea] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-17ab90ea] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-17ab90ea] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-17ab90ea] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-17ab90ea] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-17ab90ea] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-17ab90ea]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-17ab90ea] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-17ab90ea] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-17ab90ea] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-17ab90ea] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-17ab90ea] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-17ab90ea] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-17ab90ea] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-17ab90ea] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-17ab90ea] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-17ab90ea] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-17ab90ea] { background-color: #eb1515; } .color-chip--dossiers[data-v-17ab90ea] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-17ab90ea] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-17ab90ea] { background-color: #00a79b; } .color-chip--virements[data-v-17ab90ea] { background-color: var(--secondary-400); } .color-chip--factures[data-v-17ab90ea] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-17ab90ea] { background-color: #eb1515; } .color-recherche-dossiers[data-v-17ab90ea] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-17ab90ea] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-17ab90ea] { background-color: #00a79b; } .color-recherche-virements[data-v-17ab90ea] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-17ab90ea] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-17ab90ea] { color: #00a79b; cursor: pointer; } .scrollable[data-v-17ab90ea] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-17ab90ea] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-17ab90ea] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-17ab90ea] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-17ab90ea] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-17ab90ea] { font-weight: 800; } .grid-cell--column[data-v-17ab90ea] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-17ab90ea] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-17ab90ea] { fill: #00a79b; } .grid-cell--disabled[data-v-17ab90ea] { color: #cccccc; } .grid-cell--disabled svg[data-v-17ab90ea] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-17ab90ea] { white-space: nowrap; } .grid-cell--danger svg[data-v-17ab90ea] { fill: #eb1515; } .grid-cell--span-1[data-v-17ab90ea] { grid-column: span 1; } .grid-cell--span-2[data-v-17ab90ea] { grid-column: span 2; } .grid-cell--span-3[data-v-17ab90ea] { grid-column: span 3; } .grid-cell--span-4[data-v-17ab90ea] { grid-column: span 4; } .grid-cell--span-5[data-v-17ab90ea] { grid-column: span 5; } .grid-cell--span-6[data-v-17ab90ea] { grid-column: span 6; } .grid-cell--span-7[data-v-17ab90ea] { grid-column: span 7; } .grid-cell--span-8[data-v-17ab90ea] { grid-column: span 8; } .grid-cell--span-9[data-v-17ab90ea] { grid-column: span 9; } .grid-cell--span-10[data-v-17ab90ea] { grid-column: span 10; } .grid-cell--span-12[data-v-17ab90ea] { grid-column: span 12; } .grid-cell--span-13[data-v-17ab90ea] { grid-column: span 13; } .grid-cell--span-14[data-v-17ab90ea] { grid-column: span 14; } .grid-cell--span-16[data-v-17ab90ea] { grid-column: span 16; } .grid-cell--span-18[data-v-17ab90ea] { grid-column: span 18; } .grid-cell--span-20[data-v-17ab90ea] { grid-column: span 20; } .grid-cell--span-32[data-v-17ab90ea] { grid-column: span 32; } .grid-cell--span-36[data-v-17ab90ea] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-17ab90ea] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-17ab90ea] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-17ab90ea] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-17ab90ea] { justify-content: center !important; } .elem--bold span[data-v-17ab90ea] { font-weight: 800; } .elem--column[data-v-17ab90ea] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-17ab90ea] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-17ab90ea] { fill: #00a79b; } .elem--clickable[data-v-17ab90ea]:hover { cursor: pointer; } .elem--disabled[data-v-17ab90ea] { color: #cccccc; } .elem--disabled svg[data-v-17ab90ea] { fill: #cccccc; } .elem--nowrap span[data-v-17ab90ea] { white-space: nowrap; } .elem--danger svg[data-v-17ab90ea] { fill: #eb1515; } .elem--span-1[data-v-17ab90ea] { grid-column: span 1; } .elem--span-2[data-v-17ab90ea] { grid-column: span 2; } .elem--span-3[data-v-17ab90ea] { grid-column: span 3; } .elem--span-4[data-v-17ab90ea] { grid-column: span 4; } .elem--span-5[data-v-17ab90ea] { grid-column: span 5; } .elem--span-6[data-v-17ab90ea] { grid-column: span 6; } .elem--span-7[data-v-17ab90ea] { grid-column: span 7; } .elem--span-8[data-v-17ab90ea] { grid-column: span 8; } .elem--span-9[data-v-17ab90ea] { grid-column: span 9; } .elem--span-10[data-v-17ab90ea] { grid-column: span 10; } .elem--span-12[data-v-17ab90ea] { grid-column: span 12; } .elem--span-13[data-v-17ab90ea] { grid-column: span 13; } .elem--span-14[data-v-17ab90ea] { grid-column: span 14; } .elem--span-16[data-v-17ab90ea] { grid-column: span 16; } .elem--span-18[data-v-17ab90ea] { grid-column: span 18; } .elem--span-20[data-v-17ab90ea] { grid-column: span 20; } .elem--span-32[data-v-17ab90ea] { grid-column: span 32; } .elem--span-36[data-v-17ab90ea] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-17ab90ea] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-17ab90ea] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-17ab90ea]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-17ab90ea] { display: flex; } /* flex-direction */ .flex-column[data-v-17ab90ea] { flex-direction: column; } .flex-row[data-v-17ab90ea] { flex-direction: row; } /* flex */ .flex-1[data-v-17ab90ea] { flex: 1 !important; } .flex-2[data-v-17ab90ea] { flex: 2; } .flex-3[data-v-17ab90ea] { flex: 3; } .flex-3[data-v-17ab90ea] { flex: 4; } .flex-5[data-v-17ab90ea] { flex: 5; } .flex-auto[data-v-17ab90ea] { flex: auto; } .flex-none[data-v-17ab90ea] { flex: none; } .flex-content[data-v-17ab90ea] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-17ab90ea] { flex-wrap: wrap; } .flex-nowrap[data-v-17ab90ea] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-17ab90ea] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-17ab90ea] { justify-content: flex-start; } .justify-content-end[data-v-17ab90ea] { justify-content: flex-end; } .justify-content-baseline[data-v-17ab90ea] { justify-content: baseline; } .justify-content-center[data-v-17ab90ea] { justify-content: center; } .justify-content-space-between[data-v-17ab90ea] { justify-content: space-between; } .justify-content-space-around[data-v-17ab90ea] { justify-content: space-around; } .justify-content-space-evenly[data-v-17ab90ea] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-17ab90ea] { align-items: flex-start; } .align-items-flex-end[data-v-17ab90ea] { align-items: flex-end; } .align-items-stretch[data-v-17ab90ea] { align-items: stretch; } .align-items-baseline[data-v-17ab90ea] { align-items: baseline; } .align-items-center[data-v-17ab90ea] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-17ab90ea] { align-content: flex-start; } .align-content-flex-end[data-v-17ab90ea] { align-content: flex-end; } .align-content-center[data-v-17ab90ea] { align-content: center; } .align-content-stretch[data-v-17ab90ea] { align-content: stretch; } .align-content-space-between[data-v-17ab90ea] { align-content: space-between; } .align-content-space-around[data-v-17ab90ea] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-17ab90ea] { align-self: flex-start; } .align-self-flex-end[data-v-17ab90ea] { align-self: flex-end; } .align-self-stretch[data-v-17ab90ea] { align-self: stretch; } .align-self-flex-baseline[data-v-17ab90ea] { align-self: baseline; } .align-self-center[data-v-17ab90ea] { align-self: center; } .align-self-auto[data-v-17ab90ea] { align-self: auto; } .flex-gap-1[data-v-17ab90ea] { gap: 4px; } .flex-gap-2[data-v-17ab90ea] { gap: 8px; } .flex-gap-3[data-v-17ab90ea] { gap: 12px; } .flex-gap-4[data-v-17ab90ea] { gap: 16px; } .flex-gap-5[data-v-17ab90ea] { gap: 20px; } .flex-gap-6[data-v-17ab90ea] { gap: 24px; } .flex-gap-7[data-v-17ab90ea] { gap: 28px; } .flex-gap-8[data-v-17ab90ea] { gap: 32px; } .flex-gap-10[data-v-17ab90ea] { gap: 40px; } .flex-gap-12[data-v-17ab90ea] { gap: 48px; } .col-none[data-v-17ab90ea] { display: none; } .col-auto[data-v-17ab90ea] { grid-column: auto; } .col-1[data-v-17ab90ea] { grid-column: span 1; } .col-2[data-v-17ab90ea] { grid-column: span 2; } .col-3[data-v-17ab90ea] { grid-column: span 3; } .col-4[data-v-17ab90ea] { grid-column: span 4; } .col-5[data-v-17ab90ea] { grid-column: span 5; } .col-6[data-v-17ab90ea] { grid-column: span 6; } .col-7[data-v-17ab90ea] { grid-column: span 7; } .col-8[data-v-17ab90ea] { grid-column: span 8; } .col-9[data-v-17ab90ea] { grid-column: span 9; } .col-10[data-v-17ab90ea] { grid-column: span 10; } .col-12[data-v-17ab90ea] { grid-column: span 12; } .col-13[data-v-17ab90ea] { grid-column: span 13; } .col-14[data-v-17ab90ea] { grid-column: span 14; } .col-15[data-v-17ab90ea] { grid-column: span 15; } .col-16[data-v-17ab90ea] { grid-column: span 16; } .col-18[data-v-17ab90ea] { grid-column: span 18; } .col-20[data-v-17ab90ea] { grid-column: span 20; } .col-22[data-v-17ab90ea] { grid-column: span 22; } .col-24[data-v-17ab90ea] { grid-column: span 24; } .col-26[data-v-17ab90ea] { grid-column: span 26; } .col-27[data-v-17ab90ea] { grid-column: span 27; } .col-28[data-v-17ab90ea] { grid-column: span 28; } .col-30[data-v-17ab90ea] { grid-column: span 30; } .col-36[data-v-17ab90ea] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-17ab90ea] { display: none; } .col-md-36[data-v-17ab90ea] { grid-column: span 36; } .col-md-28[data-v-17ab90ea] { grid-column: span 28; } .col-md-27[data-v-17ab90ea] { grid-column: span 27; } .col-md-24[data-v-17ab90ea] { grid-column: span 24; } .col-md-22[data-v-17ab90ea] { grid-column: span 22; } .col-md-20[data-v-17ab90ea] { grid-column: span 20; } .col-md-19[data-v-17ab90ea] { grid-column: span 19; } .col-md-18[data-v-17ab90ea] { grid-column: span 18; } .col-md-17[data-v-17ab90ea] { grid-column: span 17; } .col-md-16[data-v-17ab90ea] { grid-column: span 16; } .col-md-15[data-v-17ab90ea] { grid-column: span 15; } .col-md-14[data-v-17ab90ea] { grid-column: span 14; } .col-md-13[data-v-17ab90ea] { grid-column: span 13; } .col-md-12[data-v-17ab90ea] { grid-column: span 12; } .col-md-10[data-v-17ab90ea] { grid-column: span 10; } .col-md-9[data-v-17ab90ea] { grid-column: span 9; } .col-md-8[data-v-17ab90ea] { grid-column: span 8; } .col-md-6[data-v-17ab90ea] { grid-column: span 6; } .col-md-5[data-v-17ab90ea] { grid-column: span 5; } .col-md-4[data-v-17ab90ea] { grid-column: span 4; } .col-md-3[data-v-17ab90ea] { grid-column: span 3; } .col-md-2[data-v-17ab90ea] { grid-column: span 2; } .col-md-1[data-v-17ab90ea] { grid-column: span 1; } .col-md-auto[data-v-17ab90ea] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-17ab90ea] { display: none; } .col-sm-36[data-v-17ab90ea] { grid-column: span 36; } .col-sm-32[data-v-17ab90ea] { grid-column: span 32; } .col-sm-28[data-v-17ab90ea] { grid-column: span 28; } .col-sm-27[data-v-17ab90ea] { grid-column: span 27; } .col-sm-24[data-v-17ab90ea] { grid-column: span 24; } .col-sm-22[data-v-17ab90ea] { grid-column: span 22; } .col-sm-20[data-v-17ab90ea] { grid-column: span 20; } .col-sm-18[data-v-17ab90ea] { grid-column: span 18; } .col-sm-16[data-v-17ab90ea] { grid-column: span 16; } .col-sm-15[data-v-17ab90ea] { grid-column: span 15; } .col-sm-14[data-v-17ab90ea] { grid-column: span 14; } .col-sm-13[data-v-17ab90ea] { grid-column: span 12; } .col-sm-12[data-v-17ab90ea] { grid-column: span 12; } .col-sm-10[data-v-17ab90ea] { grid-column: span 10; } .col-sm-9[data-v-17ab90ea] { grid-column: span 8; } .col-sm-8[data-v-17ab90ea] { grid-column: span 8; } .col-sm-6[data-v-17ab90ea] { grid-column: span 6; } .col-sm-4[data-v-17ab90ea] { grid-column: span 4; } .col-sm-auto[data-v-17ab90ea] { grid-column: auto; } } .fade-enter-active[data-v-17ab90ea] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-17ab90ea] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-17ab90ea], .fade-leave-to[data-v-17ab90ea] { opacity: 0; } @media (max-width: 720px) { .hide-mobile[data-v-17ab90ea] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-17ab90ea] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-17ab90ea] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-17ab90ea] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-17ab90ea] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-17ab90ea] { display: none !important; } } .admin-toolbar[data-v-17ab90ea] { background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; max-width: 100%; overflow: visible; } .admin-toolbar__row[data-v-17ab90ea] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .admin-toolbar__search[data-v-17ab90ea] { flex: 0 1 280px; min-width: 180px; max-width: 320px; } .admin-toolbar__filters[data-v-17ab90ea] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-toolbar__pagination[data-v-17ab90ea] { margin-left: auto; } @media (max-width: 1160px) { .admin-toolbar[data-v-17ab90ea] { padding: 10px 14px; } .admin-toolbar__row[data-v-17ab90ea] { gap: 10px; } .admin-toolbar__search[data-v-17ab90ea] { flex: 0 1 220px; min-width: 160px; } .admin-toolbar__filters[data-v-17ab90ea] { gap: 6px; } .admin-toolbar__pagination[data-v-17ab90ea] { margin-left: auto; flex-shrink: 0; } } @media (max-width: 720px) { .admin-toolbar[data-v-17ab90ea] { padding: 12px; border-radius: 12px; } .admin-toolbar__row[data-v-17ab90ea] { gap: 10px; } .admin-toolbar__search[data-v-17ab90ea] { min-width: 100%; max-width: none; flex: 1 1 100%; order: -1; } .admin-toolbar__filters[data-v-17ab90ea] { width: 100%; order: 0; overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding: 4px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .admin-toolbar__filters[data-v-17ab90ea]::-webkit-scrollbar { display: none; } .admin-toolbar__filters[data-v-17ab90ea] .PremiumButton, .admin-toolbar__filters[data-v-17ab90ea] button { flex-shrink: 0; font-size: 12px; padding: 6px 10px; white-space: nowrap; } .admin-toolbar__reset[data-v-17ab90ea] { order: 1; flex-shrink: 0; } .admin-toolbar__pagination[data-v-17ab90ea] { margin-left: 0; width: 100%; justify-content: center; display: flex; order: 20; } .admin-toolbar[data-v-17ab90ea] .PremiumButton { font-size: 13px; padding: 8px 12px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-4619ba4f]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-4619ba4f] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-4619ba4f] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-4619ba4f]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-4619ba4f], .theme-mode-light[data-v-4619ba4f] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-4619ba4f], .theme-mode-dark[data-v-4619ba4f] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-4619ba4f]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-4619ba4f]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-4619ba4f] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-4619ba4f] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-4619ba4f]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-4619ba4f], input[disabled][data-v-4619ba4f] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-4619ba4f] { opacity: 0.9; } input[readonly][data-v-4619ba4f] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-4619ba4f] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-4619ba4f]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-4619ba4f]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-4619ba4f]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-4619ba4f] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-4619ba4f]:nth-child(odd), .list-card-desktop__wrapper[data-v-4619ba4f]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-4619ba4f]:nth-child(even), .list-card-desktop__wrapper[data-v-4619ba4f]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-4619ba4f]:nth-child(odd), .listCardDesktopWrapper[data-v-4619ba4f]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-4619ba4f]:nth-child(even), .listCardDesktopWrapper[data-v-4619ba4f]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-4619ba4f] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-4619ba4f] { cursor: pointer; } .card-layout--selectionnable[data-v-4619ba4f]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-4619ba4f] { cursor: auto; } .card-layout--drawer[data-v-4619ba4f] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-4619ba4f] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-4619ba4f] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-4619ba4f] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-4619ba4f] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-4619ba4f] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-4619ba4f]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-4619ba4f] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-4619ba4f] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-4619ba4f] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-4619ba4f] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-4619ba4f] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-4619ba4f] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-4619ba4f] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-4619ba4f] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-4619ba4f] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-4619ba4f] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-4619ba4f] { background-color: #eb1515; } .color-chip--dossiers[data-v-4619ba4f] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-4619ba4f] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-4619ba4f] { background-color: #00a79b; } .color-chip--virements[data-v-4619ba4f] { background-color: var(--secondary-400); } .color-chip--factures[data-v-4619ba4f] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-4619ba4f] { background-color: #eb1515; } .color-recherche-dossiers[data-v-4619ba4f] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-4619ba4f] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-4619ba4f] { background-color: #00a79b; } .color-recherche-virements[data-v-4619ba4f] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-4619ba4f] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-4619ba4f] { color: #00a79b; cursor: pointer; } .scrollable[data-v-4619ba4f] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-4619ba4f] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-4619ba4f] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-4619ba4f] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-4619ba4f] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-4619ba4f] { font-weight: 800; } .grid-cell--column[data-v-4619ba4f] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-4619ba4f] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-4619ba4f] { fill: #00a79b; } .grid-cell--disabled[data-v-4619ba4f] { color: #cccccc; } .grid-cell--disabled svg[data-v-4619ba4f] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-4619ba4f] { white-space: nowrap; } .grid-cell--danger svg[data-v-4619ba4f] { fill: #eb1515; } .grid-cell--span-1[data-v-4619ba4f] { grid-column: span 1; } .grid-cell--span-2[data-v-4619ba4f] { grid-column: span 2; } .grid-cell--span-3[data-v-4619ba4f] { grid-column: span 3; } .grid-cell--span-4[data-v-4619ba4f] { grid-column: span 4; } .grid-cell--span-5[data-v-4619ba4f] { grid-column: span 5; } .grid-cell--span-6[data-v-4619ba4f] { grid-column: span 6; } .grid-cell--span-7[data-v-4619ba4f] { grid-column: span 7; } .grid-cell--span-8[data-v-4619ba4f] { grid-column: span 8; } .grid-cell--span-9[data-v-4619ba4f] { grid-column: span 9; } .grid-cell--span-10[data-v-4619ba4f] { grid-column: span 10; } .grid-cell--span-12[data-v-4619ba4f] { grid-column: span 12; } .grid-cell--span-13[data-v-4619ba4f] { grid-column: span 13; } .grid-cell--span-14[data-v-4619ba4f] { grid-column: span 14; } .grid-cell--span-16[data-v-4619ba4f] { grid-column: span 16; } .grid-cell--span-18[data-v-4619ba4f] { grid-column: span 18; } .grid-cell--span-20[data-v-4619ba4f] { grid-column: span 20; } .grid-cell--span-32[data-v-4619ba4f] { grid-column: span 32; } .grid-cell--span-36[data-v-4619ba4f] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-4619ba4f] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-4619ba4f] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-4619ba4f] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-4619ba4f] { justify-content: center !important; } .elem--bold span[data-v-4619ba4f] { font-weight: 800; } .elem--column[data-v-4619ba4f] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-4619ba4f] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-4619ba4f] { fill: #00a79b; } .elem--clickable[data-v-4619ba4f]:hover { cursor: pointer; } .elem--disabled[data-v-4619ba4f] { color: #cccccc; } .elem--disabled svg[data-v-4619ba4f] { fill: #cccccc; } .elem--nowrap span[data-v-4619ba4f] { white-space: nowrap; } .elem--danger svg[data-v-4619ba4f] { fill: #eb1515; } .elem--span-1[data-v-4619ba4f] { grid-column: span 1; } .elem--span-2[data-v-4619ba4f] { grid-column: span 2; } .elem--span-3[data-v-4619ba4f] { grid-column: span 3; } .elem--span-4[data-v-4619ba4f] { grid-column: span 4; } .elem--span-5[data-v-4619ba4f] { grid-column: span 5; } .elem--span-6[data-v-4619ba4f] { grid-column: span 6; } .elem--span-7[data-v-4619ba4f] { grid-column: span 7; } .elem--span-8[data-v-4619ba4f] { grid-column: span 8; } .elem--span-9[data-v-4619ba4f] { grid-column: span 9; } .elem--span-10[data-v-4619ba4f] { grid-column: span 10; } .elem--span-12[data-v-4619ba4f] { grid-column: span 12; } .elem--span-13[data-v-4619ba4f] { grid-column: span 13; } .elem--span-14[data-v-4619ba4f] { grid-column: span 14; } .elem--span-16[data-v-4619ba4f] { grid-column: span 16; } .elem--span-18[data-v-4619ba4f] { grid-column: span 18; } .elem--span-20[data-v-4619ba4f] { grid-column: span 20; } .elem--span-32[data-v-4619ba4f] { grid-column: span 32; } .elem--span-36[data-v-4619ba4f] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-4619ba4f] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-4619ba4f] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-4619ba4f]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-4619ba4f] { display: flex; } /* flex-direction */ .flex-column[data-v-4619ba4f] { flex-direction: column; } .flex-row[data-v-4619ba4f] { flex-direction: row; } /* flex */ .flex-1[data-v-4619ba4f] { flex: 1 !important; } .flex-2[data-v-4619ba4f] { flex: 2; } .flex-3[data-v-4619ba4f] { flex: 3; } .flex-3[data-v-4619ba4f] { flex: 4; } .flex-5[data-v-4619ba4f] { flex: 5; } .flex-auto[data-v-4619ba4f] { flex: auto; } .flex-none[data-v-4619ba4f] { flex: none; } .flex-content[data-v-4619ba4f] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-4619ba4f] { flex-wrap: wrap; } .flex-nowrap[data-v-4619ba4f] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-4619ba4f] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-4619ba4f] { justify-content: flex-start; } .justify-content-end[data-v-4619ba4f] { justify-content: flex-end; } .justify-content-baseline[data-v-4619ba4f] { justify-content: baseline; } .justify-content-center[data-v-4619ba4f] { justify-content: center; } .justify-content-space-between[data-v-4619ba4f] { justify-content: space-between; } .justify-content-space-around[data-v-4619ba4f] { justify-content: space-around; } .justify-content-space-evenly[data-v-4619ba4f] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-4619ba4f] { align-items: flex-start; } .align-items-flex-end[data-v-4619ba4f] { align-items: flex-end; } .align-items-stretch[data-v-4619ba4f] { align-items: stretch; } .align-items-baseline[data-v-4619ba4f] { align-items: baseline; } .align-items-center[data-v-4619ba4f] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-4619ba4f] { align-content: flex-start; } .align-content-flex-end[data-v-4619ba4f] { align-content: flex-end; } .align-content-center[data-v-4619ba4f] { align-content: center; } .align-content-stretch[data-v-4619ba4f] { align-content: stretch; } .align-content-space-between[data-v-4619ba4f] { align-content: space-between; } .align-content-space-around[data-v-4619ba4f] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-4619ba4f] { align-self: flex-start; } .align-self-flex-end[data-v-4619ba4f] { align-self: flex-end; } .align-self-stretch[data-v-4619ba4f] { align-self: stretch; } .align-self-flex-baseline[data-v-4619ba4f] { align-self: baseline; } .align-self-center[data-v-4619ba4f] { align-self: center; } .align-self-auto[data-v-4619ba4f] { align-self: auto; } .flex-gap-1[data-v-4619ba4f] { gap: 4px; } .flex-gap-2[data-v-4619ba4f] { gap: 8px; } .flex-gap-3[data-v-4619ba4f] { gap: 12px; } .flex-gap-4[data-v-4619ba4f] { gap: 16px; } .flex-gap-5[data-v-4619ba4f] { gap: 20px; } .flex-gap-6[data-v-4619ba4f] { gap: 24px; } .flex-gap-7[data-v-4619ba4f] { gap: 28px; } .flex-gap-8[data-v-4619ba4f] { gap: 32px; } .flex-gap-10[data-v-4619ba4f] { gap: 40px; } .flex-gap-12[data-v-4619ba4f] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-4619ba4f] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-4619ba4f] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-4619ba4f] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-4619ba4f] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-4619ba4f] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-4619ba4f] { display: none !important; } } .col-none[data-v-4619ba4f] { display: none; } .col-auto[data-v-4619ba4f] { grid-column: auto; } .col-1[data-v-4619ba4f] { grid-column: span 1; } .col-2[data-v-4619ba4f] { grid-column: span 2; } .col-3[data-v-4619ba4f] { grid-column: span 3; } .col-4[data-v-4619ba4f] { grid-column: span 4; } .col-5[data-v-4619ba4f] { grid-column: span 5; } .col-6[data-v-4619ba4f] { grid-column: span 6; } .col-7[data-v-4619ba4f] { grid-column: span 7; } .col-8[data-v-4619ba4f] { grid-column: span 8; } .col-9[data-v-4619ba4f] { grid-column: span 9; } .col-10[data-v-4619ba4f] { grid-column: span 10; } .col-12[data-v-4619ba4f] { grid-column: span 12; } .col-13[data-v-4619ba4f] { grid-column: span 13; } .col-14[data-v-4619ba4f] { grid-column: span 14; } .col-15[data-v-4619ba4f] { grid-column: span 15; } .col-16[data-v-4619ba4f] { grid-column: span 16; } .col-18[data-v-4619ba4f] { grid-column: span 18; } .col-20[data-v-4619ba4f] { grid-column: span 20; } .col-22[data-v-4619ba4f] { grid-column: span 22; } .col-24[data-v-4619ba4f] { grid-column: span 24; } .col-26[data-v-4619ba4f] { grid-column: span 26; } .col-27[data-v-4619ba4f] { grid-column: span 27; } .col-28[data-v-4619ba4f] { grid-column: span 28; } .col-30[data-v-4619ba4f] { grid-column: span 30; } .col-36[data-v-4619ba4f] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-4619ba4f] { display: none; } .col-md-36[data-v-4619ba4f] { grid-column: span 36; } .col-md-28[data-v-4619ba4f] { grid-column: span 28; } .col-md-27[data-v-4619ba4f] { grid-column: span 27; } .col-md-24[data-v-4619ba4f] { grid-column: span 24; } .col-md-22[data-v-4619ba4f] { grid-column: span 22; } .col-md-20[data-v-4619ba4f] { grid-column: span 20; } .col-md-19[data-v-4619ba4f] { grid-column: span 19; } .col-md-18[data-v-4619ba4f] { grid-column: span 18; } .col-md-17[data-v-4619ba4f] { grid-column: span 17; } .col-md-16[data-v-4619ba4f] { grid-column: span 16; } .col-md-15[data-v-4619ba4f] { grid-column: span 15; } .col-md-14[data-v-4619ba4f] { grid-column: span 14; } .col-md-13[data-v-4619ba4f] { grid-column: span 13; } .col-md-12[data-v-4619ba4f] { grid-column: span 12; } .col-md-10[data-v-4619ba4f] { grid-column: span 10; } .col-md-9[data-v-4619ba4f] { grid-column: span 9; } .col-md-8[data-v-4619ba4f] { grid-column: span 8; } .col-md-6[data-v-4619ba4f] { grid-column: span 6; } .col-md-5[data-v-4619ba4f] { grid-column: span 5; } .col-md-4[data-v-4619ba4f] { grid-column: span 4; } .col-md-3[data-v-4619ba4f] { grid-column: span 3; } .col-md-2[data-v-4619ba4f] { grid-column: span 2; } .col-md-1[data-v-4619ba4f] { grid-column: span 1; } .col-md-auto[data-v-4619ba4f] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-4619ba4f] { display: none; } .col-sm-36[data-v-4619ba4f] { grid-column: span 36; } .col-sm-32[data-v-4619ba4f] { grid-column: span 32; } .col-sm-28[data-v-4619ba4f] { grid-column: span 28; } .col-sm-27[data-v-4619ba4f] { grid-column: span 27; } .col-sm-24[data-v-4619ba4f] { grid-column: span 24; } .col-sm-22[data-v-4619ba4f] { grid-column: span 22; } .col-sm-20[data-v-4619ba4f] { grid-column: span 20; } .col-sm-18[data-v-4619ba4f] { grid-column: span 18; } .col-sm-16[data-v-4619ba4f] { grid-column: span 16; } .col-sm-15[data-v-4619ba4f] { grid-column: span 15; } .col-sm-14[data-v-4619ba4f] { grid-column: span 14; } .col-sm-13[data-v-4619ba4f] { grid-column: span 12; } .col-sm-12[data-v-4619ba4f] { grid-column: span 12; } .col-sm-10[data-v-4619ba4f] { grid-column: span 10; } .col-sm-9[data-v-4619ba4f] { grid-column: span 8; } .col-sm-8[data-v-4619ba4f] { grid-column: span 8; } .col-sm-6[data-v-4619ba4f] { grid-column: span 6; } .col-sm-4[data-v-4619ba4f] { grid-column: span 4; } .col-sm-auto[data-v-4619ba4f] { grid-column: auto; } } .fade-enter-active[data-v-4619ba4f] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-4619ba4f] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-4619ba4f], .fade-leave-to[data-v-4619ba4f] { opacity: 0; } .mobile-card[data-v-4619ba4f] { background: var(--bg-subtle); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .mobile-card[data-v-4619ba4f]:hover { border-color: var(--primary-300); } .mobile-card[data-v-4619ba4f]:active { background: rgba(var(--primary-500-rgb), 0.08); } .header[data-v-4619ba4f] { display: flex; align-items: flex-start; gap: 10px; position: relative; } .thumb[data-v-4619ba4f] { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border-default); background: var(--bg-subtle); flex-shrink: 0; } .content[data-v-4619ba4f] { flex: 1; display: flex; flex-direction: column; } .title[data-v-4619ba4f] { line-height: 1.2; } .actions[data-v-4619ba4f] { position: absolute; top: 0; right: 0; } .footer[data-v-4619ba4f] { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; } .theme[data-v-4619ba4f] { color: var(--text-secondary); } .date[data-v-4619ba4f] { text-align: right; } .action-btn[data-v-4619ba4f] { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s ease; margin: -8px -8px -8px 0; } .action-btn[data-v-4619ba4f]:active { background: rgba(239, 68, 68, 0.1); } .action-btn svg[data-v-4619ba4f] { opacity: 0.8; transition: opacity 0.2s ease; } .action-btn:hover svg[data-v-4619ba4f] { opacity: 1; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-83cb4f87]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-83cb4f87] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-83cb4f87] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-83cb4f87]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-83cb4f87], .theme-mode-light[data-v-83cb4f87] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-83cb4f87], .theme-mode-dark[data-v-83cb4f87] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-83cb4f87]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-83cb4f87]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-83cb4f87] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-83cb4f87] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-83cb4f87]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-83cb4f87], input[disabled][data-v-83cb4f87] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-83cb4f87] { opacity: 0.9; } input[readonly][data-v-83cb4f87] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-83cb4f87] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-83cb4f87]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-83cb4f87]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-83cb4f87]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-83cb4f87] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-83cb4f87]:nth-child(odd), .list-card-desktop__wrapper[data-v-83cb4f87]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-83cb4f87]:nth-child(even), .list-card-desktop__wrapper[data-v-83cb4f87]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-83cb4f87]:nth-child(odd), .listCardDesktopWrapper[data-v-83cb4f87]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-83cb4f87]:nth-child(even), .listCardDesktopWrapper[data-v-83cb4f87]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-83cb4f87] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-83cb4f87] { cursor: pointer; } .card-layout--selectionnable[data-v-83cb4f87]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-83cb4f87] { cursor: auto; } .card-layout--drawer[data-v-83cb4f87] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-83cb4f87] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-83cb4f87] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-83cb4f87] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-83cb4f87] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-83cb4f87] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-83cb4f87]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-83cb4f87] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-83cb4f87] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-83cb4f87] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-83cb4f87] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-83cb4f87] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-83cb4f87] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-83cb4f87] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-83cb4f87] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-83cb4f87] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-83cb4f87] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-83cb4f87] { background-color: #eb1515; } .color-chip--dossiers[data-v-83cb4f87] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-83cb4f87] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-83cb4f87] { background-color: #00a79b; } .color-chip--virements[data-v-83cb4f87] { background-color: var(--secondary-400); } .color-chip--factures[data-v-83cb4f87] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-83cb4f87] { background-color: #eb1515; } .color-recherche-dossiers[data-v-83cb4f87] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-83cb4f87] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-83cb4f87] { background-color: #00a79b; } .color-recherche-virements[data-v-83cb4f87] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-83cb4f87] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-83cb4f87] { color: #00a79b; cursor: pointer; } .scrollable[data-v-83cb4f87] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-83cb4f87] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-83cb4f87] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-83cb4f87] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-83cb4f87] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-83cb4f87] { font-weight: 800; } .grid-cell--column[data-v-83cb4f87] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-83cb4f87] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-83cb4f87] { fill: #00a79b; } .grid-cell--disabled[data-v-83cb4f87] { color: #cccccc; } .grid-cell--disabled svg[data-v-83cb4f87] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-83cb4f87] { white-space: nowrap; } .grid-cell--danger svg[data-v-83cb4f87] { fill: #eb1515; } .grid-cell--span-1[data-v-83cb4f87] { grid-column: span 1; } .grid-cell--span-2[data-v-83cb4f87] { grid-column: span 2; } .grid-cell--span-3[data-v-83cb4f87] { grid-column: span 3; } .grid-cell--span-4[data-v-83cb4f87] { grid-column: span 4; } .grid-cell--span-5[data-v-83cb4f87] { grid-column: span 5; } .grid-cell--span-6[data-v-83cb4f87] { grid-column: span 6; } .grid-cell--span-7[data-v-83cb4f87] { grid-column: span 7; } .grid-cell--span-8[data-v-83cb4f87] { grid-column: span 8; } .grid-cell--span-9[data-v-83cb4f87] { grid-column: span 9; } .grid-cell--span-10[data-v-83cb4f87] { grid-column: span 10; } .grid-cell--span-12[data-v-83cb4f87] { grid-column: span 12; } .grid-cell--span-13[data-v-83cb4f87] { grid-column: span 13; } .grid-cell--span-14[data-v-83cb4f87] { grid-column: span 14; } .grid-cell--span-16[data-v-83cb4f87] { grid-column: span 16; } .grid-cell--span-18[data-v-83cb4f87] { grid-column: span 18; } .grid-cell--span-20[data-v-83cb4f87] { grid-column: span 20; } .grid-cell--span-32[data-v-83cb4f87] { grid-column: span 32; } .grid-cell--span-36[data-v-83cb4f87] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-83cb4f87] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-83cb4f87] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-83cb4f87] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-83cb4f87] { justify-content: center !important; } .elem--bold span[data-v-83cb4f87] { font-weight: 800; } .elem--column[data-v-83cb4f87] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-83cb4f87] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-83cb4f87] { fill: #00a79b; } .elem--clickable[data-v-83cb4f87]:hover { cursor: pointer; } .elem--disabled[data-v-83cb4f87] { color: #cccccc; } .elem--disabled svg[data-v-83cb4f87] { fill: #cccccc; } .elem--nowrap span[data-v-83cb4f87] { white-space: nowrap; } .elem--danger svg[data-v-83cb4f87] { fill: #eb1515; } .elem--span-1[data-v-83cb4f87] { grid-column: span 1; } .elem--span-2[data-v-83cb4f87] { grid-column: span 2; } .elem--span-3[data-v-83cb4f87] { grid-column: span 3; } .elem--span-4[data-v-83cb4f87] { grid-column: span 4; } .elem--span-5[data-v-83cb4f87] { grid-column: span 5; } .elem--span-6[data-v-83cb4f87] { grid-column: span 6; } .elem--span-7[data-v-83cb4f87] { grid-column: span 7; } .elem--span-8[data-v-83cb4f87] { grid-column: span 8; } .elem--span-9[data-v-83cb4f87] { grid-column: span 9; } .elem--span-10[data-v-83cb4f87] { grid-column: span 10; } .elem--span-12[data-v-83cb4f87] { grid-column: span 12; } .elem--span-13[data-v-83cb4f87] { grid-column: span 13; } .elem--span-14[data-v-83cb4f87] { grid-column: span 14; } .elem--span-16[data-v-83cb4f87] { grid-column: span 16; } .elem--span-18[data-v-83cb4f87] { grid-column: span 18; } .elem--span-20[data-v-83cb4f87] { grid-column: span 20; } .elem--span-32[data-v-83cb4f87] { grid-column: span 32; } .elem--span-36[data-v-83cb4f87] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-83cb4f87] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-83cb4f87] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-83cb4f87]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-83cb4f87] { display: flex; } /* flex-direction */ .flex-column[data-v-83cb4f87] { flex-direction: column; } .flex-row[data-v-83cb4f87] { flex-direction: row; } /* flex */ .flex-1[data-v-83cb4f87] { flex: 1 !important; } .flex-2[data-v-83cb4f87] { flex: 2; } .flex-3[data-v-83cb4f87] { flex: 3; } .flex-3[data-v-83cb4f87] { flex: 4; } .flex-5[data-v-83cb4f87] { flex: 5; } .flex-auto[data-v-83cb4f87] { flex: auto; } .flex-none[data-v-83cb4f87] { flex: none; } .flex-content[data-v-83cb4f87] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-83cb4f87] { flex-wrap: wrap; } .flex-nowrap[data-v-83cb4f87] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-83cb4f87] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-83cb4f87] { justify-content: flex-start; } .justify-content-end[data-v-83cb4f87] { justify-content: flex-end; } .justify-content-baseline[data-v-83cb4f87] { justify-content: baseline; } .justify-content-center[data-v-83cb4f87] { justify-content: center; } .justify-content-space-between[data-v-83cb4f87] { justify-content: space-between; } .justify-content-space-around[data-v-83cb4f87] { justify-content: space-around; } .justify-content-space-evenly[data-v-83cb4f87] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-83cb4f87] { align-items: flex-start; } .align-items-flex-end[data-v-83cb4f87] { align-items: flex-end; } .align-items-stretch[data-v-83cb4f87] { align-items: stretch; } .align-items-baseline[data-v-83cb4f87] { align-items: baseline; } .align-items-center[data-v-83cb4f87] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-83cb4f87] { align-content: flex-start; } .align-content-flex-end[data-v-83cb4f87] { align-content: flex-end; } .align-content-center[data-v-83cb4f87] { align-content: center; } .align-content-stretch[data-v-83cb4f87] { align-content: stretch; } .align-content-space-between[data-v-83cb4f87] { align-content: space-between; } .align-content-space-around[data-v-83cb4f87] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-83cb4f87] { align-self: flex-start; } .align-self-flex-end[data-v-83cb4f87] { align-self: flex-end; } .align-self-stretch[data-v-83cb4f87] { align-self: stretch; } .align-self-flex-baseline[data-v-83cb4f87] { align-self: baseline; } .align-self-center[data-v-83cb4f87] { align-self: center; } .align-self-auto[data-v-83cb4f87] { align-self: auto; } .flex-gap-1[data-v-83cb4f87] { gap: 4px; } .flex-gap-2[data-v-83cb4f87] { gap: 8px; } .flex-gap-3[data-v-83cb4f87] { gap: 12px; } .flex-gap-4[data-v-83cb4f87] { gap: 16px; } .flex-gap-5[data-v-83cb4f87] { gap: 20px; } .flex-gap-6[data-v-83cb4f87] { gap: 24px; } .flex-gap-7[data-v-83cb4f87] { gap: 28px; } .flex-gap-8[data-v-83cb4f87] { gap: 32px; } .flex-gap-10[data-v-83cb4f87] { gap: 40px; } .flex-gap-12[data-v-83cb4f87] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-83cb4f87] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-83cb4f87] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-83cb4f87] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-83cb4f87] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-83cb4f87] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-83cb4f87] { display: none !important; } } .col-none[data-v-83cb4f87] { display: none; } .col-auto[data-v-83cb4f87] { grid-column: auto; } .col-1[data-v-83cb4f87] { grid-column: span 1; } .col-2[data-v-83cb4f87] { grid-column: span 2; } .col-3[data-v-83cb4f87] { grid-column: span 3; } .col-4[data-v-83cb4f87] { grid-column: span 4; } .col-5[data-v-83cb4f87] { grid-column: span 5; } .col-6[data-v-83cb4f87] { grid-column: span 6; } .col-7[data-v-83cb4f87] { grid-column: span 7; } .col-8[data-v-83cb4f87] { grid-column: span 8; } .col-9[data-v-83cb4f87] { grid-column: span 9; } .col-10[data-v-83cb4f87] { grid-column: span 10; } .col-12[data-v-83cb4f87] { grid-column: span 12; } .col-13[data-v-83cb4f87] { grid-column: span 13; } .col-14[data-v-83cb4f87] { grid-column: span 14; } .col-15[data-v-83cb4f87] { grid-column: span 15; } .col-16[data-v-83cb4f87] { grid-column: span 16; } .col-18[data-v-83cb4f87] { grid-column: span 18; } .col-20[data-v-83cb4f87] { grid-column: span 20; } .col-22[data-v-83cb4f87] { grid-column: span 22; } .col-24[data-v-83cb4f87] { grid-column: span 24; } .col-26[data-v-83cb4f87] { grid-column: span 26; } .col-27[data-v-83cb4f87] { grid-column: span 27; } .col-28[data-v-83cb4f87] { grid-column: span 28; } .col-30[data-v-83cb4f87] { grid-column: span 30; } .col-36[data-v-83cb4f87] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-83cb4f87] { display: none; } .col-md-36[data-v-83cb4f87] { grid-column: span 36; } .col-md-28[data-v-83cb4f87] { grid-column: span 28; } .col-md-27[data-v-83cb4f87] { grid-column: span 27; } .col-md-24[data-v-83cb4f87] { grid-column: span 24; } .col-md-22[data-v-83cb4f87] { grid-column: span 22; } .col-md-20[data-v-83cb4f87] { grid-column: span 20; } .col-md-19[data-v-83cb4f87] { grid-column: span 19; } .col-md-18[data-v-83cb4f87] { grid-column: span 18; } .col-md-17[data-v-83cb4f87] { grid-column: span 17; } .col-md-16[data-v-83cb4f87] { grid-column: span 16; } .col-md-15[data-v-83cb4f87] { grid-column: span 15; } .col-md-14[data-v-83cb4f87] { grid-column: span 14; } .col-md-13[data-v-83cb4f87] { grid-column: span 13; } .col-md-12[data-v-83cb4f87] { grid-column: span 12; } .col-md-10[data-v-83cb4f87] { grid-column: span 10; } .col-md-9[data-v-83cb4f87] { grid-column: span 9; } .col-md-8[data-v-83cb4f87] { grid-column: span 8; } .col-md-6[data-v-83cb4f87] { grid-column: span 6; } .col-md-5[data-v-83cb4f87] { grid-column: span 5; } .col-md-4[data-v-83cb4f87] { grid-column: span 4; } .col-md-3[data-v-83cb4f87] { grid-column: span 3; } .col-md-2[data-v-83cb4f87] { grid-column: span 2; } .col-md-1[data-v-83cb4f87] { grid-column: span 1; } .col-md-auto[data-v-83cb4f87] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-83cb4f87] { display: none; } .col-sm-36[data-v-83cb4f87] { grid-column: span 36; } .col-sm-32[data-v-83cb4f87] { grid-column: span 32; } .col-sm-28[data-v-83cb4f87] { grid-column: span 28; } .col-sm-27[data-v-83cb4f87] { grid-column: span 27; } .col-sm-24[data-v-83cb4f87] { grid-column: span 24; } .col-sm-22[data-v-83cb4f87] { grid-column: span 22; } .col-sm-20[data-v-83cb4f87] { grid-column: span 20; } .col-sm-18[data-v-83cb4f87] { grid-column: span 18; } .col-sm-16[data-v-83cb4f87] { grid-column: span 16; } .col-sm-15[data-v-83cb4f87] { grid-column: span 15; } .col-sm-14[data-v-83cb4f87] { grid-column: span 14; } .col-sm-13[data-v-83cb4f87] { grid-column: span 12; } .col-sm-12[data-v-83cb4f87] { grid-column: span 12; } .col-sm-10[data-v-83cb4f87] { grid-column: span 10; } .col-sm-9[data-v-83cb4f87] { grid-column: span 8; } .col-sm-8[data-v-83cb4f87] { grid-column: span 8; } .col-sm-6[data-v-83cb4f87] { grid-column: span 6; } .col-sm-4[data-v-83cb4f87] { grid-column: span 4; } .col-sm-auto[data-v-83cb4f87] { grid-column: auto; } } .fade-enter-active[data-v-83cb4f87] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-83cb4f87] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-83cb4f87], .fade-leave-to[data-v-83cb4f87] { opacity: 0; } /* ══════════════════════════════════════════════════════════════ MODAL COMPONENT — Light/Dark Theme Support ══════════════════════════════════════════════════════════════ Utilise les variables CSS sémantiques de semantic-theme.less: - --modal-backdrop, --modal-bg, --modal-header-bg, --modal-border - --scrollbar-thumb, --scrollbar-track ══════════════════════════════════════════════════════════════ */ .modal[data-v-83cb4f87] { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 4000; backdrop-filter: blur(8px) saturate(150%); background: var(--modal-backdrop); padding: 100px 16px; box-sizing: border-box; animation: fadeInBackdrop-83cb4f87 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes fadeInBackdrop-83cb4f87 { from { opacity: 0; } to { opacity: 1; } } .modal__dialog[data-v-83cb4f87] { display: flex; flex-direction: column; max-height: calc(100vh - 200px); width: 100%; max-width: 700px; background: var(--modal-bg); border-radius: 20px; border: 1px solid var(--modal-border); box-shadow: var(--shadow-xl); overflow: hidden; position: relative; } .modal__dialog[data-v-83cb4f87]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); z-index: 2; } .modal__dialog[data-v-83cb4f87]::after { content: ''; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(var(--primary-500-rgb), 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; } .modal__header[data-v-83cb4f87] { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 28px 32px; background: var(--modal-header-bg); color: var(--text-primary); border-top-left-radius: 20px; border-top-right-radius: 20px; position: relative; z-index: 1; border-bottom: 1px solid var(--modal-border); /* le titre (slot header) */ /* l'icône de fermeture */ } .modal__header[data-v-83cb4f87]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary-500), var(--primary-300)); } .modal__header .basic-text[data-v-83cb4f87], .modal__header h4[data-v-83cb4f87], .modal__header span[data-v-83cb4f87], .modal__header div[data-v-83cb4f87] { margin: 0; color: var(--text-primary); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; position: relative; z-index: 1; } .modal__header svg[data-v-83cb4f87] { flex-shrink: 0; cursor: pointer; fill: var(--text-secondary); width: 24px; height: 24px; padding: 8px; border-radius: 8px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; background: var(--hover-overlay); } .modal__header svg[data-v-83cb4f87]:hover { background: var(--active-overlay); fill: var(--text-primary); transform: rotate(90deg); } .modal__header svg[data-v-83cb4f87]:active { transform: rotate(90deg) scale(0.95); } .modal__content[data-v-83cb4f87] { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px; position: relative; z-index: 1; color: var(--text-primary); } .modal__content[data-v-83cb4f87]::-webkit-scrollbar { width: 10px; } .modal__content[data-v-83cb4f87]::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 10px; margin: 8px 0; } .modal__content[data-v-83cb4f87]::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; border: 2px solid transparent; } .modal__content[data-v-83cb4f87]::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } .modal__content svg[data-v-83cb4f87] { fill: var(--text-muted); } .modal__actions[data-v-83cb4f87] { flex-shrink: 0; padding: 20px 32px 28px 32px; border-top: 1px solid var(--modal-border); background: var(--modal-bg); z-index: 1; position: relative; } .modal__actions[data-v-83cb4f87]::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; background: linear-gradient(to top, var(--shadow-color), transparent); pointer-events: none; } @media (max-height: 700px) { .modal[data-v-83cb4f87] { padding: 50px 8px; } .modal__dialog[data-v-83cb4f87] { max-height: calc(100vh - 100px); border-radius: 16px; } .modal__header[data-v-83cb4f87] { padding: 20px 24px; border-top-left-radius: 16px; border-top-right-radius: 16px; } .modal__header .basic-text[data-v-83cb4f87], .modal__header h4[data-v-83cb4f87], .modal__header span[data-v-83cb4f87], .modal__header div[data-v-83cb4f87] { font-size: 1rem; } .modal__header svg[data-v-83cb4f87] { width: 20px; height: 20px; } .modal__actions[data-v-83cb4f87] { padding: 16px 24px 20px 24px; } } @media (max-width: 720px) { .modal[data-v-83cb4f87] { padding: 16px 12px; align-items: flex-end; } .modal__dialog[data-v-83cb4f87] { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: 20px 20px 0 0; max-width: 100%; width: 100%; margin: 0; } .modal__header[data-v-83cb4f87] { padding: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .modal__header[data-v-83cb4f87]::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; } .modal__header .basic-text[data-v-83cb4f87], .modal__header h4[data-v-83cb4f87], .modal__header span[data-v-83cb4f87], .modal__header div[data-v-83cb4f87] { font-size: 1rem; padding-top: 8px; } .modal__content[data-v-83cb4f87] { padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .modal__actions[data-v-83cb4f87] { padding: 16px 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); flex-direction: column; gap: 10px; } .modal__actions[data-v-83cb4f87] > * { width: 100%; } } .modal__dialog[data-v-83cb4f87] { transform-origin: center center; will-change: opacity, transform; } .modal__content[data-v-83cb4f87] { position: relative; min-height: 120px; } .modal__close-icon[data-v-83cb4f87] { position: absolute; top: 8px; right: 8px; } .modal__actions[data-v-83cb4f87] { display: flex; justify-content: space-around; gap: 8px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-f27e1458]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-f27e1458] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-f27e1458] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-f27e1458]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-f27e1458], .theme-mode-light[data-v-f27e1458] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-f27e1458], .theme-mode-dark[data-v-f27e1458] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-f27e1458]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-f27e1458]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-f27e1458] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-f27e1458] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-f27e1458]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-f27e1458], input[disabled][data-v-f27e1458] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-f27e1458] { opacity: 0.9; } input[readonly][data-v-f27e1458] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-f27e1458] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-f27e1458]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-f27e1458]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-f27e1458]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-f27e1458] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-f27e1458]:nth-child(odd), .list-card-desktop__wrapper[data-v-f27e1458]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-f27e1458]:nth-child(even), .list-card-desktop__wrapper[data-v-f27e1458]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-f27e1458]:nth-child(odd), .listCardDesktopWrapper[data-v-f27e1458]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-f27e1458]:nth-child(even), .listCardDesktopWrapper[data-v-f27e1458]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-f27e1458] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-f27e1458] { cursor: pointer; } .card-layout--selectionnable[data-v-f27e1458]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-f27e1458] { cursor: auto; } .card-layout--drawer[data-v-f27e1458] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-f27e1458] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-f27e1458] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-f27e1458] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-f27e1458] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-f27e1458] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-f27e1458]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-f27e1458] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-f27e1458] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-f27e1458] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-f27e1458] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-f27e1458] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-f27e1458] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-f27e1458] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-f27e1458] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-f27e1458] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-f27e1458] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-f27e1458] { background-color: #eb1515; } .color-chip--dossiers[data-v-f27e1458] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-f27e1458] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-f27e1458] { background-color: #00a79b; } .color-chip--virements[data-v-f27e1458] { background-color: var(--secondary-400); } .color-chip--factures[data-v-f27e1458] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-f27e1458] { background-color: #eb1515; } .color-recherche-dossiers[data-v-f27e1458] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-f27e1458] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-f27e1458] { background-color: #00a79b; } .color-recherche-virements[data-v-f27e1458] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-f27e1458] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-f27e1458] { color: #00a79b; cursor: pointer; } .scrollable[data-v-f27e1458] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-f27e1458] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-f27e1458] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-f27e1458] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-f27e1458] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-f27e1458] { font-weight: 800; } .grid-cell--column[data-v-f27e1458] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-f27e1458] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-f27e1458] { fill: #00a79b; } .grid-cell--disabled[data-v-f27e1458] { color: #cccccc; } .grid-cell--disabled svg[data-v-f27e1458] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-f27e1458] { white-space: nowrap; } .grid-cell--danger svg[data-v-f27e1458] { fill: #eb1515; } .grid-cell--span-1[data-v-f27e1458] { grid-column: span 1; } .grid-cell--span-2[data-v-f27e1458] { grid-column: span 2; } .grid-cell--span-3[data-v-f27e1458] { grid-column: span 3; } .grid-cell--span-4[data-v-f27e1458] { grid-column: span 4; } .grid-cell--span-5[data-v-f27e1458] { grid-column: span 5; } .grid-cell--span-6[data-v-f27e1458] { grid-column: span 6; } .grid-cell--span-7[data-v-f27e1458] { grid-column: span 7; } .grid-cell--span-8[data-v-f27e1458] { grid-column: span 8; } .grid-cell--span-9[data-v-f27e1458] { grid-column: span 9; } .grid-cell--span-10[data-v-f27e1458] { grid-column: span 10; } .grid-cell--span-12[data-v-f27e1458] { grid-column: span 12; } .grid-cell--span-13[data-v-f27e1458] { grid-column: span 13; } .grid-cell--span-14[data-v-f27e1458] { grid-column: span 14; } .grid-cell--span-16[data-v-f27e1458] { grid-column: span 16; } .grid-cell--span-18[data-v-f27e1458] { grid-column: span 18; } .grid-cell--span-20[data-v-f27e1458] { grid-column: span 20; } .grid-cell--span-32[data-v-f27e1458] { grid-column: span 32; } .grid-cell--span-36[data-v-f27e1458] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-f27e1458] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-f27e1458] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-f27e1458] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-f27e1458] { justify-content: center !important; } .elem--bold span[data-v-f27e1458] { font-weight: 800; } .elem--column[data-v-f27e1458] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-f27e1458] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-f27e1458] { fill: #00a79b; } .elem--clickable[data-v-f27e1458]:hover { cursor: pointer; } .elem--disabled[data-v-f27e1458] { color: #cccccc; } .elem--disabled svg[data-v-f27e1458] { fill: #cccccc; } .elem--nowrap span[data-v-f27e1458] { white-space: nowrap; } .elem--danger svg[data-v-f27e1458] { fill: #eb1515; } .elem--span-1[data-v-f27e1458] { grid-column: span 1; } .elem--span-2[data-v-f27e1458] { grid-column: span 2; } .elem--span-3[data-v-f27e1458] { grid-column: span 3; } .elem--span-4[data-v-f27e1458] { grid-column: span 4; } .elem--span-5[data-v-f27e1458] { grid-column: span 5; } .elem--span-6[data-v-f27e1458] { grid-column: span 6; } .elem--span-7[data-v-f27e1458] { grid-column: span 7; } .elem--span-8[data-v-f27e1458] { grid-column: span 8; } .elem--span-9[data-v-f27e1458] { grid-column: span 9; } .elem--span-10[data-v-f27e1458] { grid-column: span 10; } .elem--span-12[data-v-f27e1458] { grid-column: span 12; } .elem--span-13[data-v-f27e1458] { grid-column: span 13; } .elem--span-14[data-v-f27e1458] { grid-column: span 14; } .elem--span-16[data-v-f27e1458] { grid-column: span 16; } .elem--span-18[data-v-f27e1458] { grid-column: span 18; } .elem--span-20[data-v-f27e1458] { grid-column: span 20; } .elem--span-32[data-v-f27e1458] { grid-column: span 32; } .elem--span-36[data-v-f27e1458] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-f27e1458] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-f27e1458] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-f27e1458]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-f27e1458] { display: flex; } /* flex-direction */ .flex-column[data-v-f27e1458] { flex-direction: column; } .flex-row[data-v-f27e1458] { flex-direction: row; } /* flex */ .flex-1[data-v-f27e1458] { flex: 1 !important; } .flex-2[data-v-f27e1458] { flex: 2; } .flex-3[data-v-f27e1458] { flex: 3; } .flex-3[data-v-f27e1458] { flex: 4; } .flex-5[data-v-f27e1458] { flex: 5; } .flex-auto[data-v-f27e1458] { flex: auto; } .flex-none[data-v-f27e1458] { flex: none; } .flex-content[data-v-f27e1458] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-f27e1458] { flex-wrap: wrap; } .flex-nowrap[data-v-f27e1458] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-f27e1458] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-f27e1458] { justify-content: flex-start; } .justify-content-end[data-v-f27e1458] { justify-content: flex-end; } .justify-content-baseline[data-v-f27e1458] { justify-content: baseline; } .justify-content-center[data-v-f27e1458] { justify-content: center; } .justify-content-space-between[data-v-f27e1458] { justify-content: space-between; } .justify-content-space-around[data-v-f27e1458] { justify-content: space-around; } .justify-content-space-evenly[data-v-f27e1458] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-f27e1458] { align-items: flex-start; } .align-items-flex-end[data-v-f27e1458] { align-items: flex-end; } .align-items-stretch[data-v-f27e1458] { align-items: stretch; } .align-items-baseline[data-v-f27e1458] { align-items: baseline; } .align-items-center[data-v-f27e1458] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-f27e1458] { align-content: flex-start; } .align-content-flex-end[data-v-f27e1458] { align-content: flex-end; } .align-content-center[data-v-f27e1458] { align-content: center; } .align-content-stretch[data-v-f27e1458] { align-content: stretch; } .align-content-space-between[data-v-f27e1458] { align-content: space-between; } .align-content-space-around[data-v-f27e1458] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-f27e1458] { align-self: flex-start; } .align-self-flex-end[data-v-f27e1458] { align-self: flex-end; } .align-self-stretch[data-v-f27e1458] { align-self: stretch; } .align-self-flex-baseline[data-v-f27e1458] { align-self: baseline; } .align-self-center[data-v-f27e1458] { align-self: center; } .align-self-auto[data-v-f27e1458] { align-self: auto; } .flex-gap-1[data-v-f27e1458] { gap: 4px; } .flex-gap-2[data-v-f27e1458] { gap: 8px; } .flex-gap-3[data-v-f27e1458] { gap: 12px; } .flex-gap-4[data-v-f27e1458] { gap: 16px; } .flex-gap-5[data-v-f27e1458] { gap: 20px; } .flex-gap-6[data-v-f27e1458] { gap: 24px; } .flex-gap-7[data-v-f27e1458] { gap: 28px; } .flex-gap-8[data-v-f27e1458] { gap: 32px; } .flex-gap-10[data-v-f27e1458] { gap: 40px; } .flex-gap-12[data-v-f27e1458] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-f27e1458] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-f27e1458] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-f27e1458] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-f27e1458] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-f27e1458] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-f27e1458] { display: none !important; } } .col-none[data-v-f27e1458] { display: none; } .col-auto[data-v-f27e1458] { grid-column: auto; } .col-1[data-v-f27e1458] { grid-column: span 1; } .col-2[data-v-f27e1458] { grid-column: span 2; } .col-3[data-v-f27e1458] { grid-column: span 3; } .col-4[data-v-f27e1458] { grid-column: span 4; } .col-5[data-v-f27e1458] { grid-column: span 5; } .col-6[data-v-f27e1458] { grid-column: span 6; } .col-7[data-v-f27e1458] { grid-column: span 7; } .col-8[data-v-f27e1458] { grid-column: span 8; } .col-9[data-v-f27e1458] { grid-column: span 9; } .col-10[data-v-f27e1458] { grid-column: span 10; } .col-12[data-v-f27e1458] { grid-column: span 12; } .col-13[data-v-f27e1458] { grid-column: span 13; } .col-14[data-v-f27e1458] { grid-column: span 14; } .col-15[data-v-f27e1458] { grid-column: span 15; } .col-16[data-v-f27e1458] { grid-column: span 16; } .col-18[data-v-f27e1458] { grid-column: span 18; } .col-20[data-v-f27e1458] { grid-column: span 20; } .col-22[data-v-f27e1458] { grid-column: span 22; } .col-24[data-v-f27e1458] { grid-column: span 24; } .col-26[data-v-f27e1458] { grid-column: span 26; } .col-27[data-v-f27e1458] { grid-column: span 27; } .col-28[data-v-f27e1458] { grid-column: span 28; } .col-30[data-v-f27e1458] { grid-column: span 30; } .col-36[data-v-f27e1458] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-f27e1458] { display: none; } .col-md-36[data-v-f27e1458] { grid-column: span 36; } .col-md-28[data-v-f27e1458] { grid-column: span 28; } .col-md-27[data-v-f27e1458] { grid-column: span 27; } .col-md-24[data-v-f27e1458] { grid-column: span 24; } .col-md-22[data-v-f27e1458] { grid-column: span 22; } .col-md-20[data-v-f27e1458] { grid-column: span 20; } .col-md-19[data-v-f27e1458] { grid-column: span 19; } .col-md-18[data-v-f27e1458] { grid-column: span 18; } .col-md-17[data-v-f27e1458] { grid-column: span 17; } .col-md-16[data-v-f27e1458] { grid-column: span 16; } .col-md-15[data-v-f27e1458] { grid-column: span 15; } .col-md-14[data-v-f27e1458] { grid-column: span 14; } .col-md-13[data-v-f27e1458] { grid-column: span 13; } .col-md-12[data-v-f27e1458] { grid-column: span 12; } .col-md-10[data-v-f27e1458] { grid-column: span 10; } .col-md-9[data-v-f27e1458] { grid-column: span 9; } .col-md-8[data-v-f27e1458] { grid-column: span 8; } .col-md-6[data-v-f27e1458] { grid-column: span 6; } .col-md-5[data-v-f27e1458] { grid-column: span 5; } .col-md-4[data-v-f27e1458] { grid-column: span 4; } .col-md-3[data-v-f27e1458] { grid-column: span 3; } .col-md-2[data-v-f27e1458] { grid-column: span 2; } .col-md-1[data-v-f27e1458] { grid-column: span 1; } .col-md-auto[data-v-f27e1458] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-f27e1458] { display: none; } .col-sm-36[data-v-f27e1458] { grid-column: span 36; } .col-sm-32[data-v-f27e1458] { grid-column: span 32; } .col-sm-28[data-v-f27e1458] { grid-column: span 28; } .col-sm-27[data-v-f27e1458] { grid-column: span 27; } .col-sm-24[data-v-f27e1458] { grid-column: span 24; } .col-sm-22[data-v-f27e1458] { grid-column: span 22; } .col-sm-20[data-v-f27e1458] { grid-column: span 20; } .col-sm-18[data-v-f27e1458] { grid-column: span 18; } .col-sm-16[data-v-f27e1458] { grid-column: span 16; } .col-sm-15[data-v-f27e1458] { grid-column: span 15; } .col-sm-14[data-v-f27e1458] { grid-column: span 14; } .col-sm-13[data-v-f27e1458] { grid-column: span 12; } .col-sm-12[data-v-f27e1458] { grid-column: span 12; } .col-sm-10[data-v-f27e1458] { grid-column: span 10; } .col-sm-9[data-v-f27e1458] { grid-column: span 8; } .col-sm-8[data-v-f27e1458] { grid-column: span 8; } .col-sm-6[data-v-f27e1458] { grid-column: span 6; } .col-sm-4[data-v-f27e1458] { grid-column: span 4; } .col-sm-auto[data-v-f27e1458] { grid-column: auto; } } .fade-enter-active[data-v-f27e1458] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-f27e1458] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-f27e1458], .fade-leave-to[data-v-f27e1458] { opacity: 0; } .news-form[data-v-f27e1458] { display: flex; flex-direction: column; gap: 28px; padding: 16px; overflow-x: hidden; } .custom-textarea[data-v-f27e1458] { border: 2px solid #e2e7ef; border-radius: 12px; padding: 14px 16px; font-size: 14px; width: 100%; resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.6; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .custom-textarea[data-v-f27e1458]:hover { border-color: var(--primary-300); } .custom-textarea[data-v-f27e1458]:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(var(--primary-500-rgb), 0.1), 0 2px 8px rgba(var(--primary-500-rgb), 0.15); background: #ffffff; } .custom-textarea[data-v-f27e1458]:read-only { background: #f8f9fb; color: #647184; cursor: not-allowed; } .custom-textarea[data-v-f27e1458]::placeholder { color: #b4bfce; } .image-preview[data-v-f27e1458] { margin-top: 16px; padding: 20px; border: 2px dashed var(--primary-200); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.03) 0%, rgba(var(--primary-300-rgb), 0.05) 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; overflow: hidden; } .image-preview[data-v-f27e1458]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: radial-gradient(circle at 50% 0%, rgba(var(--primary-500-rgb), 0.05) 0%, transparent 70%); pointer-events: none; } .image-preview img[data-v-f27e1458] { max-width: 320px; max-height: 220px; width: 100%; height: auto; border-radius: 12px; object-fit: contain; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; } .image-preview img[data-v-f27e1458]:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); } .image-preview img-actions[data-v-f27e1458] { display: flex; gap: 12px; justify-content: center; z-index: 1; position: relative; } .image-preview img-actions button[data-v-f27e1458] { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .image-preview img-actions button[data-v-f27e1458]:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .image-preview img-actions button[data-v-f27e1458]:active { opacity: 0.9; } .hidden-input[data-v-f27e1458] { display: none; } .news-form[data-v-f27e1458] > * { animation: fadeInUp-f27e1458 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .news-form[data-v-f27e1458] > *:nth-child(1) { animation-delay: 0.05s; } .news-form[data-v-f27e1458] > *:nth-child(2) { animation-delay: 0.1s; } .news-form[data-v-f27e1458] > *:nth-child(3) { animation-delay: 0.15s; } .news-form[data-v-f27e1458] > *:nth-child(4) { animation-delay: 0.2s; } .news-form[data-v-f27e1458] > *:nth-child(5) { animation-delay: 0.25s; } @keyframes fadeInUp-f27e1458 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .translations-section[data-v-f27e1458] { margin-top: 8px; border: 2px dashed var(--primary-200); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.02) 0%, rgba(var(--secondary-500-rgb), 0.02) 100%); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .translations-section[data-v-f27e1458]:hover { border-color: var(--primary-300); box-shadow: 0 4px 12px rgba(var(--primary-500-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); } .translations-section .translations-header[data-v-f27e1458] { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.05) 0%, rgba(var(--primary-300-rgb), 0.03) 100%); cursor: pointer; transition: all 0.2s; user-select: none; } .translations-section .translations-header[data-v-f27e1458]:hover { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.08) 0%, rgba(var(--primary-300-rgb), 0.06) 100%); } .translations-section .translations-header[data-v-f27e1458]:active { transform: scale(0.99); } .translations-section .translations-content[data-v-f27e1458] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; background: #ffffff; animation: slideDown-f27e1458 0.3s ease-out; } @media (max-width: 720px) { .translations-section .translations-content[data-v-f27e1458] { grid-template-columns: 1fr; gap: 20px; padding: 16px; } } .translations-section .language-group[data-v-f27e1458] { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); border-radius: 12px; border: 1px solid #e2e7ef; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04); } .translations-section .language-group .language-title[data-v-f27e1458] { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--primary-100); margin-bottom: 4px; } @keyframes slideDown-f27e1458 { from { opacity: 0; max-height: 0; transform: translateY(-10px); } to { opacity: 1; max-height: 1000px; transform: translateY(0); } } @media (max-width: 720px) { .news-form[data-v-f27e1458] { gap: 20px; padding: 4px; } .custom-textarea[data-v-f27e1458] { min-height: 100px; padding: 12px; } .image-preview img[data-v-f27e1458] { max-width: 240px; max-height: 180px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-d47b4589]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-d47b4589] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-d47b4589] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-d47b4589]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-d47b4589], .theme-mode-light[data-v-d47b4589] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-d47b4589], .theme-mode-dark[data-v-d47b4589] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-d47b4589]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-d47b4589]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-d47b4589] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-d47b4589] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-d47b4589]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-d47b4589], input[disabled][data-v-d47b4589] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-d47b4589] { opacity: 0.9; } input[readonly][data-v-d47b4589] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-d47b4589] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-d47b4589]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-d47b4589]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-d47b4589]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-d47b4589] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-d47b4589]:nth-child(odd), .list-card-desktop__wrapper[data-v-d47b4589]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-d47b4589]:nth-child(even), .list-card-desktop__wrapper[data-v-d47b4589]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-d47b4589]:nth-child(odd), .listCardDesktopWrapper[data-v-d47b4589]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-d47b4589]:nth-child(even), .listCardDesktopWrapper[data-v-d47b4589]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-d47b4589] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-d47b4589] { cursor: pointer; } .card-layout--selectionnable[data-v-d47b4589]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-d47b4589] { cursor: auto; } .card-layout--drawer[data-v-d47b4589] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-d47b4589] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-d47b4589] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-d47b4589] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-d47b4589] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-d47b4589] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-d47b4589]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-d47b4589] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-d47b4589] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-d47b4589] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-d47b4589] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-d47b4589] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-d47b4589] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-d47b4589] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-d47b4589] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-d47b4589] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-d47b4589] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-d47b4589] { background-color: #eb1515; } .color-chip--dossiers[data-v-d47b4589] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-d47b4589] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-d47b4589] { background-color: #00a79b; } .color-chip--virements[data-v-d47b4589] { background-color: var(--secondary-400); } .color-chip--factures[data-v-d47b4589] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-d47b4589] { background-color: #eb1515; } .color-recherche-dossiers[data-v-d47b4589] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-d47b4589] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-d47b4589] { background-color: #00a79b; } .color-recherche-virements[data-v-d47b4589] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-d47b4589] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-d47b4589] { color: #00a79b; cursor: pointer; } .scrollable[data-v-d47b4589] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-d47b4589] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-d47b4589] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-d47b4589] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-d47b4589] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-d47b4589] { font-weight: 800; } .grid-cell--column[data-v-d47b4589] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-d47b4589] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-d47b4589] { fill: #00a79b; } .grid-cell--disabled[data-v-d47b4589] { color: #cccccc; } .grid-cell--disabled svg[data-v-d47b4589] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-d47b4589] { white-space: nowrap; } .grid-cell--danger svg[data-v-d47b4589] { fill: #eb1515; } .grid-cell--span-1[data-v-d47b4589] { grid-column: span 1; } .grid-cell--span-2[data-v-d47b4589] { grid-column: span 2; } .grid-cell--span-3[data-v-d47b4589] { grid-column: span 3; } .grid-cell--span-4[data-v-d47b4589] { grid-column: span 4; } .grid-cell--span-5[data-v-d47b4589] { grid-column: span 5; } .grid-cell--span-6[data-v-d47b4589] { grid-column: span 6; } .grid-cell--span-7[data-v-d47b4589] { grid-column: span 7; } .grid-cell--span-8[data-v-d47b4589] { grid-column: span 8; } .grid-cell--span-9[data-v-d47b4589] { grid-column: span 9; } .grid-cell--span-10[data-v-d47b4589] { grid-column: span 10; } .grid-cell--span-12[data-v-d47b4589] { grid-column: span 12; } .grid-cell--span-13[data-v-d47b4589] { grid-column: span 13; } .grid-cell--span-14[data-v-d47b4589] { grid-column: span 14; } .grid-cell--span-16[data-v-d47b4589] { grid-column: span 16; } .grid-cell--span-18[data-v-d47b4589] { grid-column: span 18; } .grid-cell--span-20[data-v-d47b4589] { grid-column: span 20; } .grid-cell--span-32[data-v-d47b4589] { grid-column: span 32; } .grid-cell--span-36[data-v-d47b4589] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-d47b4589] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-d47b4589] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-d47b4589] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-d47b4589] { justify-content: center !important; } .elem--bold span[data-v-d47b4589] { font-weight: 800; } .elem--column[data-v-d47b4589] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-d47b4589] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-d47b4589] { fill: #00a79b; } .elem--clickable[data-v-d47b4589]:hover { cursor: pointer; } .elem--disabled[data-v-d47b4589] { color: #cccccc; } .elem--disabled svg[data-v-d47b4589] { fill: #cccccc; } .elem--nowrap span[data-v-d47b4589] { white-space: nowrap; } .elem--danger svg[data-v-d47b4589] { fill: #eb1515; } .elem--span-1[data-v-d47b4589] { grid-column: span 1; } .elem--span-2[data-v-d47b4589] { grid-column: span 2; } .elem--span-3[data-v-d47b4589] { grid-column: span 3; } .elem--span-4[data-v-d47b4589] { grid-column: span 4; } .elem--span-5[data-v-d47b4589] { grid-column: span 5; } .elem--span-6[data-v-d47b4589] { grid-column: span 6; } .elem--span-7[data-v-d47b4589] { grid-column: span 7; } .elem--span-8[data-v-d47b4589] { grid-column: span 8; } .elem--span-9[data-v-d47b4589] { grid-column: span 9; } .elem--span-10[data-v-d47b4589] { grid-column: span 10; } .elem--span-12[data-v-d47b4589] { grid-column: span 12; } .elem--span-13[data-v-d47b4589] { grid-column: span 13; } .elem--span-14[data-v-d47b4589] { grid-column: span 14; } .elem--span-16[data-v-d47b4589] { grid-column: span 16; } .elem--span-18[data-v-d47b4589] { grid-column: span 18; } .elem--span-20[data-v-d47b4589] { grid-column: span 20; } .elem--span-32[data-v-d47b4589] { grid-column: span 32; } .elem--span-36[data-v-d47b4589] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-d47b4589] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-d47b4589] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-d47b4589]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-d47b4589] { display: flex; } /* flex-direction */ .flex-column[data-v-d47b4589] { flex-direction: column; } .flex-row[data-v-d47b4589] { flex-direction: row; } /* flex */ .flex-1[data-v-d47b4589] { flex: 1 !important; } .flex-2[data-v-d47b4589] { flex: 2; } .flex-3[data-v-d47b4589] { flex: 3; } .flex-3[data-v-d47b4589] { flex: 4; } .flex-5[data-v-d47b4589] { flex: 5; } .flex-auto[data-v-d47b4589] { flex: auto; } .flex-none[data-v-d47b4589] { flex: none; } .flex-content[data-v-d47b4589] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-d47b4589] { flex-wrap: wrap; } .flex-nowrap[data-v-d47b4589] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-d47b4589] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-d47b4589] { justify-content: flex-start; } .justify-content-end[data-v-d47b4589] { justify-content: flex-end; } .justify-content-baseline[data-v-d47b4589] { justify-content: baseline; } .justify-content-center[data-v-d47b4589] { justify-content: center; } .justify-content-space-between[data-v-d47b4589] { justify-content: space-between; } .justify-content-space-around[data-v-d47b4589] { justify-content: space-around; } .justify-content-space-evenly[data-v-d47b4589] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-d47b4589] { align-items: flex-start; } .align-items-flex-end[data-v-d47b4589] { align-items: flex-end; } .align-items-stretch[data-v-d47b4589] { align-items: stretch; } .align-items-baseline[data-v-d47b4589] { align-items: baseline; } .align-items-center[data-v-d47b4589] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-d47b4589] { align-content: flex-start; } .align-content-flex-end[data-v-d47b4589] { align-content: flex-end; } .align-content-center[data-v-d47b4589] { align-content: center; } .align-content-stretch[data-v-d47b4589] { align-content: stretch; } .align-content-space-between[data-v-d47b4589] { align-content: space-between; } .align-content-space-around[data-v-d47b4589] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-d47b4589] { align-self: flex-start; } .align-self-flex-end[data-v-d47b4589] { align-self: flex-end; } .align-self-stretch[data-v-d47b4589] { align-self: stretch; } .align-self-flex-baseline[data-v-d47b4589] { align-self: baseline; } .align-self-center[data-v-d47b4589] { align-self: center; } .align-self-auto[data-v-d47b4589] { align-self: auto; } .flex-gap-1[data-v-d47b4589] { gap: 4px; } .flex-gap-2[data-v-d47b4589] { gap: 8px; } .flex-gap-3[data-v-d47b4589] { gap: 12px; } .flex-gap-4[data-v-d47b4589] { gap: 16px; } .flex-gap-5[data-v-d47b4589] { gap: 20px; } .flex-gap-6[data-v-d47b4589] { gap: 24px; } .flex-gap-7[data-v-d47b4589] { gap: 28px; } .flex-gap-8[data-v-d47b4589] { gap: 32px; } .flex-gap-10[data-v-d47b4589] { gap: 40px; } .flex-gap-12[data-v-d47b4589] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-d47b4589] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-d47b4589] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-d47b4589] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-d47b4589] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-d47b4589] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-d47b4589] { display: none !important; } } .col-none[data-v-d47b4589] { display: none; } .col-auto[data-v-d47b4589] { grid-column: auto; } .col-1[data-v-d47b4589] { grid-column: span 1; } .col-2[data-v-d47b4589] { grid-column: span 2; } .col-3[data-v-d47b4589] { grid-column: span 3; } .col-4[data-v-d47b4589] { grid-column: span 4; } .col-5[data-v-d47b4589] { grid-column: span 5; } .col-6[data-v-d47b4589] { grid-column: span 6; } .col-7[data-v-d47b4589] { grid-column: span 7; } .col-8[data-v-d47b4589] { grid-column: span 8; } .col-9[data-v-d47b4589] { grid-column: span 9; } .col-10[data-v-d47b4589] { grid-column: span 10; } .col-12[data-v-d47b4589] { grid-column: span 12; } .col-13[data-v-d47b4589] { grid-column: span 13; } .col-14[data-v-d47b4589] { grid-column: span 14; } .col-15[data-v-d47b4589] { grid-column: span 15; } .col-16[data-v-d47b4589] { grid-column: span 16; } .col-18[data-v-d47b4589] { grid-column: span 18; } .col-20[data-v-d47b4589] { grid-column: span 20; } .col-22[data-v-d47b4589] { grid-column: span 22; } .col-24[data-v-d47b4589] { grid-column: span 24; } .col-26[data-v-d47b4589] { grid-column: span 26; } .col-27[data-v-d47b4589] { grid-column: span 27; } .col-28[data-v-d47b4589] { grid-column: span 28; } .col-30[data-v-d47b4589] { grid-column: span 30; } .col-36[data-v-d47b4589] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-d47b4589] { display: none; } .col-md-36[data-v-d47b4589] { grid-column: span 36; } .col-md-28[data-v-d47b4589] { grid-column: span 28; } .col-md-27[data-v-d47b4589] { grid-column: span 27; } .col-md-24[data-v-d47b4589] { grid-column: span 24; } .col-md-22[data-v-d47b4589] { grid-column: span 22; } .col-md-20[data-v-d47b4589] { grid-column: span 20; } .col-md-19[data-v-d47b4589] { grid-column: span 19; } .col-md-18[data-v-d47b4589] { grid-column: span 18; } .col-md-17[data-v-d47b4589] { grid-column: span 17; } .col-md-16[data-v-d47b4589] { grid-column: span 16; } .col-md-15[data-v-d47b4589] { grid-column: span 15; } .col-md-14[data-v-d47b4589] { grid-column: span 14; } .col-md-13[data-v-d47b4589] { grid-column: span 13; } .col-md-12[data-v-d47b4589] { grid-column: span 12; } .col-md-10[data-v-d47b4589] { grid-column: span 10; } .col-md-9[data-v-d47b4589] { grid-column: span 9; } .col-md-8[data-v-d47b4589] { grid-column: span 8; } .col-md-6[data-v-d47b4589] { grid-column: span 6; } .col-md-5[data-v-d47b4589] { grid-column: span 5; } .col-md-4[data-v-d47b4589] { grid-column: span 4; } .col-md-3[data-v-d47b4589] { grid-column: span 3; } .col-md-2[data-v-d47b4589] { grid-column: span 2; } .col-md-1[data-v-d47b4589] { grid-column: span 1; } .col-md-auto[data-v-d47b4589] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-d47b4589] { display: none; } .col-sm-36[data-v-d47b4589] { grid-column: span 36; } .col-sm-32[data-v-d47b4589] { grid-column: span 32; } .col-sm-28[data-v-d47b4589] { grid-column: span 28; } .col-sm-27[data-v-d47b4589] { grid-column: span 27; } .col-sm-24[data-v-d47b4589] { grid-column: span 24; } .col-sm-22[data-v-d47b4589] { grid-column: span 22; } .col-sm-20[data-v-d47b4589] { grid-column: span 20; } .col-sm-18[data-v-d47b4589] { grid-column: span 18; } .col-sm-16[data-v-d47b4589] { grid-column: span 16; } .col-sm-15[data-v-d47b4589] { grid-column: span 15; } .col-sm-14[data-v-d47b4589] { grid-column: span 14; } .col-sm-13[data-v-d47b4589] { grid-column: span 12; } .col-sm-12[data-v-d47b4589] { grid-column: span 12; } .col-sm-10[data-v-d47b4589] { grid-column: span 10; } .col-sm-9[data-v-d47b4589] { grid-column: span 8; } .col-sm-8[data-v-d47b4589] { grid-column: span 8; } .col-sm-6[data-v-d47b4589] { grid-column: span 6; } .col-sm-4[data-v-d47b4589] { grid-column: span 4; } .col-sm-auto[data-v-d47b4589] { grid-column: auto; } } .fade-enter-active[data-v-d47b4589] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-d47b4589] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-d47b4589], .fade-leave-to[data-v-d47b4589] { opacity: 0; } .admin-news__item[data-v-d47b4589] { cursor: pointer; } .admin-news__item[data-v-d47b4589]:hover { background: rgba(var(--primary-500-rgb), 0.08); } .admin-news__mobile-card[data-v-d47b4589] { margin: 4px 0; } .admin-news__info[data-v-d47b4589] { display: flex; align-items: center; gap: 10px; } .admin-news__thumb[data-v-d47b4589] { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-subtle); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-9bc97d2f]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-9bc97d2f] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-9bc97d2f] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-9bc97d2f]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-9bc97d2f], .theme-mode-light[data-v-9bc97d2f] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-9bc97d2f], .theme-mode-dark[data-v-9bc97d2f] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-9bc97d2f]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-9bc97d2f]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-9bc97d2f] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-9bc97d2f] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-9bc97d2f]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-9bc97d2f], input[disabled][data-v-9bc97d2f] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-9bc97d2f] { opacity: 0.9; } input[readonly][data-v-9bc97d2f] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-9bc97d2f] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-9bc97d2f]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-9bc97d2f]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-9bc97d2f]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-9bc97d2f] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-9bc97d2f]:nth-child(odd), .list-card-desktop__wrapper[data-v-9bc97d2f]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-9bc97d2f]:nth-child(even), .list-card-desktop__wrapper[data-v-9bc97d2f]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-9bc97d2f]:nth-child(odd), .listCardDesktopWrapper[data-v-9bc97d2f]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-9bc97d2f]:nth-child(even), .listCardDesktopWrapper[data-v-9bc97d2f]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-9bc97d2f] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-9bc97d2f] { cursor: pointer; } .card-layout--selectionnable[data-v-9bc97d2f]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-9bc97d2f] { cursor: auto; } .card-layout--drawer[data-v-9bc97d2f] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-9bc97d2f] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-9bc97d2f] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-9bc97d2f] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-9bc97d2f] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-9bc97d2f] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-9bc97d2f]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-9bc97d2f] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-9bc97d2f] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-9bc97d2f] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-9bc97d2f] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-9bc97d2f] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-9bc97d2f] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-9bc97d2f] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-9bc97d2f] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-9bc97d2f] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-9bc97d2f] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-9bc97d2f] { background-color: #eb1515; } .color-chip--dossiers[data-v-9bc97d2f] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-9bc97d2f] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-9bc97d2f] { background-color: #00a79b; } .color-chip--virements[data-v-9bc97d2f] { background-color: var(--secondary-400); } .color-chip--factures[data-v-9bc97d2f] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-9bc97d2f] { background-color: #eb1515; } .color-recherche-dossiers[data-v-9bc97d2f] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-9bc97d2f] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-9bc97d2f] { background-color: #00a79b; } .color-recherche-virements[data-v-9bc97d2f] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-9bc97d2f] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-9bc97d2f] { color: #00a79b; cursor: pointer; } .scrollable[data-v-9bc97d2f] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-9bc97d2f] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-9bc97d2f] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-9bc97d2f] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-9bc97d2f] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-9bc97d2f] { font-weight: 800; } .grid-cell--column[data-v-9bc97d2f] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-9bc97d2f] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-9bc97d2f] { fill: #00a79b; } .grid-cell--disabled[data-v-9bc97d2f] { color: #cccccc; } .grid-cell--disabled svg[data-v-9bc97d2f] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-9bc97d2f] { white-space: nowrap; } .grid-cell--danger svg[data-v-9bc97d2f] { fill: #eb1515; } .grid-cell--span-1[data-v-9bc97d2f] { grid-column: span 1; } .grid-cell--span-2[data-v-9bc97d2f] { grid-column: span 2; } .grid-cell--span-3[data-v-9bc97d2f] { grid-column: span 3; } .grid-cell--span-4[data-v-9bc97d2f] { grid-column: span 4; } .grid-cell--span-5[data-v-9bc97d2f] { grid-column: span 5; } .grid-cell--span-6[data-v-9bc97d2f] { grid-column: span 6; } .grid-cell--span-7[data-v-9bc97d2f] { grid-column: span 7; } .grid-cell--span-8[data-v-9bc97d2f] { grid-column: span 8; } .grid-cell--span-9[data-v-9bc97d2f] { grid-column: span 9; } .grid-cell--span-10[data-v-9bc97d2f] { grid-column: span 10; } .grid-cell--span-12[data-v-9bc97d2f] { grid-column: span 12; } .grid-cell--span-13[data-v-9bc97d2f] { grid-column: span 13; } .grid-cell--span-14[data-v-9bc97d2f] { grid-column: span 14; } .grid-cell--span-16[data-v-9bc97d2f] { grid-column: span 16; } .grid-cell--span-18[data-v-9bc97d2f] { grid-column: span 18; } .grid-cell--span-20[data-v-9bc97d2f] { grid-column: span 20; } .grid-cell--span-32[data-v-9bc97d2f] { grid-column: span 32; } .grid-cell--span-36[data-v-9bc97d2f] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-9bc97d2f] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-9bc97d2f] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-9bc97d2f] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-9bc97d2f] { justify-content: center !important; } .elem--bold span[data-v-9bc97d2f] { font-weight: 800; } .elem--column[data-v-9bc97d2f] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-9bc97d2f] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-9bc97d2f] { fill: #00a79b; } .elem--clickable[data-v-9bc97d2f]:hover { cursor: pointer; } .elem--disabled[data-v-9bc97d2f] { color: #cccccc; } .elem--disabled svg[data-v-9bc97d2f] { fill: #cccccc; } .elem--nowrap span[data-v-9bc97d2f] { white-space: nowrap; } .elem--danger svg[data-v-9bc97d2f] { fill: #eb1515; } .elem--span-1[data-v-9bc97d2f] { grid-column: span 1; } .elem--span-2[data-v-9bc97d2f] { grid-column: span 2; } .elem--span-3[data-v-9bc97d2f] { grid-column: span 3; } .elem--span-4[data-v-9bc97d2f] { grid-column: span 4; } .elem--span-5[data-v-9bc97d2f] { grid-column: span 5; } .elem--span-6[data-v-9bc97d2f] { grid-column: span 6; } .elem--span-7[data-v-9bc97d2f] { grid-column: span 7; } .elem--span-8[data-v-9bc97d2f] { grid-column: span 8; } .elem--span-9[data-v-9bc97d2f] { grid-column: span 9; } .elem--span-10[data-v-9bc97d2f] { grid-column: span 10; } .elem--span-12[data-v-9bc97d2f] { grid-column: span 12; } .elem--span-13[data-v-9bc97d2f] { grid-column: span 13; } .elem--span-14[data-v-9bc97d2f] { grid-column: span 14; } .elem--span-16[data-v-9bc97d2f] { grid-column: span 16; } .elem--span-18[data-v-9bc97d2f] { grid-column: span 18; } .elem--span-20[data-v-9bc97d2f] { grid-column: span 20; } .elem--span-32[data-v-9bc97d2f] { grid-column: span 32; } .elem--span-36[data-v-9bc97d2f] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-9bc97d2f] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-9bc97d2f] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-9bc97d2f]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-9bc97d2f] { display: flex; } /* flex-direction */ .flex-column[data-v-9bc97d2f] { flex-direction: column; } .flex-row[data-v-9bc97d2f] { flex-direction: row; } /* flex */ .flex-1[data-v-9bc97d2f] { flex: 1 !important; } .flex-2[data-v-9bc97d2f] { flex: 2; } .flex-3[data-v-9bc97d2f] { flex: 3; } .flex-3[data-v-9bc97d2f] { flex: 4; } .flex-5[data-v-9bc97d2f] { flex: 5; } .flex-auto[data-v-9bc97d2f] { flex: auto; } .flex-none[data-v-9bc97d2f] { flex: none; } .flex-content[data-v-9bc97d2f] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-9bc97d2f] { flex-wrap: wrap; } .flex-nowrap[data-v-9bc97d2f] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-9bc97d2f] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-9bc97d2f] { justify-content: flex-start; } .justify-content-end[data-v-9bc97d2f] { justify-content: flex-end; } .justify-content-baseline[data-v-9bc97d2f] { justify-content: baseline; } .justify-content-center[data-v-9bc97d2f] { justify-content: center; } .justify-content-space-between[data-v-9bc97d2f] { justify-content: space-between; } .justify-content-space-around[data-v-9bc97d2f] { justify-content: space-around; } .justify-content-space-evenly[data-v-9bc97d2f] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-9bc97d2f] { align-items: flex-start; } .align-items-flex-end[data-v-9bc97d2f] { align-items: flex-end; } .align-items-stretch[data-v-9bc97d2f] { align-items: stretch; } .align-items-baseline[data-v-9bc97d2f] { align-items: baseline; } .align-items-center[data-v-9bc97d2f] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-9bc97d2f] { align-content: flex-start; } .align-content-flex-end[data-v-9bc97d2f] { align-content: flex-end; } .align-content-center[data-v-9bc97d2f] { align-content: center; } .align-content-stretch[data-v-9bc97d2f] { align-content: stretch; } .align-content-space-between[data-v-9bc97d2f] { align-content: space-between; } .align-content-space-around[data-v-9bc97d2f] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-9bc97d2f] { align-self: flex-start; } .align-self-flex-end[data-v-9bc97d2f] { align-self: flex-end; } .align-self-stretch[data-v-9bc97d2f] { align-self: stretch; } .align-self-flex-baseline[data-v-9bc97d2f] { align-self: baseline; } .align-self-center[data-v-9bc97d2f] { align-self: center; } .align-self-auto[data-v-9bc97d2f] { align-self: auto; } .flex-gap-1[data-v-9bc97d2f] { gap: 4px; } .flex-gap-2[data-v-9bc97d2f] { gap: 8px; } .flex-gap-3[data-v-9bc97d2f] { gap: 12px; } .flex-gap-4[data-v-9bc97d2f] { gap: 16px; } .flex-gap-5[data-v-9bc97d2f] { gap: 20px; } .flex-gap-6[data-v-9bc97d2f] { gap: 24px; } .flex-gap-7[data-v-9bc97d2f] { gap: 28px; } .flex-gap-8[data-v-9bc97d2f] { gap: 32px; } .flex-gap-10[data-v-9bc97d2f] { gap: 40px; } .flex-gap-12[data-v-9bc97d2f] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-9bc97d2f] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-9bc97d2f] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-9bc97d2f] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-9bc97d2f] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-9bc97d2f] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-9bc97d2f] { display: none !important; } } .col-none[data-v-9bc97d2f] { display: none; } .col-auto[data-v-9bc97d2f] { grid-column: auto; } .col-1[data-v-9bc97d2f] { grid-column: span 1; } .col-2[data-v-9bc97d2f] { grid-column: span 2; } .col-3[data-v-9bc97d2f] { grid-column: span 3; } .col-4[data-v-9bc97d2f] { grid-column: span 4; } .col-5[data-v-9bc97d2f] { grid-column: span 5; } .col-6[data-v-9bc97d2f] { grid-column: span 6; } .col-7[data-v-9bc97d2f] { grid-column: span 7; } .col-8[data-v-9bc97d2f] { grid-column: span 8; } .col-9[data-v-9bc97d2f] { grid-column: span 9; } .col-10[data-v-9bc97d2f] { grid-column: span 10; } .col-12[data-v-9bc97d2f] { grid-column: span 12; } .col-13[data-v-9bc97d2f] { grid-column: span 13; } .col-14[data-v-9bc97d2f] { grid-column: span 14; } .col-15[data-v-9bc97d2f] { grid-column: span 15; } .col-16[data-v-9bc97d2f] { grid-column: span 16; } .col-18[data-v-9bc97d2f] { grid-column: span 18; } .col-20[data-v-9bc97d2f] { grid-column: span 20; } .col-22[data-v-9bc97d2f] { grid-column: span 22; } .col-24[data-v-9bc97d2f] { grid-column: span 24; } .col-26[data-v-9bc97d2f] { grid-column: span 26; } .col-27[data-v-9bc97d2f] { grid-column: span 27; } .col-28[data-v-9bc97d2f] { grid-column: span 28; } .col-30[data-v-9bc97d2f] { grid-column: span 30; } .col-36[data-v-9bc97d2f] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-9bc97d2f] { display: none; } .col-md-36[data-v-9bc97d2f] { grid-column: span 36; } .col-md-28[data-v-9bc97d2f] { grid-column: span 28; } .col-md-27[data-v-9bc97d2f] { grid-column: span 27; } .col-md-24[data-v-9bc97d2f] { grid-column: span 24; } .col-md-22[data-v-9bc97d2f] { grid-column: span 22; } .col-md-20[data-v-9bc97d2f] { grid-column: span 20; } .col-md-19[data-v-9bc97d2f] { grid-column: span 19; } .col-md-18[data-v-9bc97d2f] { grid-column: span 18; } .col-md-17[data-v-9bc97d2f] { grid-column: span 17; } .col-md-16[data-v-9bc97d2f] { grid-column: span 16; } .col-md-15[data-v-9bc97d2f] { grid-column: span 15; } .col-md-14[data-v-9bc97d2f] { grid-column: span 14; } .col-md-13[data-v-9bc97d2f] { grid-column: span 13; } .col-md-12[data-v-9bc97d2f] { grid-column: span 12; } .col-md-10[data-v-9bc97d2f] { grid-column: span 10; } .col-md-9[data-v-9bc97d2f] { grid-column: span 9; } .col-md-8[data-v-9bc97d2f] { grid-column: span 8; } .col-md-6[data-v-9bc97d2f] { grid-column: span 6; } .col-md-5[data-v-9bc97d2f] { grid-column: span 5; } .col-md-4[data-v-9bc97d2f] { grid-column: span 4; } .col-md-3[data-v-9bc97d2f] { grid-column: span 3; } .col-md-2[data-v-9bc97d2f] { grid-column: span 2; } .col-md-1[data-v-9bc97d2f] { grid-column: span 1; } .col-md-auto[data-v-9bc97d2f] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-9bc97d2f] { display: none; } .col-sm-36[data-v-9bc97d2f] { grid-column: span 36; } .col-sm-32[data-v-9bc97d2f] { grid-column: span 32; } .col-sm-28[data-v-9bc97d2f] { grid-column: span 28; } .col-sm-27[data-v-9bc97d2f] { grid-column: span 27; } .col-sm-24[data-v-9bc97d2f] { grid-column: span 24; } .col-sm-22[data-v-9bc97d2f] { grid-column: span 22; } .col-sm-20[data-v-9bc97d2f] { grid-column: span 20; } .col-sm-18[data-v-9bc97d2f] { grid-column: span 18; } .col-sm-16[data-v-9bc97d2f] { grid-column: span 16; } .col-sm-15[data-v-9bc97d2f] { grid-column: span 15; } .col-sm-14[data-v-9bc97d2f] { grid-column: span 14; } .col-sm-13[data-v-9bc97d2f] { grid-column: span 12; } .col-sm-12[data-v-9bc97d2f] { grid-column: span 12; } .col-sm-10[data-v-9bc97d2f] { grid-column: span 10; } .col-sm-9[data-v-9bc97d2f] { grid-column: span 8; } .col-sm-8[data-v-9bc97d2f] { grid-column: span 8; } .col-sm-6[data-v-9bc97d2f] { grid-column: span 6; } .col-sm-4[data-v-9bc97d2f] { grid-column: span 4; } .col-sm-auto[data-v-9bc97d2f] { grid-column: auto; } } .fade-enter-active[data-v-9bc97d2f] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-9bc97d2f] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-9bc97d2f], .fade-leave-to[data-v-9bc97d2f] { opacity: 0; } .mobile-card[data-v-9bc97d2f] { padding: 16px; border-radius: 12px; background: var(--bg-subtle); display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-default); transition: background 0.2s ease, transform 0.2s ease; cursor: pointer; } .mobile-card[data-v-9bc97d2f]:hover { background: rgba(var(--primary-500-rgb), 0.08); border-color: var(--primary-300); } .mobile-card[data-v-9bc97d2f]:active { background: var(--bg-subtle); } .mobile-card--pending[data-v-9bc97d2f] { border-left: 3px solid var(--warning-500); background: linear-gradient(90deg, var(--warning-50) 0%, transparent 20%); } .row[data-v-9bc97d2f] { display: flex; justify-content: space-between; align-items: center; } .client-info[data-v-9bc97d2f] { display: flex; flex-direction: column; gap: 2px; } .client-name-row[data-v-9bc97d2f] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .guest-badge-mobile[data-v-9bc97d2f] { font-size: 9px; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; } .amount-payment[data-v-9bc97d2f] { display: flex; align-items: center; gap: 8px; } .payment-badge[data-v-9bc97d2f] { font-size: 10px; font-weight: 600; padding: 3px 6px; border-radius: 4px; } .payment-badge.payment--crypto[data-v-9bc97d2f] { background: #f7931a20; color: #f7931a; } .payment-badge.payment--bank[data-v-9bc97d2f] { background: #1a73e820; color: #1a73e8; } .payment-badge.payment--card[data-v-9bc97d2f] { background: #6772e520; color: #6772e5; } .status-actions[data-v-9bc97d2f] { display: flex; align-items: center; gap: 8px; } .separator[data-v-9bc97d2f] { width: 1px; height: 16px; background: var(--border-default); } .validate-btn-mobile[data-v-9bc97d2f] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 6px; background: var(--success-100); color: var(--success-700); cursor: pointer; transition: all 0.2s ease; } .validate-btn-mobile[data-v-9bc97d2f]:hover { background: var(--success-500); color: #ffffff; } .validate-btn-mobile[data-v-9bc97d2f]:active { background: var(--success-600); } .action-icon[data-v-9bc97d2f] { transition: opacity 0.2s ease; opacity: 0.7; } .action-icon[data-v-9bc97d2f]:hover { opacity: 1; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-30121800]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-30121800] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-30121800] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-30121800]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-30121800], .theme-mode-light[data-v-30121800] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-30121800], .theme-mode-dark[data-v-30121800] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-30121800]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-30121800]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-30121800] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-30121800] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-30121800]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-30121800], input[disabled][data-v-30121800] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-30121800] { opacity: 0.9; } input[readonly][data-v-30121800] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-30121800] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-30121800]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-30121800]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-30121800]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-30121800] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-30121800]:nth-child(odd), .list-card-desktop__wrapper[data-v-30121800]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-30121800]:nth-child(even), .list-card-desktop__wrapper[data-v-30121800]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-30121800]:nth-child(odd), .listCardDesktopWrapper[data-v-30121800]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-30121800]:nth-child(even), .listCardDesktopWrapper[data-v-30121800]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-30121800] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-30121800] { cursor: pointer; } .card-layout--selectionnable[data-v-30121800]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-30121800] { cursor: auto; } .card-layout--drawer[data-v-30121800] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-30121800] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-30121800] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-30121800] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-30121800] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-30121800] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-30121800]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-30121800] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-30121800] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-30121800] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-30121800] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-30121800] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-30121800] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-30121800] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-30121800] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-30121800] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-30121800] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-30121800] { background-color: #eb1515; } .color-chip--dossiers[data-v-30121800] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-30121800] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-30121800] { background-color: #00a79b; } .color-chip--virements[data-v-30121800] { background-color: var(--secondary-400); } .color-chip--factures[data-v-30121800] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-30121800] { background-color: #eb1515; } .color-recherche-dossiers[data-v-30121800] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-30121800] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-30121800] { background-color: #00a79b; } .color-recherche-virements[data-v-30121800] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-30121800] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-30121800] { color: #00a79b; cursor: pointer; } .scrollable[data-v-30121800] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-30121800] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-30121800] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-30121800] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-30121800] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-30121800] { font-weight: 800; } .grid-cell--column[data-v-30121800] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-30121800] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-30121800] { fill: #00a79b; } .grid-cell--disabled[data-v-30121800] { color: #cccccc; } .grid-cell--disabled svg[data-v-30121800] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-30121800] { white-space: nowrap; } .grid-cell--danger svg[data-v-30121800] { fill: #eb1515; } .grid-cell--span-1[data-v-30121800] { grid-column: span 1; } .grid-cell--span-2[data-v-30121800] { grid-column: span 2; } .grid-cell--span-3[data-v-30121800] { grid-column: span 3; } .grid-cell--span-4[data-v-30121800] { grid-column: span 4; } .grid-cell--span-5[data-v-30121800] { grid-column: span 5; } .grid-cell--span-6[data-v-30121800] { grid-column: span 6; } .grid-cell--span-7[data-v-30121800] { grid-column: span 7; } .grid-cell--span-8[data-v-30121800] { grid-column: span 8; } .grid-cell--span-9[data-v-30121800] { grid-column: span 9; } .grid-cell--span-10[data-v-30121800] { grid-column: span 10; } .grid-cell--span-12[data-v-30121800] { grid-column: span 12; } .grid-cell--span-13[data-v-30121800] { grid-column: span 13; } .grid-cell--span-14[data-v-30121800] { grid-column: span 14; } .grid-cell--span-16[data-v-30121800] { grid-column: span 16; } .grid-cell--span-18[data-v-30121800] { grid-column: span 18; } .grid-cell--span-20[data-v-30121800] { grid-column: span 20; } .grid-cell--span-32[data-v-30121800] { grid-column: span 32; } .grid-cell--span-36[data-v-30121800] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-30121800] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-30121800] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-30121800] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-30121800] { justify-content: center !important; } .elem--bold span[data-v-30121800] { font-weight: 800; } .elem--column[data-v-30121800] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-30121800] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-30121800] { fill: #00a79b; } .elem--clickable[data-v-30121800]:hover { cursor: pointer; } .elem--disabled[data-v-30121800] { color: #cccccc; } .elem--disabled svg[data-v-30121800] { fill: #cccccc; } .elem--nowrap span[data-v-30121800] { white-space: nowrap; } .elem--danger svg[data-v-30121800] { fill: #eb1515; } .elem--span-1[data-v-30121800] { grid-column: span 1; } .elem--span-2[data-v-30121800] { grid-column: span 2; } .elem--span-3[data-v-30121800] { grid-column: span 3; } .elem--span-4[data-v-30121800] { grid-column: span 4; } .elem--span-5[data-v-30121800] { grid-column: span 5; } .elem--span-6[data-v-30121800] { grid-column: span 6; } .elem--span-7[data-v-30121800] { grid-column: span 7; } .elem--span-8[data-v-30121800] { grid-column: span 8; } .elem--span-9[data-v-30121800] { grid-column: span 9; } .elem--span-10[data-v-30121800] { grid-column: span 10; } .elem--span-12[data-v-30121800] { grid-column: span 12; } .elem--span-13[data-v-30121800] { grid-column: span 13; } .elem--span-14[data-v-30121800] { grid-column: span 14; } .elem--span-16[data-v-30121800] { grid-column: span 16; } .elem--span-18[data-v-30121800] { grid-column: span 18; } .elem--span-20[data-v-30121800] { grid-column: span 20; } .elem--span-32[data-v-30121800] { grid-column: span 32; } .elem--span-36[data-v-30121800] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-30121800] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-30121800] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-30121800]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-30121800] { display: flex; } /* flex-direction */ .flex-column[data-v-30121800] { flex-direction: column; } .flex-row[data-v-30121800] { flex-direction: row; } /* flex */ .flex-1[data-v-30121800] { flex: 1 !important; } .flex-2[data-v-30121800] { flex: 2; } .flex-3[data-v-30121800] { flex: 3; } .flex-3[data-v-30121800] { flex: 4; } .flex-5[data-v-30121800] { flex: 5; } .flex-auto[data-v-30121800] { flex: auto; } .flex-none[data-v-30121800] { flex: none; } .flex-content[data-v-30121800] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-30121800] { flex-wrap: wrap; } .flex-nowrap[data-v-30121800] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-30121800] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-30121800] { justify-content: flex-start; } .justify-content-end[data-v-30121800] { justify-content: flex-end; } .justify-content-baseline[data-v-30121800] { justify-content: baseline; } .justify-content-center[data-v-30121800] { justify-content: center; } .justify-content-space-between[data-v-30121800] { justify-content: space-between; } .justify-content-space-around[data-v-30121800] { justify-content: space-around; } .justify-content-space-evenly[data-v-30121800] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-30121800] { align-items: flex-start; } .align-items-flex-end[data-v-30121800] { align-items: flex-end; } .align-items-stretch[data-v-30121800] { align-items: stretch; } .align-items-baseline[data-v-30121800] { align-items: baseline; } .align-items-center[data-v-30121800] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-30121800] { align-content: flex-start; } .align-content-flex-end[data-v-30121800] { align-content: flex-end; } .align-content-center[data-v-30121800] { align-content: center; } .align-content-stretch[data-v-30121800] { align-content: stretch; } .align-content-space-between[data-v-30121800] { align-content: space-between; } .align-content-space-around[data-v-30121800] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-30121800] { align-self: flex-start; } .align-self-flex-end[data-v-30121800] { align-self: flex-end; } .align-self-stretch[data-v-30121800] { align-self: stretch; } .align-self-flex-baseline[data-v-30121800] { align-self: baseline; } .align-self-center[data-v-30121800] { align-self: center; } .align-self-auto[data-v-30121800] { align-self: auto; } .flex-gap-1[data-v-30121800] { gap: 4px; } .flex-gap-2[data-v-30121800] { gap: 8px; } .flex-gap-3[data-v-30121800] { gap: 12px; } .flex-gap-4[data-v-30121800] { gap: 16px; } .flex-gap-5[data-v-30121800] { gap: 20px; } .flex-gap-6[data-v-30121800] { gap: 24px; } .flex-gap-7[data-v-30121800] { gap: 28px; } .flex-gap-8[data-v-30121800] { gap: 32px; } .flex-gap-10[data-v-30121800] { gap: 40px; } .flex-gap-12[data-v-30121800] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-30121800] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-30121800] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-30121800] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-30121800] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-30121800] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-30121800] { display: none !important; } } .col-none[data-v-30121800] { display: none; } .col-auto[data-v-30121800] { grid-column: auto; } .col-1[data-v-30121800] { grid-column: span 1; } .col-2[data-v-30121800] { grid-column: span 2; } .col-3[data-v-30121800] { grid-column: span 3; } .col-4[data-v-30121800] { grid-column: span 4; } .col-5[data-v-30121800] { grid-column: span 5; } .col-6[data-v-30121800] { grid-column: span 6; } .col-7[data-v-30121800] { grid-column: span 7; } .col-8[data-v-30121800] { grid-column: span 8; } .col-9[data-v-30121800] { grid-column: span 9; } .col-10[data-v-30121800] { grid-column: span 10; } .col-12[data-v-30121800] { grid-column: span 12; } .col-13[data-v-30121800] { grid-column: span 13; } .col-14[data-v-30121800] { grid-column: span 14; } .col-15[data-v-30121800] { grid-column: span 15; } .col-16[data-v-30121800] { grid-column: span 16; } .col-18[data-v-30121800] { grid-column: span 18; } .col-20[data-v-30121800] { grid-column: span 20; } .col-22[data-v-30121800] { grid-column: span 22; } .col-24[data-v-30121800] { grid-column: span 24; } .col-26[data-v-30121800] { grid-column: span 26; } .col-27[data-v-30121800] { grid-column: span 27; } .col-28[data-v-30121800] { grid-column: span 28; } .col-30[data-v-30121800] { grid-column: span 30; } .col-36[data-v-30121800] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-30121800] { display: none; } .col-md-36[data-v-30121800] { grid-column: span 36; } .col-md-28[data-v-30121800] { grid-column: span 28; } .col-md-27[data-v-30121800] { grid-column: span 27; } .col-md-24[data-v-30121800] { grid-column: span 24; } .col-md-22[data-v-30121800] { grid-column: span 22; } .col-md-20[data-v-30121800] { grid-column: span 20; } .col-md-19[data-v-30121800] { grid-column: span 19; } .col-md-18[data-v-30121800] { grid-column: span 18; } .col-md-17[data-v-30121800] { grid-column: span 17; } .col-md-16[data-v-30121800] { grid-column: span 16; } .col-md-15[data-v-30121800] { grid-column: span 15; } .col-md-14[data-v-30121800] { grid-column: span 14; } .col-md-13[data-v-30121800] { grid-column: span 13; } .col-md-12[data-v-30121800] { grid-column: span 12; } .col-md-10[data-v-30121800] { grid-column: span 10; } .col-md-9[data-v-30121800] { grid-column: span 9; } .col-md-8[data-v-30121800] { grid-column: span 8; } .col-md-6[data-v-30121800] { grid-column: span 6; } .col-md-5[data-v-30121800] { grid-column: span 5; } .col-md-4[data-v-30121800] { grid-column: span 4; } .col-md-3[data-v-30121800] { grid-column: span 3; } .col-md-2[data-v-30121800] { grid-column: span 2; } .col-md-1[data-v-30121800] { grid-column: span 1; } .col-md-auto[data-v-30121800] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-30121800] { display: none; } .col-sm-36[data-v-30121800] { grid-column: span 36; } .col-sm-32[data-v-30121800] { grid-column: span 32; } .col-sm-28[data-v-30121800] { grid-column: span 28; } .col-sm-27[data-v-30121800] { grid-column: span 27; } .col-sm-24[data-v-30121800] { grid-column: span 24; } .col-sm-22[data-v-30121800] { grid-column: span 22; } .col-sm-20[data-v-30121800] { grid-column: span 20; } .col-sm-18[data-v-30121800] { grid-column: span 18; } .col-sm-16[data-v-30121800] { grid-column: span 16; } .col-sm-15[data-v-30121800] { grid-column: span 15; } .col-sm-14[data-v-30121800] { grid-column: span 14; } .col-sm-13[data-v-30121800] { grid-column: span 12; } .col-sm-12[data-v-30121800] { grid-column: span 12; } .col-sm-10[data-v-30121800] { grid-column: span 10; } .col-sm-9[data-v-30121800] { grid-column: span 8; } .col-sm-8[data-v-30121800] { grid-column: span 8; } .col-sm-6[data-v-30121800] { grid-column: span 6; } .col-sm-4[data-v-30121800] { grid-column: span 4; } .col-sm-auto[data-v-30121800] { grid-column: auto; } } .fade-enter-active[data-v-30121800] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-30121800] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-30121800], .fade-leave-to[data-v-30121800] { opacity: 0; } .order-detail[data-v-30121800] { display: flex; flex-direction: column; gap: 24px; padding: 16px; overflow-x: hidden; } .order-info-card[data-v-30121800] { position: relative; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); padding: 24px; border-radius: 16px; border: 1px solid #e2e7ef; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .order-info-card[data-v-30121800]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--primary-300)); border-radius: 16px 16px 0 0; opacity: 0; transition: opacity 0.3s; } .order-info-card[data-v-30121800]:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06); border-color: var(--primary-300); background: #ffffff; } .order-info-card[data-v-30121800]:hover::before { opacity: 1; } .order-info-card .card-header[data-v-30121800] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #edf1f5; } .order-info-card .card-header .header-badges[data-v-30121800] { display: flex; gap: 8px; align-items: center; } .info-grid[data-v-30121800] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .info-grid .info-item[data-v-30121800] { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #f8f9fb; border-radius: 8px; transition: all 0.2s; } .info-grid .info-item[data-v-30121800]:hover { background: rgba(var(--primary-500-rgb), 0.03); } .info-grid .info-item.col-span-2[data-v-30121800] { grid-column: span 2; } .info-grid .info-item .label[data-v-30121800] { font-size: 11px; color: var(--primary-600); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; } .info-grid .info-item .value[data-v-30121800] { font-size: 14px; color: #2b303a; font-weight: 500; } .payment-validation[data-v-30121800] { margin-top: 16px; padding: 16px; background: linear-gradient(135deg, var(--warning-50) 0%, var(--warning-100) 100%); border: 2px solid var(--warning-300); border-radius: 12px; text-align: center; } .payment-validation__header[data-v-30121800] { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; font-weight: 600; font-size: 14px; color: var(--warning-800); } .payment-validation__icon[data-v-30121800] { color: var(--warning-600); animation: pulse-icon-30121800 2s infinite; } .payment-validation__text[data-v-30121800] { font-size: 14px; color: var(--warning-900); margin-bottom: 16px; line-height: 1.5; } .payment-validation__text strong[data-v-30121800] { color: var(--warning-800); } @keyframes pulse-icon-30121800 { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .address-block[data-v-30121800] { padding: 16px; background: #f8f9fb; border-radius: 12px; font-size: 14px; line-height: 1.6; color: #4d5462; border-left: 3px solid var(--primary-500); } .financial-breakdown[data-v-30121800] { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.02) 0%, rgba(var(--secondary-500-rgb), 0.02) 100%); border-radius: 12px; border: 1px solid #e2e7ef; } .financial-breakdown .financial-item[data-v-30121800] { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #ffffff; border-radius: 8px; transition: all 0.2s; } .financial-breakdown .financial-item[data-v-30121800]:hover { background: rgba(var(--primary-500-rgb), 0.05); border-left: 2px solid var(--primary-400); } .financial-breakdown .financial-item .label[data-v-30121800] { font-size: 13px; color: #4d5462; font-weight: 500; letter-spacing: 0.3px; } .financial-breakdown .financial-item .value[data-v-30121800] { font-size: 15px; color: #2b303a; font-weight: 600; font-variant-numeric: tabular-nums; } .financial-breakdown .financial-item--total[data-v-30121800] { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); border: none; padding: 14px 16px; margin-top: 8px; box-shadow: 0 4px 12px rgba(var(--primary-500-rgb), 0.25), 0 2px 4px rgba(var(--primary-500-rgb), 0.15); } .financial-breakdown .financial-item--total .label[data-v-30121800], .financial-breakdown .financial-item--total .value[data-v-30121800] { color: #ffffff; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; } .financial-breakdown .financial-item--total[data-v-30121800]:hover { box-shadow: 0 6px 16px rgba(var(--primary-500-rgb), 0.35), 0 3px 6px rgba(var(--primary-500-rgb), 0.2); background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%); } .relay-block[data-v-30121800] { padding: 16px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.03) 0%, rgba(var(--primary-300-rgb), 0.05) 100%); border-radius: 12px; border: 2px solid var(--primary-200); font-size: 14px; line-height: 1.7; color: #3c414c; box-shadow: 0 2px 8px rgba(var(--primary-500-rgb), 0.1), 0 1px 3px rgba(0, 0, 0, 0.05); } .relay-block p[data-v-30121800] { margin: 4px 0; display: flex; align-items: center; gap: 8px; } .relay-block p.font-bold[data-v-30121800] { color: var(--primary-700); font-size: 15px; margin-bottom: 8px; } .relay-block p.text-xs[data-v-30121800] { font-size: 12px; color: #647184; font-family: 'Courier New', monospace; } .notes-block[data-v-30121800] { padding: 16px; background: #ffffff; border-radius: 12px; border-left: 4px solid var(--warning-500); font-size: 14px; line-height: 1.7; color: #3c414c; white-space: pre-wrap; word-break: break-word; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 2px 6px rgba(var(--warning-500-rgb), 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); } .tracking-form[data-v-30121800] { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; } @media (max-width: 720px) { .tracking-form[data-v-30121800] { grid-template-columns: 1fr; } } .products-table[data-v-30121800] { border: 2px solid #e2e7ef; border-radius: 12px; overflow: hidden; background: #ffffff; } .products-table .table-header[data-v-30121800] { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; background: linear-gradient(135deg, var(--secondary-900) 0%, var(--secondary-800) 100%); padding: 12px 16px; font-size: 12px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.5px; } .products-table .table-row[data-v-30121800] { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; padding: 14px 16px; font-size: 14px; align-items: center; border-bottom: 1px solid #edf1f5; transition: background 0.2s; } .products-table .table-row[data-v-30121800]:hover { background: rgba(var(--primary-500-rgb), 0.02); } .products-table .table-row[data-v-30121800]:last-child { border-bottom: none; } .card-actions[data-v-30121800] { display: flex; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 2px solid #edf1f5; } .card-actions button[data-v-30121800] { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .card-actions button[data-v-30121800]:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .card-actions button[data-v-30121800]:active { opacity: 0.9; } .order-products[data-v-30121800] { animation: fadeInUp-30121800 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: 0.2s; } .order-info-card[data-v-30121800] { animation: fadeInUp-30121800 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .order-info-card[data-v-30121800]:nth-child(1) { animation-delay: 0.05s; } .order-info-card[data-v-30121800]:nth-child(2) { animation-delay: 0.1s; } .order-info-card[data-v-30121800]:nth-child(3) { animation-delay: 0.15s; } .order-info-card[data-v-30121800]:nth-child(4) { animation-delay: 0.2s; } .order-info-card[data-v-30121800]:nth-child(5) { animation-delay: 0.25s; } @keyframes fadeInUp-30121800 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { .order-detail[data-v-30121800] { gap: 20px; padding: 4px; } .order-info-card[data-v-30121800] { padding: 18px; } .info-grid[data-v-30121800] { grid-template-columns: 1fr; gap: 12px; } .products-table .table-header[data-v-30121800], .products-table .table-row[data-v-30121800] { grid-template-columns: 2fr 1fr 1fr; font-size: 12px; } .products-table .col-price[data-v-30121800] { display: none; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-981603d3]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-981603d3] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-981603d3] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-981603d3]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-981603d3], .theme-mode-light[data-v-981603d3] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-981603d3], .theme-mode-dark[data-v-981603d3] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-981603d3]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-981603d3]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-981603d3] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-981603d3] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-981603d3]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-981603d3], input[disabled][data-v-981603d3] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-981603d3] { opacity: 0.9; } input[readonly][data-v-981603d3] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-981603d3] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-981603d3]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-981603d3]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-981603d3]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-981603d3] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-981603d3]:nth-child(odd), .list-card-desktop__wrapper[data-v-981603d3]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-981603d3]:nth-child(even), .list-card-desktop__wrapper[data-v-981603d3]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-981603d3]:nth-child(odd), .listCardDesktopWrapper[data-v-981603d3]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-981603d3]:nth-child(even), .listCardDesktopWrapper[data-v-981603d3]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-981603d3] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-981603d3] { cursor: pointer; } .card-layout--selectionnable[data-v-981603d3]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-981603d3] { cursor: auto; } .card-layout--drawer[data-v-981603d3] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-981603d3] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-981603d3] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-981603d3] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-981603d3] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-981603d3] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-981603d3]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-981603d3] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-981603d3] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-981603d3] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-981603d3] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-981603d3] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-981603d3] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-981603d3] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-981603d3] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-981603d3] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-981603d3] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-981603d3] { background-color: #eb1515; } .color-chip--dossiers[data-v-981603d3] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-981603d3] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-981603d3] { background-color: #00a79b; } .color-chip--virements[data-v-981603d3] { background-color: var(--secondary-400); } .color-chip--factures[data-v-981603d3] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-981603d3] { background-color: #eb1515; } .color-recherche-dossiers[data-v-981603d3] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-981603d3] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-981603d3] { background-color: #00a79b; } .color-recherche-virements[data-v-981603d3] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-981603d3] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-981603d3] { color: #00a79b; cursor: pointer; } .scrollable[data-v-981603d3] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-981603d3] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-981603d3] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-981603d3] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-981603d3] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-981603d3] { font-weight: 800; } .grid-cell--column[data-v-981603d3] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-981603d3] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-981603d3] { fill: #00a79b; } .grid-cell--disabled[data-v-981603d3] { color: #cccccc; } .grid-cell--disabled svg[data-v-981603d3] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-981603d3] { white-space: nowrap; } .grid-cell--danger svg[data-v-981603d3] { fill: #eb1515; } .grid-cell--span-1[data-v-981603d3] { grid-column: span 1; } .grid-cell--span-2[data-v-981603d3] { grid-column: span 2; } .grid-cell--span-3[data-v-981603d3] { grid-column: span 3; } .grid-cell--span-4[data-v-981603d3] { grid-column: span 4; } .grid-cell--span-5[data-v-981603d3] { grid-column: span 5; } .grid-cell--span-6[data-v-981603d3] { grid-column: span 6; } .grid-cell--span-7[data-v-981603d3] { grid-column: span 7; } .grid-cell--span-8[data-v-981603d3] { grid-column: span 8; } .grid-cell--span-9[data-v-981603d3] { grid-column: span 9; } .grid-cell--span-10[data-v-981603d3] { grid-column: span 10; } .grid-cell--span-12[data-v-981603d3] { grid-column: span 12; } .grid-cell--span-13[data-v-981603d3] { grid-column: span 13; } .grid-cell--span-14[data-v-981603d3] { grid-column: span 14; } .grid-cell--span-16[data-v-981603d3] { grid-column: span 16; } .grid-cell--span-18[data-v-981603d3] { grid-column: span 18; } .grid-cell--span-20[data-v-981603d3] { grid-column: span 20; } .grid-cell--span-32[data-v-981603d3] { grid-column: span 32; } .grid-cell--span-36[data-v-981603d3] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-981603d3] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-981603d3] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-981603d3] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-981603d3] { justify-content: center !important; } .elem--bold span[data-v-981603d3] { font-weight: 800; } .elem--column[data-v-981603d3] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-981603d3] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-981603d3] { fill: #00a79b; } .elem--clickable[data-v-981603d3]:hover { cursor: pointer; } .elem--disabled[data-v-981603d3] { color: #cccccc; } .elem--disabled svg[data-v-981603d3] { fill: #cccccc; } .elem--nowrap span[data-v-981603d3] { white-space: nowrap; } .elem--danger svg[data-v-981603d3] { fill: #eb1515; } .elem--span-1[data-v-981603d3] { grid-column: span 1; } .elem--span-2[data-v-981603d3] { grid-column: span 2; } .elem--span-3[data-v-981603d3] { grid-column: span 3; } .elem--span-4[data-v-981603d3] { grid-column: span 4; } .elem--span-5[data-v-981603d3] { grid-column: span 5; } .elem--span-6[data-v-981603d3] { grid-column: span 6; } .elem--span-7[data-v-981603d3] { grid-column: span 7; } .elem--span-8[data-v-981603d3] { grid-column: span 8; } .elem--span-9[data-v-981603d3] { grid-column: span 9; } .elem--span-10[data-v-981603d3] { grid-column: span 10; } .elem--span-12[data-v-981603d3] { grid-column: span 12; } .elem--span-13[data-v-981603d3] { grid-column: span 13; } .elem--span-14[data-v-981603d3] { grid-column: span 14; } .elem--span-16[data-v-981603d3] { grid-column: span 16; } .elem--span-18[data-v-981603d3] { grid-column: span 18; } .elem--span-20[data-v-981603d3] { grid-column: span 20; } .elem--span-32[data-v-981603d3] { grid-column: span 32; } .elem--span-36[data-v-981603d3] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-981603d3] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-981603d3] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-981603d3]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-981603d3] { display: flex; } /* flex-direction */ .flex-column[data-v-981603d3] { flex-direction: column; } .flex-row[data-v-981603d3] { flex-direction: row; } /* flex */ .flex-1[data-v-981603d3] { flex: 1 !important; } .flex-2[data-v-981603d3] { flex: 2; } .flex-3[data-v-981603d3] { flex: 3; } .flex-3[data-v-981603d3] { flex: 4; } .flex-5[data-v-981603d3] { flex: 5; } .flex-auto[data-v-981603d3] { flex: auto; } .flex-none[data-v-981603d3] { flex: none; } .flex-content[data-v-981603d3] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-981603d3] { flex-wrap: wrap; } .flex-nowrap[data-v-981603d3] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-981603d3] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-981603d3] { justify-content: flex-start; } .justify-content-end[data-v-981603d3] { justify-content: flex-end; } .justify-content-baseline[data-v-981603d3] { justify-content: baseline; } .justify-content-center[data-v-981603d3] { justify-content: center; } .justify-content-space-between[data-v-981603d3] { justify-content: space-between; } .justify-content-space-around[data-v-981603d3] { justify-content: space-around; } .justify-content-space-evenly[data-v-981603d3] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-981603d3] { align-items: flex-start; } .align-items-flex-end[data-v-981603d3] { align-items: flex-end; } .align-items-stretch[data-v-981603d3] { align-items: stretch; } .align-items-baseline[data-v-981603d3] { align-items: baseline; } .align-items-center[data-v-981603d3] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-981603d3] { align-content: flex-start; } .align-content-flex-end[data-v-981603d3] { align-content: flex-end; } .align-content-center[data-v-981603d3] { align-content: center; } .align-content-stretch[data-v-981603d3] { align-content: stretch; } .align-content-space-between[data-v-981603d3] { align-content: space-between; } .align-content-space-around[data-v-981603d3] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-981603d3] { align-self: flex-start; } .align-self-flex-end[data-v-981603d3] { align-self: flex-end; } .align-self-stretch[data-v-981603d3] { align-self: stretch; } .align-self-flex-baseline[data-v-981603d3] { align-self: baseline; } .align-self-center[data-v-981603d3] { align-self: center; } .align-self-auto[data-v-981603d3] { align-self: auto; } .flex-gap-1[data-v-981603d3] { gap: 4px; } .flex-gap-2[data-v-981603d3] { gap: 8px; } .flex-gap-3[data-v-981603d3] { gap: 12px; } .flex-gap-4[data-v-981603d3] { gap: 16px; } .flex-gap-5[data-v-981603d3] { gap: 20px; } .flex-gap-6[data-v-981603d3] { gap: 24px; } .flex-gap-7[data-v-981603d3] { gap: 28px; } .flex-gap-8[data-v-981603d3] { gap: 32px; } .flex-gap-10[data-v-981603d3] { gap: 40px; } .flex-gap-12[data-v-981603d3] { gap: 48px; } .col-none[data-v-981603d3] { display: none; } .col-auto[data-v-981603d3] { grid-column: auto; } .col-1[data-v-981603d3] { grid-column: span 1; } .col-2[data-v-981603d3] { grid-column: span 2; } .col-3[data-v-981603d3] { grid-column: span 3; } .col-4[data-v-981603d3] { grid-column: span 4; } .col-5[data-v-981603d3] { grid-column: span 5; } .col-6[data-v-981603d3] { grid-column: span 6; } .col-7[data-v-981603d3] { grid-column: span 7; } .col-8[data-v-981603d3] { grid-column: span 8; } .col-9[data-v-981603d3] { grid-column: span 9; } .col-10[data-v-981603d3] { grid-column: span 10; } .col-12[data-v-981603d3] { grid-column: span 12; } .col-13[data-v-981603d3] { grid-column: span 13; } .col-14[data-v-981603d3] { grid-column: span 14; } .col-15[data-v-981603d3] { grid-column: span 15; } .col-16[data-v-981603d3] { grid-column: span 16; } .col-18[data-v-981603d3] { grid-column: span 18; } .col-20[data-v-981603d3] { grid-column: span 20; } .col-22[data-v-981603d3] { grid-column: span 22; } .col-24[data-v-981603d3] { grid-column: span 24; } .col-26[data-v-981603d3] { grid-column: span 26; } .col-27[data-v-981603d3] { grid-column: span 27; } .col-28[data-v-981603d3] { grid-column: span 28; } .col-30[data-v-981603d3] { grid-column: span 30; } .col-36[data-v-981603d3] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-981603d3] { display: none; } .col-md-36[data-v-981603d3] { grid-column: span 36; } .col-md-28[data-v-981603d3] { grid-column: span 28; } .col-md-27[data-v-981603d3] { grid-column: span 27; } .col-md-24[data-v-981603d3] { grid-column: span 24; } .col-md-22[data-v-981603d3] { grid-column: span 22; } .col-md-20[data-v-981603d3] { grid-column: span 20; } .col-md-19[data-v-981603d3] { grid-column: span 19; } .col-md-18[data-v-981603d3] { grid-column: span 18; } .col-md-17[data-v-981603d3] { grid-column: span 17; } .col-md-16[data-v-981603d3] { grid-column: span 16; } .col-md-15[data-v-981603d3] { grid-column: span 15; } .col-md-14[data-v-981603d3] { grid-column: span 14; } .col-md-13[data-v-981603d3] { grid-column: span 13; } .col-md-12[data-v-981603d3] { grid-column: span 12; } .col-md-10[data-v-981603d3] { grid-column: span 10; } .col-md-9[data-v-981603d3] { grid-column: span 9; } .col-md-8[data-v-981603d3] { grid-column: span 8; } .col-md-6[data-v-981603d3] { grid-column: span 6; } .col-md-5[data-v-981603d3] { grid-column: span 5; } .col-md-4[data-v-981603d3] { grid-column: span 4; } .col-md-3[data-v-981603d3] { grid-column: span 3; } .col-md-2[data-v-981603d3] { grid-column: span 2; } .col-md-1[data-v-981603d3] { grid-column: span 1; } .col-md-auto[data-v-981603d3] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-981603d3] { display: none; } .col-sm-36[data-v-981603d3] { grid-column: span 36; } .col-sm-32[data-v-981603d3] { grid-column: span 32; } .col-sm-28[data-v-981603d3] { grid-column: span 28; } .col-sm-27[data-v-981603d3] { grid-column: span 27; } .col-sm-24[data-v-981603d3] { grid-column: span 24; } .col-sm-22[data-v-981603d3] { grid-column: span 22; } .col-sm-20[data-v-981603d3] { grid-column: span 20; } .col-sm-18[data-v-981603d3] { grid-column: span 18; } .col-sm-16[data-v-981603d3] { grid-column: span 16; } .col-sm-15[data-v-981603d3] { grid-column: span 15; } .col-sm-14[data-v-981603d3] { grid-column: span 14; } .col-sm-13[data-v-981603d3] { grid-column: span 12; } .col-sm-12[data-v-981603d3] { grid-column: span 12; } .col-sm-10[data-v-981603d3] { grid-column: span 10; } .col-sm-9[data-v-981603d3] { grid-column: span 8; } .col-sm-8[data-v-981603d3] { grid-column: span 8; } .col-sm-6[data-v-981603d3] { grid-column: span 6; } .col-sm-4[data-v-981603d3] { grid-column: span 4; } .col-sm-auto[data-v-981603d3] { grid-column: auto; } } .fade-enter-active[data-v-981603d3] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-981603d3] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-981603d3], .fade-leave-to[data-v-981603d3] { opacity: 0; } @media (max-width: 720px) { .hide-mobile[data-v-981603d3] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-981603d3] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-981603d3] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-981603d3] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-981603d3] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-981603d3] { display: none !important; } } .admin-orders__tabs[data-v-981603d3] { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 16px; background: var(--bg-subtle); padding: 4px; border-radius: 8px; } .admin-orders__tab[data-v-981603d3] { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all 0.2s ease; white-space: nowrap; } .admin-orders__tab[data-v-981603d3]:hover { background: rgba(var(--primary-500-rgb), 0.08); color: var(--text-primary); } .admin-orders__tab--active[data-v-981603d3] { background: rgba(var(--primary-500-rgb), 0.12); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .admin-orders__tab--priority .admin-orders__tab-label[data-v-981603d3] { color: var(--warning-700); font-weight: 600; } .admin-orders__tab--priority.admin-orders__tab--active[data-v-981603d3] { background: var(--warning-50); border: 1px solid var(--warning-200); } .admin-orders__tab-icon[data-v-981603d3] { display: none; flex-shrink: 0; } .admin-orders__tab-count[data-v-981603d3] { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 600; border-radius: 10px; background: var(--border-default); color: var(--text-secondary); } .admin-orders__tab-count--alert[data-v-981603d3] { background: var(--warning-500); color: #ffffff; animation: pulse-981603d3 2s infinite; } @keyframes pulse-981603d3 { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @media (max-width: 1160px) { .admin-orders__tabs[data-v-981603d3] { margin-left: 0; margin-top: 8px; width: 100%; order: 10; } .admin-orders__tab[data-v-981603d3] { padding: 6px 10px; font-size: 12px; } } @media (max-width: 720px) { .admin-orders__tabs[data-v-981603d3] { justify-content: center; } .admin-orders__tab[data-v-981603d3] { flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 60px; min-height: 44px; padding: 8px 6px; } .admin-orders__tab-icon[data-v-981603d3] { display: block; } .admin-orders__tab-label[data-v-981603d3] { display: none; } .admin-orders__tab-count[data-v-981603d3] { min-width: 22px; height: 18px; font-size: 10px; } } .admin-orders__row[data-v-981603d3] { transition: all 0.15s ease; } .admin-orders__row--pending[data-v-981603d3] { border-left: 3px solid var(--warning-500); background: linear-gradient(90deg, var(--warning-50) 0%, transparent 10%); } .admin-orders__item[data-v-981603d3] { cursor: default; transition: background-color 0.15s ease; } .admin-orders__item[data-v-981603d3]:hover { background: rgba(var(--primary-500-rgb), 0.08); } .admin-orders__ref[data-v-981603d3] { font-family: monospace; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-subtle); padding: 4px 8px; border-radius: 4px; } .admin-orders__date[data-v-981603d3] { font-size: 13px; color: var(--text-secondary); } .admin-orders__client[data-v-981603d3] { display: flex; flex-direction: column; gap: 2px; } .admin-orders__client-name[data-v-981603d3] { font-weight: 500; color: var(--text-primary); font-size: 14px; } .admin-orders__client-email[data-v-981603d3] { font-size: 12px; color: var(--text-muted); } .admin-orders__amount[data-v-981603d3] { font-weight: 600; font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; } .admin-orders__payment-method[data-v-981603d3] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; } .admin-orders__payment-method.payment--crypto[data-v-981603d3] { background: linear-gradient(135deg, #f7931a20 0%, #f7931a10 100%); color: #f7931a; border: 1px solid #f7931a40; } .admin-orders__payment-method.payment--bank[data-v-981603d3] { background: linear-gradient(135deg, #1a73e820 0%, #1a73e810 100%); color: #1a73e8; border: 1px solid #1a73e840; } .admin-orders__payment-method.payment--card[data-v-981603d3] { background: linear-gradient(135deg, #6772e520 0%, #6772e510 100%); color: #6772e5; border: 1px solid #6772e540; } .admin-orders__payment-icon[data-v-981603d3] { flex-shrink: 0; } .admin-orders__actions[data-v-981603d3] { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .admin-orders__validate-btn[data-v-981603d3], .admin-orders__details-btn[data-v-981603d3], .admin-orders__delete-btn[data-v-981603d3] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .admin-orders__validate-btn[data-v-981603d3] { background: var(--success-100); color: var(--success-700); } .admin-orders__validate-btn[data-v-981603d3]:hover { background: var(--success-500); color: #ffffff; box-shadow: 0 2px 8px rgba(var(--success-500-rgb), 0.3); } .admin-orders__details-btn[data-v-981603d3] { background: var(--bg-subtle); color: var(--text-secondary); } .admin-orders__details-btn[data-v-981603d3]:hover { background: var(--primary-100); color: var(--primary-700); } .admin-orders__delete-btn[data-v-981603d3] { background: transparent; color: var(--text-muted); } .admin-orders__delete-btn[data-v-981603d3]:hover { background: var(--danger-100); color: var(--danger-600); } .admin-orders__mobile-card[data-v-981603d3] { margin: 4px 0; } .validation-modal[data-v-981603d3] { padding: 16px; text-align: center; } .validation-modal__icon-wrapper[data-v-981603d3] { display: flex; justify-content: center; margin-bottom: 20px; } .validation-modal__icon[data-v-981603d3] { width: 64px; height: 64px; padding: 16px; border-radius: 50%; } .validation-modal__icon.payment--crypto[data-v-981603d3] { background: #f7931a15; color: #f7931a; } .validation-modal__icon.payment--bank[data-v-981603d3] { background: #1a73e815; color: #1a73e8; } .validation-modal__icon.payment--card[data-v-981603d3] { background: #6772e515; color: #6772e5; } .validation-modal__question[data-v-981603d3] { font-size: 16px; color: var(--text-primary); margin-bottom: 24px; line-height: 1.5; } .validation-modal__question strong[data-v-981603d3] { color: var(--text-primary); font-weight: 700; } .validation-modal__details[data-v-981603d3] { background: var(--bg-subtle); border-radius: 8px; padding: 16px; margin-bottom: 20px; text-align: left; } .validation-modal__detail-row[data-v-981603d3] { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-default); } .validation-modal__detail-row[data-v-981603d3]:last-child { border-bottom: none; } .validation-modal__detail-label[data-v-981603d3] { font-size: 13px; color: var(--text-muted); } .validation-modal__detail-value[data-v-981603d3] { font-size: 13px; font-weight: 500; color: var(--text-primary); } .validation-modal__warning[data-v-981603d3] { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--info-50); border: 1px solid var(--info-200); border-radius: 8px; margin-bottom: 24px; font-size: 13px; color: var(--info-700); } .validation-modal__warning-icon[data-v-981603d3] { flex-shrink: 0; color: var(--info-500); } .validation-modal__actions[data-v-981603d3] { display: flex; gap: 12px; justify-content: center; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-de606958]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-de606958] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-de606958] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-de606958]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-de606958], .theme-mode-light[data-v-de606958] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-de606958], .theme-mode-dark[data-v-de606958] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-de606958]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-de606958]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-de606958] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-de606958] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-de606958]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-de606958], input[disabled][data-v-de606958] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-de606958] { opacity: 0.9; } input[readonly][data-v-de606958] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-de606958] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-de606958]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-de606958]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-de606958]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-de606958] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-de606958]:nth-child(odd), .list-card-desktop__wrapper[data-v-de606958]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-de606958]:nth-child(even), .list-card-desktop__wrapper[data-v-de606958]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-de606958]:nth-child(odd), .listCardDesktopWrapper[data-v-de606958]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-de606958]:nth-child(even), .listCardDesktopWrapper[data-v-de606958]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-de606958] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-de606958] { cursor: pointer; } .card-layout--selectionnable[data-v-de606958]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-de606958] { cursor: auto; } .card-layout--drawer[data-v-de606958] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-de606958] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-de606958] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-de606958] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-de606958] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-de606958] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-de606958]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-de606958] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-de606958] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-de606958] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-de606958] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-de606958] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-de606958] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-de606958] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-de606958] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-de606958] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-de606958] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-de606958] { background-color: #eb1515; } .color-chip--dossiers[data-v-de606958] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-de606958] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-de606958] { background-color: #00a79b; } .color-chip--virements[data-v-de606958] { background-color: var(--secondary-400); } .color-chip--factures[data-v-de606958] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-de606958] { background-color: #eb1515; } .color-recherche-dossiers[data-v-de606958] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-de606958] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-de606958] { background-color: #00a79b; } .color-recherche-virements[data-v-de606958] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-de606958] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-de606958] { color: #00a79b; cursor: pointer; } .scrollable[data-v-de606958] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-de606958] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-de606958] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-de606958] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-de606958] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-de606958] { font-weight: 800; } .grid-cell--column[data-v-de606958] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-de606958] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-de606958] { fill: #00a79b; } .grid-cell--disabled[data-v-de606958] { color: #cccccc; } .grid-cell--disabled svg[data-v-de606958] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-de606958] { white-space: nowrap; } .grid-cell--danger svg[data-v-de606958] { fill: #eb1515; } .grid-cell--span-1[data-v-de606958] { grid-column: span 1; } .grid-cell--span-2[data-v-de606958] { grid-column: span 2; } .grid-cell--span-3[data-v-de606958] { grid-column: span 3; } .grid-cell--span-4[data-v-de606958] { grid-column: span 4; } .grid-cell--span-5[data-v-de606958] { grid-column: span 5; } .grid-cell--span-6[data-v-de606958] { grid-column: span 6; } .grid-cell--span-7[data-v-de606958] { grid-column: span 7; } .grid-cell--span-8[data-v-de606958] { grid-column: span 8; } .grid-cell--span-9[data-v-de606958] { grid-column: span 9; } .grid-cell--span-10[data-v-de606958] { grid-column: span 10; } .grid-cell--span-12[data-v-de606958] { grid-column: span 12; } .grid-cell--span-13[data-v-de606958] { grid-column: span 13; } .grid-cell--span-14[data-v-de606958] { grid-column: span 14; } .grid-cell--span-16[data-v-de606958] { grid-column: span 16; } .grid-cell--span-18[data-v-de606958] { grid-column: span 18; } .grid-cell--span-20[data-v-de606958] { grid-column: span 20; } .grid-cell--span-32[data-v-de606958] { grid-column: span 32; } .grid-cell--span-36[data-v-de606958] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-de606958] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-de606958] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-de606958] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-de606958] { justify-content: center !important; } .elem--bold span[data-v-de606958] { font-weight: 800; } .elem--column[data-v-de606958] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-de606958] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-de606958] { fill: #00a79b; } .elem--clickable[data-v-de606958]:hover { cursor: pointer; } .elem--disabled[data-v-de606958] { color: #cccccc; } .elem--disabled svg[data-v-de606958] { fill: #cccccc; } .elem--nowrap span[data-v-de606958] { white-space: nowrap; } .elem--danger svg[data-v-de606958] { fill: #eb1515; } .elem--span-1[data-v-de606958] { grid-column: span 1; } .elem--span-2[data-v-de606958] { grid-column: span 2; } .elem--span-3[data-v-de606958] { grid-column: span 3; } .elem--span-4[data-v-de606958] { grid-column: span 4; } .elem--span-5[data-v-de606958] { grid-column: span 5; } .elem--span-6[data-v-de606958] { grid-column: span 6; } .elem--span-7[data-v-de606958] { grid-column: span 7; } .elem--span-8[data-v-de606958] { grid-column: span 8; } .elem--span-9[data-v-de606958] { grid-column: span 9; } .elem--span-10[data-v-de606958] { grid-column: span 10; } .elem--span-12[data-v-de606958] { grid-column: span 12; } .elem--span-13[data-v-de606958] { grid-column: span 13; } .elem--span-14[data-v-de606958] { grid-column: span 14; } .elem--span-16[data-v-de606958] { grid-column: span 16; } .elem--span-18[data-v-de606958] { grid-column: span 18; } .elem--span-20[data-v-de606958] { grid-column: span 20; } .elem--span-32[data-v-de606958] { grid-column: span 32; } .elem--span-36[data-v-de606958] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-de606958] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-de606958] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-de606958]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-de606958] { display: flex; } /* flex-direction */ .flex-column[data-v-de606958] { flex-direction: column; } .flex-row[data-v-de606958] { flex-direction: row; } /* flex */ .flex-1[data-v-de606958] { flex: 1 !important; } .flex-2[data-v-de606958] { flex: 2; } .flex-3[data-v-de606958] { flex: 3; } .flex-3[data-v-de606958] { flex: 4; } .flex-5[data-v-de606958] { flex: 5; } .flex-auto[data-v-de606958] { flex: auto; } .flex-none[data-v-de606958] { flex: none; } .flex-content[data-v-de606958] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-de606958] { flex-wrap: wrap; } .flex-nowrap[data-v-de606958] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-de606958] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-de606958] { justify-content: flex-start; } .justify-content-end[data-v-de606958] { justify-content: flex-end; } .justify-content-baseline[data-v-de606958] { justify-content: baseline; } .justify-content-center[data-v-de606958] { justify-content: center; } .justify-content-space-between[data-v-de606958] { justify-content: space-between; } .justify-content-space-around[data-v-de606958] { justify-content: space-around; } .justify-content-space-evenly[data-v-de606958] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-de606958] { align-items: flex-start; } .align-items-flex-end[data-v-de606958] { align-items: flex-end; } .align-items-stretch[data-v-de606958] { align-items: stretch; } .align-items-baseline[data-v-de606958] { align-items: baseline; } .align-items-center[data-v-de606958] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-de606958] { align-content: flex-start; } .align-content-flex-end[data-v-de606958] { align-content: flex-end; } .align-content-center[data-v-de606958] { align-content: center; } .align-content-stretch[data-v-de606958] { align-content: stretch; } .align-content-space-between[data-v-de606958] { align-content: space-between; } .align-content-space-around[data-v-de606958] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-de606958] { align-self: flex-start; } .align-self-flex-end[data-v-de606958] { align-self: flex-end; } .align-self-stretch[data-v-de606958] { align-self: stretch; } .align-self-flex-baseline[data-v-de606958] { align-self: baseline; } .align-self-center[data-v-de606958] { align-self: center; } .align-self-auto[data-v-de606958] { align-self: auto; } .flex-gap-1[data-v-de606958] { gap: 4px; } .flex-gap-2[data-v-de606958] { gap: 8px; } .flex-gap-3[data-v-de606958] { gap: 12px; } .flex-gap-4[data-v-de606958] { gap: 16px; } .flex-gap-5[data-v-de606958] { gap: 20px; } .flex-gap-6[data-v-de606958] { gap: 24px; } .flex-gap-7[data-v-de606958] { gap: 28px; } .flex-gap-8[data-v-de606958] { gap: 32px; } .flex-gap-10[data-v-de606958] { gap: 40px; } .flex-gap-12[data-v-de606958] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-de606958] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-de606958] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-de606958] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-de606958] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-de606958] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-de606958] { display: none !important; } } .col-none[data-v-de606958] { display: none; } .col-auto[data-v-de606958] { grid-column: auto; } .col-1[data-v-de606958] { grid-column: span 1; } .col-2[data-v-de606958] { grid-column: span 2; } .col-3[data-v-de606958] { grid-column: span 3; } .col-4[data-v-de606958] { grid-column: span 4; } .col-5[data-v-de606958] { grid-column: span 5; } .col-6[data-v-de606958] { grid-column: span 6; } .col-7[data-v-de606958] { grid-column: span 7; } .col-8[data-v-de606958] { grid-column: span 8; } .col-9[data-v-de606958] { grid-column: span 9; } .col-10[data-v-de606958] { grid-column: span 10; } .col-12[data-v-de606958] { grid-column: span 12; } .col-13[data-v-de606958] { grid-column: span 13; } .col-14[data-v-de606958] { grid-column: span 14; } .col-15[data-v-de606958] { grid-column: span 15; } .col-16[data-v-de606958] { grid-column: span 16; } .col-18[data-v-de606958] { grid-column: span 18; } .col-20[data-v-de606958] { grid-column: span 20; } .col-22[data-v-de606958] { grid-column: span 22; } .col-24[data-v-de606958] { grid-column: span 24; } .col-26[data-v-de606958] { grid-column: span 26; } .col-27[data-v-de606958] { grid-column: span 27; } .col-28[data-v-de606958] { grid-column: span 28; } .col-30[data-v-de606958] { grid-column: span 30; } .col-36[data-v-de606958] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-de606958] { display: none; } .col-md-36[data-v-de606958] { grid-column: span 36; } .col-md-28[data-v-de606958] { grid-column: span 28; } .col-md-27[data-v-de606958] { grid-column: span 27; } .col-md-24[data-v-de606958] { grid-column: span 24; } .col-md-22[data-v-de606958] { grid-column: span 22; } .col-md-20[data-v-de606958] { grid-column: span 20; } .col-md-19[data-v-de606958] { grid-column: span 19; } .col-md-18[data-v-de606958] { grid-column: span 18; } .col-md-17[data-v-de606958] { grid-column: span 17; } .col-md-16[data-v-de606958] { grid-column: span 16; } .col-md-15[data-v-de606958] { grid-column: span 15; } .col-md-14[data-v-de606958] { grid-column: span 14; } .col-md-13[data-v-de606958] { grid-column: span 13; } .col-md-12[data-v-de606958] { grid-column: span 12; } .col-md-10[data-v-de606958] { grid-column: span 10; } .col-md-9[data-v-de606958] { grid-column: span 9; } .col-md-8[data-v-de606958] { grid-column: span 8; } .col-md-6[data-v-de606958] { grid-column: span 6; } .col-md-5[data-v-de606958] { grid-column: span 5; } .col-md-4[data-v-de606958] { grid-column: span 4; } .col-md-3[data-v-de606958] { grid-column: span 3; } .col-md-2[data-v-de606958] { grid-column: span 2; } .col-md-1[data-v-de606958] { grid-column: span 1; } .col-md-auto[data-v-de606958] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-de606958] { display: none; } .col-sm-36[data-v-de606958] { grid-column: span 36; } .col-sm-32[data-v-de606958] { grid-column: span 32; } .col-sm-28[data-v-de606958] { grid-column: span 28; } .col-sm-27[data-v-de606958] { grid-column: span 27; } .col-sm-24[data-v-de606958] { grid-column: span 24; } .col-sm-22[data-v-de606958] { grid-column: span 22; } .col-sm-20[data-v-de606958] { grid-column: span 20; } .col-sm-18[data-v-de606958] { grid-column: span 18; } .col-sm-16[data-v-de606958] { grid-column: span 16; } .col-sm-15[data-v-de606958] { grid-column: span 15; } .col-sm-14[data-v-de606958] { grid-column: span 14; } .col-sm-13[data-v-de606958] { grid-column: span 12; } .col-sm-12[data-v-de606958] { grid-column: span 12; } .col-sm-10[data-v-de606958] { grid-column: span 10; } .col-sm-9[data-v-de606958] { grid-column: span 8; } .col-sm-8[data-v-de606958] { grid-column: span 8; } .col-sm-6[data-v-de606958] { grid-column: span 6; } .col-sm-4[data-v-de606958] { grid-column: span 4; } .col-sm-auto[data-v-de606958] { grid-column: auto; } } .fade-enter-active[data-v-de606958] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-de606958] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-de606958], .fade-leave-to[data-v-de606958] { opacity: 0; } .mobile-card[data-v-de606958] { background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: all 0.2s ease; } .mobile-card[data-v-de606958]:active { background: rgba(var(--primary-500-rgb), 0.08); } .row[data-v-de606958] { display: flex; justify-content: space-between; align-items: flex-start; } .info[data-v-de606958] { display: flex; flex-direction: column; gap: 4px; } .name-wrapper[data-v-de606958] { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .dosage-tag[data-v-de606958] { font-size: 11px; color: var(--text-secondary); font-weight: 500; background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px; } .sub-info[data-v-de606958] { display: flex; align-items: center; gap: 8px; } .promo-tag[data-v-de606958] { font-size: 9px; font-weight: 800; color: #ffffff; background: var(--danger-600); padding: 1px 4px; border-radius: 3px; } .price-column[data-v-de606958] { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .bottom-row[data-v-de606958] { align-items: center; border-top: 1px dashed var(--border-default); padding-top: 10px; } .stock-info[data-v-de606958] { display: flex; align-items: center; gap: 10px; } .purity-text[data-v-de606958] { font-size: 12px; color: var(--text-muted); } .action-btn[data-v-de606958] { min-width: 44px; min-height: 44px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-de52cddc]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-de52cddc] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-de52cddc] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-de52cddc]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-de52cddc], .theme-mode-light[data-v-de52cddc] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-de52cddc], .theme-mode-dark[data-v-de52cddc] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-de52cddc]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-de52cddc]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-de52cddc] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-de52cddc] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-de52cddc]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-de52cddc], input[disabled][data-v-de52cddc] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-de52cddc] { opacity: 0.9; } input[readonly][data-v-de52cddc] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-de52cddc] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-de52cddc]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-de52cddc]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-de52cddc]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-de52cddc] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-de52cddc]:nth-child(odd), .list-card-desktop__wrapper[data-v-de52cddc]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-de52cddc]:nth-child(even), .list-card-desktop__wrapper[data-v-de52cddc]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-de52cddc]:nth-child(odd), .listCardDesktopWrapper[data-v-de52cddc]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-de52cddc]:nth-child(even), .listCardDesktopWrapper[data-v-de52cddc]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-de52cddc] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-de52cddc] { cursor: pointer; } .card-layout--selectionnable[data-v-de52cddc]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-de52cddc] { cursor: auto; } .card-layout--drawer[data-v-de52cddc] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-de52cddc] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-de52cddc] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-de52cddc] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-de52cddc] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-de52cddc] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-de52cddc]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-de52cddc] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-de52cddc] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-de52cddc] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-de52cddc] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-de52cddc] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-de52cddc] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-de52cddc] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-de52cddc] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-de52cddc] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-de52cddc] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-de52cddc] { background-color: #eb1515; } .color-chip--dossiers[data-v-de52cddc] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-de52cddc] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-de52cddc] { background-color: #00a79b; } .color-chip--virements[data-v-de52cddc] { background-color: var(--secondary-400); } .color-chip--factures[data-v-de52cddc] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-de52cddc] { background-color: #eb1515; } .color-recherche-dossiers[data-v-de52cddc] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-de52cddc] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-de52cddc] { background-color: #00a79b; } .color-recherche-virements[data-v-de52cddc] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-de52cddc] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-de52cddc] { color: #00a79b; cursor: pointer; } .scrollable[data-v-de52cddc] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-de52cddc] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-de52cddc] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-de52cddc] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-de52cddc] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-de52cddc] { font-weight: 800; } .grid-cell--column[data-v-de52cddc] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-de52cddc] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-de52cddc] { fill: #00a79b; } .grid-cell--disabled[data-v-de52cddc] { color: #cccccc; } .grid-cell--disabled svg[data-v-de52cddc] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-de52cddc] { white-space: nowrap; } .grid-cell--danger svg[data-v-de52cddc] { fill: #eb1515; } .grid-cell--span-1[data-v-de52cddc] { grid-column: span 1; } .grid-cell--span-2[data-v-de52cddc] { grid-column: span 2; } .grid-cell--span-3[data-v-de52cddc] { grid-column: span 3; } .grid-cell--span-4[data-v-de52cddc] { grid-column: span 4; } .grid-cell--span-5[data-v-de52cddc] { grid-column: span 5; } .grid-cell--span-6[data-v-de52cddc] { grid-column: span 6; } .grid-cell--span-7[data-v-de52cddc] { grid-column: span 7; } .grid-cell--span-8[data-v-de52cddc] { grid-column: span 8; } .grid-cell--span-9[data-v-de52cddc] { grid-column: span 9; } .grid-cell--span-10[data-v-de52cddc] { grid-column: span 10; } .grid-cell--span-12[data-v-de52cddc] { grid-column: span 12; } .grid-cell--span-13[data-v-de52cddc] { grid-column: span 13; } .grid-cell--span-14[data-v-de52cddc] { grid-column: span 14; } .grid-cell--span-16[data-v-de52cddc] { grid-column: span 16; } .grid-cell--span-18[data-v-de52cddc] { grid-column: span 18; } .grid-cell--span-20[data-v-de52cddc] { grid-column: span 20; } .grid-cell--span-32[data-v-de52cddc] { grid-column: span 32; } .grid-cell--span-36[data-v-de52cddc] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-de52cddc] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-de52cddc] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-de52cddc] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-de52cddc] { justify-content: center !important; } .elem--bold span[data-v-de52cddc] { font-weight: 800; } .elem--column[data-v-de52cddc] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-de52cddc] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-de52cddc] { fill: #00a79b; } .elem--clickable[data-v-de52cddc]:hover { cursor: pointer; } .elem--disabled[data-v-de52cddc] { color: #cccccc; } .elem--disabled svg[data-v-de52cddc] { fill: #cccccc; } .elem--nowrap span[data-v-de52cddc] { white-space: nowrap; } .elem--danger svg[data-v-de52cddc] { fill: #eb1515; } .elem--span-1[data-v-de52cddc] { grid-column: span 1; } .elem--span-2[data-v-de52cddc] { grid-column: span 2; } .elem--span-3[data-v-de52cddc] { grid-column: span 3; } .elem--span-4[data-v-de52cddc] { grid-column: span 4; } .elem--span-5[data-v-de52cddc] { grid-column: span 5; } .elem--span-6[data-v-de52cddc] { grid-column: span 6; } .elem--span-7[data-v-de52cddc] { grid-column: span 7; } .elem--span-8[data-v-de52cddc] { grid-column: span 8; } .elem--span-9[data-v-de52cddc] { grid-column: span 9; } .elem--span-10[data-v-de52cddc] { grid-column: span 10; } .elem--span-12[data-v-de52cddc] { grid-column: span 12; } .elem--span-13[data-v-de52cddc] { grid-column: span 13; } .elem--span-14[data-v-de52cddc] { grid-column: span 14; } .elem--span-16[data-v-de52cddc] { grid-column: span 16; } .elem--span-18[data-v-de52cddc] { grid-column: span 18; } .elem--span-20[data-v-de52cddc] { grid-column: span 20; } .elem--span-32[data-v-de52cddc] { grid-column: span 32; } .elem--span-36[data-v-de52cddc] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-de52cddc] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-de52cddc] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-de52cddc]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-de52cddc] { display: flex; } /* flex-direction */ .flex-column[data-v-de52cddc] { flex-direction: column; } .flex-row[data-v-de52cddc] { flex-direction: row; } /* flex */ .flex-1[data-v-de52cddc] { flex: 1 !important; } .flex-2[data-v-de52cddc] { flex: 2; } .flex-3[data-v-de52cddc] { flex: 3; } .flex-3[data-v-de52cddc] { flex: 4; } .flex-5[data-v-de52cddc] { flex: 5; } .flex-auto[data-v-de52cddc] { flex: auto; } .flex-none[data-v-de52cddc] { flex: none; } .flex-content[data-v-de52cddc] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-de52cddc] { flex-wrap: wrap; } .flex-nowrap[data-v-de52cddc] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-de52cddc] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-de52cddc] { justify-content: flex-start; } .justify-content-end[data-v-de52cddc] { justify-content: flex-end; } .justify-content-baseline[data-v-de52cddc] { justify-content: baseline; } .justify-content-center[data-v-de52cddc] { justify-content: center; } .justify-content-space-between[data-v-de52cddc] { justify-content: space-between; } .justify-content-space-around[data-v-de52cddc] { justify-content: space-around; } .justify-content-space-evenly[data-v-de52cddc] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-de52cddc] { align-items: flex-start; } .align-items-flex-end[data-v-de52cddc] { align-items: flex-end; } .align-items-stretch[data-v-de52cddc] { align-items: stretch; } .align-items-baseline[data-v-de52cddc] { align-items: baseline; } .align-items-center[data-v-de52cddc] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-de52cddc] { align-content: flex-start; } .align-content-flex-end[data-v-de52cddc] { align-content: flex-end; } .align-content-center[data-v-de52cddc] { align-content: center; } .align-content-stretch[data-v-de52cddc] { align-content: stretch; } .align-content-space-between[data-v-de52cddc] { align-content: space-between; } .align-content-space-around[data-v-de52cddc] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-de52cddc] { align-self: flex-start; } .align-self-flex-end[data-v-de52cddc] { align-self: flex-end; } .align-self-stretch[data-v-de52cddc] { align-self: stretch; } .align-self-flex-baseline[data-v-de52cddc] { align-self: baseline; } .align-self-center[data-v-de52cddc] { align-self: center; } .align-self-auto[data-v-de52cddc] { align-self: auto; } .flex-gap-1[data-v-de52cddc] { gap: 4px; } .flex-gap-2[data-v-de52cddc] { gap: 8px; } .flex-gap-3[data-v-de52cddc] { gap: 12px; } .flex-gap-4[data-v-de52cddc] { gap: 16px; } .flex-gap-5[data-v-de52cddc] { gap: 20px; } .flex-gap-6[data-v-de52cddc] { gap: 24px; } .flex-gap-7[data-v-de52cddc] { gap: 28px; } .flex-gap-8[data-v-de52cddc] { gap: 32px; } .flex-gap-10[data-v-de52cddc] { gap: 40px; } .flex-gap-12[data-v-de52cddc] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-de52cddc] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-de52cddc] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-de52cddc] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-de52cddc] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-de52cddc] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-de52cddc] { display: none !important; } } .col-none[data-v-de52cddc] { display: none; } .col-auto[data-v-de52cddc] { grid-column: auto; } .col-1[data-v-de52cddc] { grid-column: span 1; } .col-2[data-v-de52cddc] { grid-column: span 2; } .col-3[data-v-de52cddc] { grid-column: span 3; } .col-4[data-v-de52cddc] { grid-column: span 4; } .col-5[data-v-de52cddc] { grid-column: span 5; } .col-6[data-v-de52cddc] { grid-column: span 6; } .col-7[data-v-de52cddc] { grid-column: span 7; } .col-8[data-v-de52cddc] { grid-column: span 8; } .col-9[data-v-de52cddc] { grid-column: span 9; } .col-10[data-v-de52cddc] { grid-column: span 10; } .col-12[data-v-de52cddc] { grid-column: span 12; } .col-13[data-v-de52cddc] { grid-column: span 13; } .col-14[data-v-de52cddc] { grid-column: span 14; } .col-15[data-v-de52cddc] { grid-column: span 15; } .col-16[data-v-de52cddc] { grid-column: span 16; } .col-18[data-v-de52cddc] { grid-column: span 18; } .col-20[data-v-de52cddc] { grid-column: span 20; } .col-22[data-v-de52cddc] { grid-column: span 22; } .col-24[data-v-de52cddc] { grid-column: span 24; } .col-26[data-v-de52cddc] { grid-column: span 26; } .col-27[data-v-de52cddc] { grid-column: span 27; } .col-28[data-v-de52cddc] { grid-column: span 28; } .col-30[data-v-de52cddc] { grid-column: span 30; } .col-36[data-v-de52cddc] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-de52cddc] { display: none; } .col-md-36[data-v-de52cddc] { grid-column: span 36; } .col-md-28[data-v-de52cddc] { grid-column: span 28; } .col-md-27[data-v-de52cddc] { grid-column: span 27; } .col-md-24[data-v-de52cddc] { grid-column: span 24; } .col-md-22[data-v-de52cddc] { grid-column: span 22; } .col-md-20[data-v-de52cddc] { grid-column: span 20; } .col-md-19[data-v-de52cddc] { grid-column: span 19; } .col-md-18[data-v-de52cddc] { grid-column: span 18; } .col-md-17[data-v-de52cddc] { grid-column: span 17; } .col-md-16[data-v-de52cddc] { grid-column: span 16; } .col-md-15[data-v-de52cddc] { grid-column: span 15; } .col-md-14[data-v-de52cddc] { grid-column: span 14; } .col-md-13[data-v-de52cddc] { grid-column: span 13; } .col-md-12[data-v-de52cddc] { grid-column: span 12; } .col-md-10[data-v-de52cddc] { grid-column: span 10; } .col-md-9[data-v-de52cddc] { grid-column: span 9; } .col-md-8[data-v-de52cddc] { grid-column: span 8; } .col-md-6[data-v-de52cddc] { grid-column: span 6; } .col-md-5[data-v-de52cddc] { grid-column: span 5; } .col-md-4[data-v-de52cddc] { grid-column: span 4; } .col-md-3[data-v-de52cddc] { grid-column: span 3; } .col-md-2[data-v-de52cddc] { grid-column: span 2; } .col-md-1[data-v-de52cddc] { grid-column: span 1; } .col-md-auto[data-v-de52cddc] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-de52cddc] { display: none; } .col-sm-36[data-v-de52cddc] { grid-column: span 36; } .col-sm-32[data-v-de52cddc] { grid-column: span 32; } .col-sm-28[data-v-de52cddc] { grid-column: span 28; } .col-sm-27[data-v-de52cddc] { grid-column: span 27; } .col-sm-24[data-v-de52cddc] { grid-column: span 24; } .col-sm-22[data-v-de52cddc] { grid-column: span 22; } .col-sm-20[data-v-de52cddc] { grid-column: span 20; } .col-sm-18[data-v-de52cddc] { grid-column: span 18; } .col-sm-16[data-v-de52cddc] { grid-column: span 16; } .col-sm-15[data-v-de52cddc] { grid-column: span 15; } .col-sm-14[data-v-de52cddc] { grid-column: span 14; } .col-sm-13[data-v-de52cddc] { grid-column: span 12; } .col-sm-12[data-v-de52cddc] { grid-column: span 12; } .col-sm-10[data-v-de52cddc] { grid-column: span 10; } .col-sm-9[data-v-de52cddc] { grid-column: span 8; } .col-sm-8[data-v-de52cddc] { grid-column: span 8; } .col-sm-6[data-v-de52cddc] { grid-column: span 6; } .col-sm-4[data-v-de52cddc] { grid-column: span 4; } .col-sm-auto[data-v-de52cddc] { grid-column: auto; } } .fade-enter-active[data-v-de52cddc] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-de52cddc] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-de52cddc], .fade-leave-to[data-v-de52cddc] { opacity: 0; } .product-form[data-v-de52cddc] { display: flex; flex-direction: column; gap: 28px; padding: 16px; overflow-x: hidden; /* Empêche le scroll horizontal */ } .form-section[data-v-de52cddc] { position: relative; padding: 24px; border: 1px solid #e2e7ef; border-radius: 16px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); } .form-section[data-v-de52cddc]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--primary-300)); border-radius: 16px 16px 0 0; opacity: 0; transition: opacity 0.3s; } .form-section[data-v-de52cddc]:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06); border-color: var(--primary-300); background: #ffffff; } .form-section[data-v-de52cddc]:hover::before { opacity: 1; } .section-title[data-v-de52cddc] { margin-bottom: 8px; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 700; color: var(--primary-600); display: flex; align-items: center; gap: 8px; } .section-title[data-v-de52cddc]::before { content: ''; width: 4px; height: 16px; background: linear-gradient(180deg, var(--primary-500), var(--primary-300)); border-radius: 2px; } .section-header[data-v-de52cddc] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 2px solid #edf1f5; } .form-row[data-v-de52cddc] { display: flex; gap: 16px; align-items: flex-start; } @media (max-width: 720px) { .form-row[data-v-de52cddc] { flex-direction: column; gap: 12px; } } .flex-grow-1[data-v-de52cddc] { flex: 1; } .flex-grow-2[data-v-de52cddc] { flex: 2; } .promo-container[data-v-de52cddc] { position: relative; } .helper-text[data-v-de52cddc] { margin-top: 8px; font-size: 0.8rem; color: #94a2b8; display: flex; align-items: center; gap: 6px; } .helper-text[data-v-de52cddc]::before { content: 'ℹ'; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--primary-100); color: var(--primary-600); border-radius: 50%; font-size: 0.7rem; font-weight: 700; } .custom-textarea[data-v-de52cddc] { width: 100%; padding: 14px 16px; border: 2px solid #e2e7ef; border-radius: 12px; font-family: inherit; font-size: 14px; line-height: 1.6; resize: vertical; background: #ffffff; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); min-height: 120px; } .custom-textarea[data-v-de52cddc]:hover { border-color: var(--primary-300); } .custom-textarea[data-v-de52cddc]:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(var(--primary-500-rgb), 0.1), 0 2px 8px rgba(var(--primary-500-rgb), 0.15); background: #ffffff; } .custom-textarea[data-v-de52cddc]::placeholder { color: #b4bfce; } .cursor-pointer[data-v-de52cddc] { cursor: pointer; } .hidden-input[data-v-de52cddc] { display: none; } .image-preview[data-v-de52cddc] { margin-top: 16px; padding: 20px; border: 2px dashed var(--primary-200); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.03) 0%, rgba(var(--primary-300-rgb), 0.05) 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; overflow: hidden; } .image-preview[data-v-de52cddc]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: radial-gradient(circle at 50% 0%, rgba(var(--primary-500-rgb), 0.05) 0%, transparent 70%); pointer-events: none; } .image-preview img[data-v-de52cddc] { max-height: 220px; max-width: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; } .image-preview img[data-v-de52cddc]:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); } .slide-in[data-v-de52cddc] { animation: slideInRight-de52cddc 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slideInRight-de52cddc { from { opacity: 0; transform: translateX(-20px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } .form-section[data-v-de52cddc] { animation: fadeInUp-de52cddc 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .form-section[data-v-de52cddc]:nth-child(1) { animation-delay: 0.05s; } .form-section[data-v-de52cddc]:nth-child(2) { animation-delay: 0.1s; } .form-section[data-v-de52cddc]:nth-child(3) { animation-delay: 0.15s; } .form-section[data-v-de52cddc]:nth-child(4) { animation-delay: 0.2s; } .form-section[data-v-de52cddc]:nth-child(5) { animation-delay: 0.25s; } @keyframes fadeInUp-de52cddc { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } [data-v-de52cddc] .wrapper-input .input-wrapper { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } [data-v-de52cddc] .wrapper-input .input-wrapper:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .translations-section[data-v-de52cddc] { margin-top: 8px; border: 2px dashed var(--primary-200); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.02) 0%, rgba(var(--secondary-500-rgb), 0.02) 100%); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .translations-section[data-v-de52cddc]:hover { border-color: var(--primary-300); box-shadow: 0 4px 12px rgba(var(--primary-500-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); } .translations-section .translations-header[data-v-de52cddc] { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.05) 0%, rgba(var(--primary-300-rgb), 0.03) 100%); cursor: pointer; transition: all 0.2s; user-select: none; } .translations-section .translations-header[data-v-de52cddc]:hover { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.08) 0%, rgba(var(--primary-300-rgb), 0.06) 100%); } .translations-section .translations-header[data-v-de52cddc]:active { transform: scale(0.99); } .translations-section .translations-content[data-v-de52cddc] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; background: #ffffff; animation: slideDown-de52cddc 0.3s ease-out; } @media (max-width: 720px) { .translations-section .translations-content[data-v-de52cddc] { grid-template-columns: 1fr; gap: 20px; padding: 16px; } } .translations-section .language-group[data-v-de52cddc] { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); border-radius: 12px; border: 1px solid #e2e7ef; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04); } .translations-section .language-group .language-title[data-v-de52cddc] { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--primary-100); margin-bottom: 4px; } .translations-section .language-group .custom-textarea[data-v-de52cddc] { border: 2px solid #e2e7ef; border-radius: 12px; padding: 14px 16px; font-size: 14px; width: 100%; resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.6; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .translations-section .language-group .custom-textarea[data-v-de52cddc]:hover { border-color: var(--primary-300); } .translations-section .language-group .custom-textarea[data-v-de52cddc]:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(var(--primary-500-rgb), 0.1), 0 2px 8px rgba(var(--primary-500-rgb), 0.15); background: #ffffff; } .translations-section .language-group .custom-textarea[data-v-de52cddc]::placeholder { color: #b4bfce; } @keyframes slideDown-de52cddc { from { opacity: 0; max-height: 0; transform: translateY(-10px); } to { opacity: 1; max-height: 1000px; transform: translateY(0); } } @media (max-width: 720px) { .product-form[data-v-de52cddc] { gap: 20px; padding: 4px; } .form-section[data-v-de52cddc] { padding: 18px; } .image-preview img[data-v-de52cddc] { max-height: 180px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-6ea1d56d]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-6ea1d56d] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-6ea1d56d] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-6ea1d56d]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-6ea1d56d], .theme-mode-light[data-v-6ea1d56d] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-6ea1d56d], .theme-mode-dark[data-v-6ea1d56d] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-6ea1d56d]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-6ea1d56d]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-6ea1d56d] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-6ea1d56d] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-6ea1d56d]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-6ea1d56d], input[disabled][data-v-6ea1d56d] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-6ea1d56d] { opacity: 0.9; } input[readonly][data-v-6ea1d56d] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-6ea1d56d] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-6ea1d56d]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-6ea1d56d]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-6ea1d56d]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-6ea1d56d] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-6ea1d56d]:nth-child(odd), .list-card-desktop__wrapper[data-v-6ea1d56d]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-6ea1d56d]:nth-child(even), .list-card-desktop__wrapper[data-v-6ea1d56d]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-6ea1d56d]:nth-child(odd), .listCardDesktopWrapper[data-v-6ea1d56d]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-6ea1d56d]:nth-child(even), .listCardDesktopWrapper[data-v-6ea1d56d]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-6ea1d56d] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-6ea1d56d] { cursor: pointer; } .card-layout--selectionnable[data-v-6ea1d56d]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-6ea1d56d] { cursor: auto; } .card-layout--drawer[data-v-6ea1d56d] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-6ea1d56d] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-6ea1d56d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-6ea1d56d] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-6ea1d56d] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-6ea1d56d] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-6ea1d56d]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-6ea1d56d] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-6ea1d56d] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-6ea1d56d] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-6ea1d56d] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-6ea1d56d] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-6ea1d56d] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-6ea1d56d] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-6ea1d56d] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-6ea1d56d] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-6ea1d56d] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-6ea1d56d] { background-color: #eb1515; } .color-chip--dossiers[data-v-6ea1d56d] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-6ea1d56d] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-6ea1d56d] { background-color: #00a79b; } .color-chip--virements[data-v-6ea1d56d] { background-color: var(--secondary-400); } .color-chip--factures[data-v-6ea1d56d] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-6ea1d56d] { background-color: #eb1515; } .color-recherche-dossiers[data-v-6ea1d56d] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-6ea1d56d] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-6ea1d56d] { background-color: #00a79b; } .color-recherche-virements[data-v-6ea1d56d] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-6ea1d56d] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-6ea1d56d] { color: #00a79b; cursor: pointer; } .scrollable[data-v-6ea1d56d] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-6ea1d56d] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-6ea1d56d] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-6ea1d56d] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-6ea1d56d] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-6ea1d56d] { font-weight: 800; } .grid-cell--column[data-v-6ea1d56d] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-6ea1d56d] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-6ea1d56d] { fill: #00a79b; } .grid-cell--disabled[data-v-6ea1d56d] { color: #cccccc; } .grid-cell--disabled svg[data-v-6ea1d56d] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-6ea1d56d] { white-space: nowrap; } .grid-cell--danger svg[data-v-6ea1d56d] { fill: #eb1515; } .grid-cell--span-1[data-v-6ea1d56d] { grid-column: span 1; } .grid-cell--span-2[data-v-6ea1d56d] { grid-column: span 2; } .grid-cell--span-3[data-v-6ea1d56d] { grid-column: span 3; } .grid-cell--span-4[data-v-6ea1d56d] { grid-column: span 4; } .grid-cell--span-5[data-v-6ea1d56d] { grid-column: span 5; } .grid-cell--span-6[data-v-6ea1d56d] { grid-column: span 6; } .grid-cell--span-7[data-v-6ea1d56d] { grid-column: span 7; } .grid-cell--span-8[data-v-6ea1d56d] { grid-column: span 8; } .grid-cell--span-9[data-v-6ea1d56d] { grid-column: span 9; } .grid-cell--span-10[data-v-6ea1d56d] { grid-column: span 10; } .grid-cell--span-12[data-v-6ea1d56d] { grid-column: span 12; } .grid-cell--span-13[data-v-6ea1d56d] { grid-column: span 13; } .grid-cell--span-14[data-v-6ea1d56d] { grid-column: span 14; } .grid-cell--span-16[data-v-6ea1d56d] { grid-column: span 16; } .grid-cell--span-18[data-v-6ea1d56d] { grid-column: span 18; } .grid-cell--span-20[data-v-6ea1d56d] { grid-column: span 20; } .grid-cell--span-32[data-v-6ea1d56d] { grid-column: span 32; } .grid-cell--span-36[data-v-6ea1d56d] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-6ea1d56d] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-6ea1d56d] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-6ea1d56d] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-6ea1d56d] { justify-content: center !important; } .elem--bold span[data-v-6ea1d56d] { font-weight: 800; } .elem--column[data-v-6ea1d56d] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-6ea1d56d] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-6ea1d56d] { fill: #00a79b; } .elem--clickable[data-v-6ea1d56d]:hover { cursor: pointer; } .elem--disabled[data-v-6ea1d56d] { color: #cccccc; } .elem--disabled svg[data-v-6ea1d56d] { fill: #cccccc; } .elem--nowrap span[data-v-6ea1d56d] { white-space: nowrap; } .elem--danger svg[data-v-6ea1d56d] { fill: #eb1515; } .elem--span-1[data-v-6ea1d56d] { grid-column: span 1; } .elem--span-2[data-v-6ea1d56d] { grid-column: span 2; } .elem--span-3[data-v-6ea1d56d] { grid-column: span 3; } .elem--span-4[data-v-6ea1d56d] { grid-column: span 4; } .elem--span-5[data-v-6ea1d56d] { grid-column: span 5; } .elem--span-6[data-v-6ea1d56d] { grid-column: span 6; } .elem--span-7[data-v-6ea1d56d] { grid-column: span 7; } .elem--span-8[data-v-6ea1d56d] { grid-column: span 8; } .elem--span-9[data-v-6ea1d56d] { grid-column: span 9; } .elem--span-10[data-v-6ea1d56d] { grid-column: span 10; } .elem--span-12[data-v-6ea1d56d] { grid-column: span 12; } .elem--span-13[data-v-6ea1d56d] { grid-column: span 13; } .elem--span-14[data-v-6ea1d56d] { grid-column: span 14; } .elem--span-16[data-v-6ea1d56d] { grid-column: span 16; } .elem--span-18[data-v-6ea1d56d] { grid-column: span 18; } .elem--span-20[data-v-6ea1d56d] { grid-column: span 20; } .elem--span-32[data-v-6ea1d56d] { grid-column: span 32; } .elem--span-36[data-v-6ea1d56d] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-6ea1d56d] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-6ea1d56d] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-6ea1d56d]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-6ea1d56d] { display: flex; } /* flex-direction */ .flex-column[data-v-6ea1d56d] { flex-direction: column; } .flex-row[data-v-6ea1d56d] { flex-direction: row; } /* flex */ .flex-1[data-v-6ea1d56d] { flex: 1 !important; } .flex-2[data-v-6ea1d56d] { flex: 2; } .flex-3[data-v-6ea1d56d] { flex: 3; } .flex-3[data-v-6ea1d56d] { flex: 4; } .flex-5[data-v-6ea1d56d] { flex: 5; } .flex-auto[data-v-6ea1d56d] { flex: auto; } .flex-none[data-v-6ea1d56d] { flex: none; } .flex-content[data-v-6ea1d56d] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-6ea1d56d] { flex-wrap: wrap; } .flex-nowrap[data-v-6ea1d56d] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-6ea1d56d] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-6ea1d56d] { justify-content: flex-start; } .justify-content-end[data-v-6ea1d56d] { justify-content: flex-end; } .justify-content-baseline[data-v-6ea1d56d] { justify-content: baseline; } .justify-content-center[data-v-6ea1d56d] { justify-content: center; } .justify-content-space-between[data-v-6ea1d56d] { justify-content: space-between; } .justify-content-space-around[data-v-6ea1d56d] { justify-content: space-around; } .justify-content-space-evenly[data-v-6ea1d56d] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-6ea1d56d] { align-items: flex-start; } .align-items-flex-end[data-v-6ea1d56d] { align-items: flex-end; } .align-items-stretch[data-v-6ea1d56d] { align-items: stretch; } .align-items-baseline[data-v-6ea1d56d] { align-items: baseline; } .align-items-center[data-v-6ea1d56d] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-6ea1d56d] { align-content: flex-start; } .align-content-flex-end[data-v-6ea1d56d] { align-content: flex-end; } .align-content-center[data-v-6ea1d56d] { align-content: center; } .align-content-stretch[data-v-6ea1d56d] { align-content: stretch; } .align-content-space-between[data-v-6ea1d56d] { align-content: space-between; } .align-content-space-around[data-v-6ea1d56d] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-6ea1d56d] { align-self: flex-start; } .align-self-flex-end[data-v-6ea1d56d] { align-self: flex-end; } .align-self-stretch[data-v-6ea1d56d] { align-self: stretch; } .align-self-flex-baseline[data-v-6ea1d56d] { align-self: baseline; } .align-self-center[data-v-6ea1d56d] { align-self: center; } .align-self-auto[data-v-6ea1d56d] { align-self: auto; } .flex-gap-1[data-v-6ea1d56d] { gap: 4px; } .flex-gap-2[data-v-6ea1d56d] { gap: 8px; } .flex-gap-3[data-v-6ea1d56d] { gap: 12px; } .flex-gap-4[data-v-6ea1d56d] { gap: 16px; } .flex-gap-5[data-v-6ea1d56d] { gap: 20px; } .flex-gap-6[data-v-6ea1d56d] { gap: 24px; } .flex-gap-7[data-v-6ea1d56d] { gap: 28px; } .flex-gap-8[data-v-6ea1d56d] { gap: 32px; } .flex-gap-10[data-v-6ea1d56d] { gap: 40px; } .flex-gap-12[data-v-6ea1d56d] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-6ea1d56d] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-6ea1d56d] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-6ea1d56d] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-6ea1d56d] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-6ea1d56d] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-6ea1d56d] { display: none !important; } } .col-none[data-v-6ea1d56d] { display: none; } .col-auto[data-v-6ea1d56d] { grid-column: auto; } .col-1[data-v-6ea1d56d] { grid-column: span 1; } .col-2[data-v-6ea1d56d] { grid-column: span 2; } .col-3[data-v-6ea1d56d] { grid-column: span 3; } .col-4[data-v-6ea1d56d] { grid-column: span 4; } .col-5[data-v-6ea1d56d] { grid-column: span 5; } .col-6[data-v-6ea1d56d] { grid-column: span 6; } .col-7[data-v-6ea1d56d] { grid-column: span 7; } .col-8[data-v-6ea1d56d] { grid-column: span 8; } .col-9[data-v-6ea1d56d] { grid-column: span 9; } .col-10[data-v-6ea1d56d] { grid-column: span 10; } .col-12[data-v-6ea1d56d] { grid-column: span 12; } .col-13[data-v-6ea1d56d] { grid-column: span 13; } .col-14[data-v-6ea1d56d] { grid-column: span 14; } .col-15[data-v-6ea1d56d] { grid-column: span 15; } .col-16[data-v-6ea1d56d] { grid-column: span 16; } .col-18[data-v-6ea1d56d] { grid-column: span 18; } .col-20[data-v-6ea1d56d] { grid-column: span 20; } .col-22[data-v-6ea1d56d] { grid-column: span 22; } .col-24[data-v-6ea1d56d] { grid-column: span 24; } .col-26[data-v-6ea1d56d] { grid-column: span 26; } .col-27[data-v-6ea1d56d] { grid-column: span 27; } .col-28[data-v-6ea1d56d] { grid-column: span 28; } .col-30[data-v-6ea1d56d] { grid-column: span 30; } .col-36[data-v-6ea1d56d] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-6ea1d56d] { display: none; } .col-md-36[data-v-6ea1d56d] { grid-column: span 36; } .col-md-28[data-v-6ea1d56d] { grid-column: span 28; } .col-md-27[data-v-6ea1d56d] { grid-column: span 27; } .col-md-24[data-v-6ea1d56d] { grid-column: span 24; } .col-md-22[data-v-6ea1d56d] { grid-column: span 22; } .col-md-20[data-v-6ea1d56d] { grid-column: span 20; } .col-md-19[data-v-6ea1d56d] { grid-column: span 19; } .col-md-18[data-v-6ea1d56d] { grid-column: span 18; } .col-md-17[data-v-6ea1d56d] { grid-column: span 17; } .col-md-16[data-v-6ea1d56d] { grid-column: span 16; } .col-md-15[data-v-6ea1d56d] { grid-column: span 15; } .col-md-14[data-v-6ea1d56d] { grid-column: span 14; } .col-md-13[data-v-6ea1d56d] { grid-column: span 13; } .col-md-12[data-v-6ea1d56d] { grid-column: span 12; } .col-md-10[data-v-6ea1d56d] { grid-column: span 10; } .col-md-9[data-v-6ea1d56d] { grid-column: span 9; } .col-md-8[data-v-6ea1d56d] { grid-column: span 8; } .col-md-6[data-v-6ea1d56d] { grid-column: span 6; } .col-md-5[data-v-6ea1d56d] { grid-column: span 5; } .col-md-4[data-v-6ea1d56d] { grid-column: span 4; } .col-md-3[data-v-6ea1d56d] { grid-column: span 3; } .col-md-2[data-v-6ea1d56d] { grid-column: span 2; } .col-md-1[data-v-6ea1d56d] { grid-column: span 1; } .col-md-auto[data-v-6ea1d56d] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-6ea1d56d] { display: none; } .col-sm-36[data-v-6ea1d56d] { grid-column: span 36; } .col-sm-32[data-v-6ea1d56d] { grid-column: span 32; } .col-sm-28[data-v-6ea1d56d] { grid-column: span 28; } .col-sm-27[data-v-6ea1d56d] { grid-column: span 27; } .col-sm-24[data-v-6ea1d56d] { grid-column: span 24; } .col-sm-22[data-v-6ea1d56d] { grid-column: span 22; } .col-sm-20[data-v-6ea1d56d] { grid-column: span 20; } .col-sm-18[data-v-6ea1d56d] { grid-column: span 18; } .col-sm-16[data-v-6ea1d56d] { grid-column: span 16; } .col-sm-15[data-v-6ea1d56d] { grid-column: span 15; } .col-sm-14[data-v-6ea1d56d] { grid-column: span 14; } .col-sm-13[data-v-6ea1d56d] { grid-column: span 12; } .col-sm-12[data-v-6ea1d56d] { grid-column: span 12; } .col-sm-10[data-v-6ea1d56d] { grid-column: span 10; } .col-sm-9[data-v-6ea1d56d] { grid-column: span 8; } .col-sm-8[data-v-6ea1d56d] { grid-column: span 8; } .col-sm-6[data-v-6ea1d56d] { grid-column: span 6; } .col-sm-4[data-v-6ea1d56d] { grid-column: span 4; } .col-sm-auto[data-v-6ea1d56d] { grid-column: auto; } } .fade-enter-active[data-v-6ea1d56d] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-6ea1d56d] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-6ea1d56d], .fade-leave-to[data-v-6ea1d56d] { opacity: 0; } .admin-products__item[data-v-6ea1d56d] { cursor: pointer; transition: background 0.15s; padding-top: 8px; padding-bottom: 8px; } .admin-products__item[data-v-6ea1d56d]:hover { background: rgba(var(--primary-500-rgb), 0.08); } .admin-products__mobile-card[data-v-6ea1d56d] { margin: 8px 0; } .admin-products__info[data-v-6ea1d56d] { display: flex; align-items: center; } .admin-products__thumb[data-v-6ea1d56d] { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-subtle); flex-shrink: 0; } .admin-products__details[data-v-6ea1d56d] { margin-left: 16px; display: flex; flex-direction: column; justify-content: center; } .admin-products__name-row[data-v-6ea1d56d] { display: flex; align-items: center; gap: 8px; } .admin-products__name[data-v-6ea1d56d] { font-size: 15px; font-weight: 600; color: var(--text-primary); } .admin-products__dosage[data-v-6ea1d56d] { font-size: 13px; font-weight: 400; color: var(--text-secondary); } .admin-products__badge-promo[data-v-6ea1d56d] { margin-top: 8px; width: fit-content; background-color: var(--danger-600); color: #ffffff; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; } .admin-products__price-col[data-v-6ea1d56d] { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; } .admin-products__price-col .price-old[data-v-6ea1d56d] { font-size: 12px; color: var(--text-muted); text-decoration: line-through; } .admin-products__price-col .price-sale[data-v-6ea1d56d] { font-weight: 700; color: var(--danger-600); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-797c1b17]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-797c1b17] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-797c1b17] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-797c1b17]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-797c1b17], .theme-mode-light[data-v-797c1b17] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-797c1b17], .theme-mode-dark[data-v-797c1b17] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-797c1b17]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-797c1b17]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-797c1b17] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-797c1b17] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-797c1b17]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-797c1b17], input[disabled][data-v-797c1b17] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-797c1b17] { opacity: 0.9; } input[readonly][data-v-797c1b17] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-797c1b17] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-797c1b17]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-797c1b17]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-797c1b17]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-797c1b17] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-797c1b17]:nth-child(odd), .list-card-desktop__wrapper[data-v-797c1b17]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-797c1b17]:nth-child(even), .list-card-desktop__wrapper[data-v-797c1b17]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-797c1b17]:nth-child(odd), .listCardDesktopWrapper[data-v-797c1b17]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-797c1b17]:nth-child(even), .listCardDesktopWrapper[data-v-797c1b17]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-797c1b17] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-797c1b17] { cursor: pointer; } .card-layout--selectionnable[data-v-797c1b17]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-797c1b17] { cursor: auto; } .card-layout--drawer[data-v-797c1b17] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-797c1b17] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-797c1b17] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-797c1b17] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-797c1b17] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-797c1b17] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-797c1b17]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-797c1b17] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-797c1b17] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-797c1b17] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-797c1b17] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-797c1b17] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-797c1b17] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-797c1b17] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-797c1b17] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-797c1b17] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-797c1b17] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-797c1b17] { background-color: #eb1515; } .color-chip--dossiers[data-v-797c1b17] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-797c1b17] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-797c1b17] { background-color: #00a79b; } .color-chip--virements[data-v-797c1b17] { background-color: var(--secondary-400); } .color-chip--factures[data-v-797c1b17] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-797c1b17] { background-color: #eb1515; } .color-recherche-dossiers[data-v-797c1b17] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-797c1b17] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-797c1b17] { background-color: #00a79b; } .color-recherche-virements[data-v-797c1b17] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-797c1b17] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-797c1b17] { color: #00a79b; cursor: pointer; } .scrollable[data-v-797c1b17] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-797c1b17] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-797c1b17] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-797c1b17] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-797c1b17] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-797c1b17] { font-weight: 800; } .grid-cell--column[data-v-797c1b17] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-797c1b17] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-797c1b17] { fill: #00a79b; } .grid-cell--disabled[data-v-797c1b17] { color: #cccccc; } .grid-cell--disabled svg[data-v-797c1b17] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-797c1b17] { white-space: nowrap; } .grid-cell--danger svg[data-v-797c1b17] { fill: #eb1515; } .grid-cell--span-1[data-v-797c1b17] { grid-column: span 1; } .grid-cell--span-2[data-v-797c1b17] { grid-column: span 2; } .grid-cell--span-3[data-v-797c1b17] { grid-column: span 3; } .grid-cell--span-4[data-v-797c1b17] { grid-column: span 4; } .grid-cell--span-5[data-v-797c1b17] { grid-column: span 5; } .grid-cell--span-6[data-v-797c1b17] { grid-column: span 6; } .grid-cell--span-7[data-v-797c1b17] { grid-column: span 7; } .grid-cell--span-8[data-v-797c1b17] { grid-column: span 8; } .grid-cell--span-9[data-v-797c1b17] { grid-column: span 9; } .grid-cell--span-10[data-v-797c1b17] { grid-column: span 10; } .grid-cell--span-12[data-v-797c1b17] { grid-column: span 12; } .grid-cell--span-13[data-v-797c1b17] { grid-column: span 13; } .grid-cell--span-14[data-v-797c1b17] { grid-column: span 14; } .grid-cell--span-16[data-v-797c1b17] { grid-column: span 16; } .grid-cell--span-18[data-v-797c1b17] { grid-column: span 18; } .grid-cell--span-20[data-v-797c1b17] { grid-column: span 20; } .grid-cell--span-32[data-v-797c1b17] { grid-column: span 32; } .grid-cell--span-36[data-v-797c1b17] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-797c1b17] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-797c1b17] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-797c1b17] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-797c1b17] { justify-content: center !important; } .elem--bold span[data-v-797c1b17] { font-weight: 800; } .elem--column[data-v-797c1b17] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-797c1b17] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-797c1b17] { fill: #00a79b; } .elem--clickable[data-v-797c1b17]:hover { cursor: pointer; } .elem--disabled[data-v-797c1b17] { color: #cccccc; } .elem--disabled svg[data-v-797c1b17] { fill: #cccccc; } .elem--nowrap span[data-v-797c1b17] { white-space: nowrap; } .elem--danger svg[data-v-797c1b17] { fill: #eb1515; } .elem--span-1[data-v-797c1b17] { grid-column: span 1; } .elem--span-2[data-v-797c1b17] { grid-column: span 2; } .elem--span-3[data-v-797c1b17] { grid-column: span 3; } .elem--span-4[data-v-797c1b17] { grid-column: span 4; } .elem--span-5[data-v-797c1b17] { grid-column: span 5; } .elem--span-6[data-v-797c1b17] { grid-column: span 6; } .elem--span-7[data-v-797c1b17] { grid-column: span 7; } .elem--span-8[data-v-797c1b17] { grid-column: span 8; } .elem--span-9[data-v-797c1b17] { grid-column: span 9; } .elem--span-10[data-v-797c1b17] { grid-column: span 10; } .elem--span-12[data-v-797c1b17] { grid-column: span 12; } .elem--span-13[data-v-797c1b17] { grid-column: span 13; } .elem--span-14[data-v-797c1b17] { grid-column: span 14; } .elem--span-16[data-v-797c1b17] { grid-column: span 16; } .elem--span-18[data-v-797c1b17] { grid-column: span 18; } .elem--span-20[data-v-797c1b17] { grid-column: span 20; } .elem--span-32[data-v-797c1b17] { grid-column: span 32; } .elem--span-36[data-v-797c1b17] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-797c1b17] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-797c1b17] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-797c1b17]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-797c1b17] { display: flex; } /* flex-direction */ .flex-column[data-v-797c1b17] { flex-direction: column; } .flex-row[data-v-797c1b17] { flex-direction: row; } /* flex */ .flex-1[data-v-797c1b17] { flex: 1 !important; } .flex-2[data-v-797c1b17] { flex: 2; } .flex-3[data-v-797c1b17] { flex: 3; } .flex-3[data-v-797c1b17] { flex: 4; } .flex-5[data-v-797c1b17] { flex: 5; } .flex-auto[data-v-797c1b17] { flex: auto; } .flex-none[data-v-797c1b17] { flex: none; } .flex-content[data-v-797c1b17] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-797c1b17] { flex-wrap: wrap; } .flex-nowrap[data-v-797c1b17] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-797c1b17] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-797c1b17] { justify-content: flex-start; } .justify-content-end[data-v-797c1b17] { justify-content: flex-end; } .justify-content-baseline[data-v-797c1b17] { justify-content: baseline; } .justify-content-center[data-v-797c1b17] { justify-content: center; } .justify-content-space-between[data-v-797c1b17] { justify-content: space-between; } .justify-content-space-around[data-v-797c1b17] { justify-content: space-around; } .justify-content-space-evenly[data-v-797c1b17] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-797c1b17] { align-items: flex-start; } .align-items-flex-end[data-v-797c1b17] { align-items: flex-end; } .align-items-stretch[data-v-797c1b17] { align-items: stretch; } .align-items-baseline[data-v-797c1b17] { align-items: baseline; } .align-items-center[data-v-797c1b17] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-797c1b17] { align-content: flex-start; } .align-content-flex-end[data-v-797c1b17] { align-content: flex-end; } .align-content-center[data-v-797c1b17] { align-content: center; } .align-content-stretch[data-v-797c1b17] { align-content: stretch; } .align-content-space-between[data-v-797c1b17] { align-content: space-between; } .align-content-space-around[data-v-797c1b17] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-797c1b17] { align-self: flex-start; } .align-self-flex-end[data-v-797c1b17] { align-self: flex-end; } .align-self-stretch[data-v-797c1b17] { align-self: stretch; } .align-self-flex-baseline[data-v-797c1b17] { align-self: baseline; } .align-self-center[data-v-797c1b17] { align-self: center; } .align-self-auto[data-v-797c1b17] { align-self: auto; } .flex-gap-1[data-v-797c1b17] { gap: 4px; } .flex-gap-2[data-v-797c1b17] { gap: 8px; } .flex-gap-3[data-v-797c1b17] { gap: 12px; } .flex-gap-4[data-v-797c1b17] { gap: 16px; } .flex-gap-5[data-v-797c1b17] { gap: 20px; } .flex-gap-6[data-v-797c1b17] { gap: 24px; } .flex-gap-7[data-v-797c1b17] { gap: 28px; } .flex-gap-8[data-v-797c1b17] { gap: 32px; } .flex-gap-10[data-v-797c1b17] { gap: 40px; } .flex-gap-12[data-v-797c1b17] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-797c1b17] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-797c1b17] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-797c1b17] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-797c1b17] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-797c1b17] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-797c1b17] { display: none !important; } } .col-none[data-v-797c1b17] { display: none; } .col-auto[data-v-797c1b17] { grid-column: auto; } .col-1[data-v-797c1b17] { grid-column: span 1; } .col-2[data-v-797c1b17] { grid-column: span 2; } .col-3[data-v-797c1b17] { grid-column: span 3; } .col-4[data-v-797c1b17] { grid-column: span 4; } .col-5[data-v-797c1b17] { grid-column: span 5; } .col-6[data-v-797c1b17] { grid-column: span 6; } .col-7[data-v-797c1b17] { grid-column: span 7; } .col-8[data-v-797c1b17] { grid-column: span 8; } .col-9[data-v-797c1b17] { grid-column: span 9; } .col-10[data-v-797c1b17] { grid-column: span 10; } .col-12[data-v-797c1b17] { grid-column: span 12; } .col-13[data-v-797c1b17] { grid-column: span 13; } .col-14[data-v-797c1b17] { grid-column: span 14; } .col-15[data-v-797c1b17] { grid-column: span 15; } .col-16[data-v-797c1b17] { grid-column: span 16; } .col-18[data-v-797c1b17] { grid-column: span 18; } .col-20[data-v-797c1b17] { grid-column: span 20; } .col-22[data-v-797c1b17] { grid-column: span 22; } .col-24[data-v-797c1b17] { grid-column: span 24; } .col-26[data-v-797c1b17] { grid-column: span 26; } .col-27[data-v-797c1b17] { grid-column: span 27; } .col-28[data-v-797c1b17] { grid-column: span 28; } .col-30[data-v-797c1b17] { grid-column: span 30; } .col-36[data-v-797c1b17] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-797c1b17] { display: none; } .col-md-36[data-v-797c1b17] { grid-column: span 36; } .col-md-28[data-v-797c1b17] { grid-column: span 28; } .col-md-27[data-v-797c1b17] { grid-column: span 27; } .col-md-24[data-v-797c1b17] { grid-column: span 24; } .col-md-22[data-v-797c1b17] { grid-column: span 22; } .col-md-20[data-v-797c1b17] { grid-column: span 20; } .col-md-19[data-v-797c1b17] { grid-column: span 19; } .col-md-18[data-v-797c1b17] { grid-column: span 18; } .col-md-17[data-v-797c1b17] { grid-column: span 17; } .col-md-16[data-v-797c1b17] { grid-column: span 16; } .col-md-15[data-v-797c1b17] { grid-column: span 15; } .col-md-14[data-v-797c1b17] { grid-column: span 14; } .col-md-13[data-v-797c1b17] { grid-column: span 13; } .col-md-12[data-v-797c1b17] { grid-column: span 12; } .col-md-10[data-v-797c1b17] { grid-column: span 10; } .col-md-9[data-v-797c1b17] { grid-column: span 9; } .col-md-8[data-v-797c1b17] { grid-column: span 8; } .col-md-6[data-v-797c1b17] { grid-column: span 6; } .col-md-5[data-v-797c1b17] { grid-column: span 5; } .col-md-4[data-v-797c1b17] { grid-column: span 4; } .col-md-3[data-v-797c1b17] { grid-column: span 3; } .col-md-2[data-v-797c1b17] { grid-column: span 2; } .col-md-1[data-v-797c1b17] { grid-column: span 1; } .col-md-auto[data-v-797c1b17] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-797c1b17] { display: none; } .col-sm-36[data-v-797c1b17] { grid-column: span 36; } .col-sm-32[data-v-797c1b17] { grid-column: span 32; } .col-sm-28[data-v-797c1b17] { grid-column: span 28; } .col-sm-27[data-v-797c1b17] { grid-column: span 27; } .col-sm-24[data-v-797c1b17] { grid-column: span 24; } .col-sm-22[data-v-797c1b17] { grid-column: span 22; } .col-sm-20[data-v-797c1b17] { grid-column: span 20; } .col-sm-18[data-v-797c1b17] { grid-column: span 18; } .col-sm-16[data-v-797c1b17] { grid-column: span 16; } .col-sm-15[data-v-797c1b17] { grid-column: span 15; } .col-sm-14[data-v-797c1b17] { grid-column: span 14; } .col-sm-13[data-v-797c1b17] { grid-column: span 12; } .col-sm-12[data-v-797c1b17] { grid-column: span 12; } .col-sm-10[data-v-797c1b17] { grid-column: span 10; } .col-sm-9[data-v-797c1b17] { grid-column: span 8; } .col-sm-8[data-v-797c1b17] { grid-column: span 8; } .col-sm-6[data-v-797c1b17] { grid-column: span 6; } .col-sm-4[data-v-797c1b17] { grid-column: span 4; } .col-sm-auto[data-v-797c1b17] { grid-column: auto; } } .fade-enter-active[data-v-797c1b17] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-797c1b17] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-797c1b17], .fade-leave-to[data-v-797c1b17] { opacity: 0; } .promo-form[data-v-797c1b17] { display: flex; flex-direction: column; gap: 24px; max-width: 560px; } .form-section[data-v-797c1b17] { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--border-default); } .form-section[data-v-797c1b17]:last-child { border-bottom: none; padding-bottom: 0; } .form-section--stats[data-v-797c1b17] { background: var(--bg-subtle); padding: 16px; border-radius: 12px; border-bottom: none; } .section-title[data-v-797c1b17] { margin-bottom: 4px; } .form-row[data-v-797c1b17] { display: flex; gap: 16px; } @media (max-width: 720px) { .form-row[data-v-797c1b17] { flex-direction: column; } } .flex-grow-1[data-v-797c1b17] { flex: 1; } .full-width[data-v-797c1b17] { width: 100%; } .discount-type-selector[data-v-797c1b17] { display: flex; gap: 12px; } .discount-type-option[data-v-797c1b17] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; background: var(--bg-subtle); border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; font-weight: 500; color: var(--text-secondary); } .discount-type-option[data-v-797c1b17]:hover { background: rgba(var(--primary-500-rgb), 0.08); } .discount-type-option--active[data-v-797c1b17] { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-700); } .discount-type-option--active svg[data-v-797c1b17] { color: var(--primary-500); } .form-hint[data-v-797c1b17] { font-size: 12px; color: var(--text-muted); margin: 0; font-style: italic; } .stats-grid[data-v-797c1b17] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .stat-item[data-v-797c1b17] { display: flex; flex-direction: column; gap: 4px; } .stat-value[data-v-797c1b17] { font-size: 18px; font-weight: 600; color: var(--text-primary); } .stat-label[data-v-797c1b17] { font-size: 12px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-3e1aac0e]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-3e1aac0e] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-3e1aac0e] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-3e1aac0e]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-3e1aac0e], .theme-mode-light[data-v-3e1aac0e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-3e1aac0e], .theme-mode-dark[data-v-3e1aac0e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-3e1aac0e]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-3e1aac0e]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-3e1aac0e] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-3e1aac0e] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-3e1aac0e]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-3e1aac0e], input[disabled][data-v-3e1aac0e] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-3e1aac0e] { opacity: 0.9; } input[readonly][data-v-3e1aac0e] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-3e1aac0e] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-3e1aac0e]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-3e1aac0e]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-3e1aac0e]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-3e1aac0e] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-3e1aac0e]:nth-child(odd), .list-card-desktop__wrapper[data-v-3e1aac0e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-3e1aac0e]:nth-child(even), .list-card-desktop__wrapper[data-v-3e1aac0e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-3e1aac0e]:nth-child(odd), .listCardDesktopWrapper[data-v-3e1aac0e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-3e1aac0e]:nth-child(even), .listCardDesktopWrapper[data-v-3e1aac0e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-3e1aac0e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-3e1aac0e] { cursor: pointer; } .card-layout--selectionnable[data-v-3e1aac0e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-3e1aac0e] { cursor: auto; } .card-layout--drawer[data-v-3e1aac0e] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-3e1aac0e] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-3e1aac0e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-3e1aac0e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-3e1aac0e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-3e1aac0e] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-3e1aac0e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-3e1aac0e] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-3e1aac0e] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-3e1aac0e] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-3e1aac0e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-3e1aac0e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-3e1aac0e] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-3e1aac0e] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-3e1aac0e] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-3e1aac0e] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-3e1aac0e] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-3e1aac0e] { background-color: #eb1515; } .color-chip--dossiers[data-v-3e1aac0e] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-3e1aac0e] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-3e1aac0e] { background-color: #00a79b; } .color-chip--virements[data-v-3e1aac0e] { background-color: var(--secondary-400); } .color-chip--factures[data-v-3e1aac0e] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-3e1aac0e] { background-color: #eb1515; } .color-recherche-dossiers[data-v-3e1aac0e] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-3e1aac0e] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-3e1aac0e] { background-color: #00a79b; } .color-recherche-virements[data-v-3e1aac0e] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-3e1aac0e] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-3e1aac0e] { color: #00a79b; cursor: pointer; } .scrollable[data-v-3e1aac0e] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-3e1aac0e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-3e1aac0e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-3e1aac0e] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-3e1aac0e] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-3e1aac0e] { font-weight: 800; } .grid-cell--column[data-v-3e1aac0e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-3e1aac0e] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-3e1aac0e] { fill: #00a79b; } .grid-cell--disabled[data-v-3e1aac0e] { color: #cccccc; } .grid-cell--disabled svg[data-v-3e1aac0e] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-3e1aac0e] { white-space: nowrap; } .grid-cell--danger svg[data-v-3e1aac0e] { fill: #eb1515; } .grid-cell--span-1[data-v-3e1aac0e] { grid-column: span 1; } .grid-cell--span-2[data-v-3e1aac0e] { grid-column: span 2; } .grid-cell--span-3[data-v-3e1aac0e] { grid-column: span 3; } .grid-cell--span-4[data-v-3e1aac0e] { grid-column: span 4; } .grid-cell--span-5[data-v-3e1aac0e] { grid-column: span 5; } .grid-cell--span-6[data-v-3e1aac0e] { grid-column: span 6; } .grid-cell--span-7[data-v-3e1aac0e] { grid-column: span 7; } .grid-cell--span-8[data-v-3e1aac0e] { grid-column: span 8; } .grid-cell--span-9[data-v-3e1aac0e] { grid-column: span 9; } .grid-cell--span-10[data-v-3e1aac0e] { grid-column: span 10; } .grid-cell--span-12[data-v-3e1aac0e] { grid-column: span 12; } .grid-cell--span-13[data-v-3e1aac0e] { grid-column: span 13; } .grid-cell--span-14[data-v-3e1aac0e] { grid-column: span 14; } .grid-cell--span-16[data-v-3e1aac0e] { grid-column: span 16; } .grid-cell--span-18[data-v-3e1aac0e] { grid-column: span 18; } .grid-cell--span-20[data-v-3e1aac0e] { grid-column: span 20; } .grid-cell--span-32[data-v-3e1aac0e] { grid-column: span 32; } .grid-cell--span-36[data-v-3e1aac0e] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-3e1aac0e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-3e1aac0e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-3e1aac0e] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-3e1aac0e] { justify-content: center !important; } .elem--bold span[data-v-3e1aac0e] { font-weight: 800; } .elem--column[data-v-3e1aac0e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-3e1aac0e] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-3e1aac0e] { fill: #00a79b; } .elem--clickable[data-v-3e1aac0e]:hover { cursor: pointer; } .elem--disabled[data-v-3e1aac0e] { color: #cccccc; } .elem--disabled svg[data-v-3e1aac0e] { fill: #cccccc; } .elem--nowrap span[data-v-3e1aac0e] { white-space: nowrap; } .elem--danger svg[data-v-3e1aac0e] { fill: #eb1515; } .elem--span-1[data-v-3e1aac0e] { grid-column: span 1; } .elem--span-2[data-v-3e1aac0e] { grid-column: span 2; } .elem--span-3[data-v-3e1aac0e] { grid-column: span 3; } .elem--span-4[data-v-3e1aac0e] { grid-column: span 4; } .elem--span-5[data-v-3e1aac0e] { grid-column: span 5; } .elem--span-6[data-v-3e1aac0e] { grid-column: span 6; } .elem--span-7[data-v-3e1aac0e] { grid-column: span 7; } .elem--span-8[data-v-3e1aac0e] { grid-column: span 8; } .elem--span-9[data-v-3e1aac0e] { grid-column: span 9; } .elem--span-10[data-v-3e1aac0e] { grid-column: span 10; } .elem--span-12[data-v-3e1aac0e] { grid-column: span 12; } .elem--span-13[data-v-3e1aac0e] { grid-column: span 13; } .elem--span-14[data-v-3e1aac0e] { grid-column: span 14; } .elem--span-16[data-v-3e1aac0e] { grid-column: span 16; } .elem--span-18[data-v-3e1aac0e] { grid-column: span 18; } .elem--span-20[data-v-3e1aac0e] { grid-column: span 20; } .elem--span-32[data-v-3e1aac0e] { grid-column: span 32; } .elem--span-36[data-v-3e1aac0e] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-3e1aac0e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-3e1aac0e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-3e1aac0e]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-3e1aac0e] { display: flex; } /* flex-direction */ .flex-column[data-v-3e1aac0e] { flex-direction: column; } .flex-row[data-v-3e1aac0e] { flex-direction: row; } /* flex */ .flex-1[data-v-3e1aac0e] { flex: 1 !important; } .flex-2[data-v-3e1aac0e] { flex: 2; } .flex-3[data-v-3e1aac0e] { flex: 3; } .flex-3[data-v-3e1aac0e] { flex: 4; } .flex-5[data-v-3e1aac0e] { flex: 5; } .flex-auto[data-v-3e1aac0e] { flex: auto; } .flex-none[data-v-3e1aac0e] { flex: none; } .flex-content[data-v-3e1aac0e] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-3e1aac0e] { flex-wrap: wrap; } .flex-nowrap[data-v-3e1aac0e] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-3e1aac0e] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-3e1aac0e] { justify-content: flex-start; } .justify-content-end[data-v-3e1aac0e] { justify-content: flex-end; } .justify-content-baseline[data-v-3e1aac0e] { justify-content: baseline; } .justify-content-center[data-v-3e1aac0e] { justify-content: center; } .justify-content-space-between[data-v-3e1aac0e] { justify-content: space-between; } .justify-content-space-around[data-v-3e1aac0e] { justify-content: space-around; } .justify-content-space-evenly[data-v-3e1aac0e] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-3e1aac0e] { align-items: flex-start; } .align-items-flex-end[data-v-3e1aac0e] { align-items: flex-end; } .align-items-stretch[data-v-3e1aac0e] { align-items: stretch; } .align-items-baseline[data-v-3e1aac0e] { align-items: baseline; } .align-items-center[data-v-3e1aac0e] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-3e1aac0e] { align-content: flex-start; } .align-content-flex-end[data-v-3e1aac0e] { align-content: flex-end; } .align-content-center[data-v-3e1aac0e] { align-content: center; } .align-content-stretch[data-v-3e1aac0e] { align-content: stretch; } .align-content-space-between[data-v-3e1aac0e] { align-content: space-between; } .align-content-space-around[data-v-3e1aac0e] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-3e1aac0e] { align-self: flex-start; } .align-self-flex-end[data-v-3e1aac0e] { align-self: flex-end; } .align-self-stretch[data-v-3e1aac0e] { align-self: stretch; } .align-self-flex-baseline[data-v-3e1aac0e] { align-self: baseline; } .align-self-center[data-v-3e1aac0e] { align-self: center; } .align-self-auto[data-v-3e1aac0e] { align-self: auto; } .flex-gap-1[data-v-3e1aac0e] { gap: 4px; } .flex-gap-2[data-v-3e1aac0e] { gap: 8px; } .flex-gap-3[data-v-3e1aac0e] { gap: 12px; } .flex-gap-4[data-v-3e1aac0e] { gap: 16px; } .flex-gap-5[data-v-3e1aac0e] { gap: 20px; } .flex-gap-6[data-v-3e1aac0e] { gap: 24px; } .flex-gap-7[data-v-3e1aac0e] { gap: 28px; } .flex-gap-8[data-v-3e1aac0e] { gap: 32px; } .flex-gap-10[data-v-3e1aac0e] { gap: 40px; } .flex-gap-12[data-v-3e1aac0e] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-3e1aac0e] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-3e1aac0e] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-3e1aac0e] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-3e1aac0e] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-3e1aac0e] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-3e1aac0e] { display: none !important; } } .col-none[data-v-3e1aac0e] { display: none; } .col-auto[data-v-3e1aac0e] { grid-column: auto; } .col-1[data-v-3e1aac0e] { grid-column: span 1; } .col-2[data-v-3e1aac0e] { grid-column: span 2; } .col-3[data-v-3e1aac0e] { grid-column: span 3; } .col-4[data-v-3e1aac0e] { grid-column: span 4; } .col-5[data-v-3e1aac0e] { grid-column: span 5; } .col-6[data-v-3e1aac0e] { grid-column: span 6; } .col-7[data-v-3e1aac0e] { grid-column: span 7; } .col-8[data-v-3e1aac0e] { grid-column: span 8; } .col-9[data-v-3e1aac0e] { grid-column: span 9; } .col-10[data-v-3e1aac0e] { grid-column: span 10; } .col-12[data-v-3e1aac0e] { grid-column: span 12; } .col-13[data-v-3e1aac0e] { grid-column: span 13; } .col-14[data-v-3e1aac0e] { grid-column: span 14; } .col-15[data-v-3e1aac0e] { grid-column: span 15; } .col-16[data-v-3e1aac0e] { grid-column: span 16; } .col-18[data-v-3e1aac0e] { grid-column: span 18; } .col-20[data-v-3e1aac0e] { grid-column: span 20; } .col-22[data-v-3e1aac0e] { grid-column: span 22; } .col-24[data-v-3e1aac0e] { grid-column: span 24; } .col-26[data-v-3e1aac0e] { grid-column: span 26; } .col-27[data-v-3e1aac0e] { grid-column: span 27; } .col-28[data-v-3e1aac0e] { grid-column: span 28; } .col-30[data-v-3e1aac0e] { grid-column: span 30; } .col-36[data-v-3e1aac0e] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-3e1aac0e] { display: none; } .col-md-36[data-v-3e1aac0e] { grid-column: span 36; } .col-md-28[data-v-3e1aac0e] { grid-column: span 28; } .col-md-27[data-v-3e1aac0e] { grid-column: span 27; } .col-md-24[data-v-3e1aac0e] { grid-column: span 24; } .col-md-22[data-v-3e1aac0e] { grid-column: span 22; } .col-md-20[data-v-3e1aac0e] { grid-column: span 20; } .col-md-19[data-v-3e1aac0e] { grid-column: span 19; } .col-md-18[data-v-3e1aac0e] { grid-column: span 18; } .col-md-17[data-v-3e1aac0e] { grid-column: span 17; } .col-md-16[data-v-3e1aac0e] { grid-column: span 16; } .col-md-15[data-v-3e1aac0e] { grid-column: span 15; } .col-md-14[data-v-3e1aac0e] { grid-column: span 14; } .col-md-13[data-v-3e1aac0e] { grid-column: span 13; } .col-md-12[data-v-3e1aac0e] { grid-column: span 12; } .col-md-10[data-v-3e1aac0e] { grid-column: span 10; } .col-md-9[data-v-3e1aac0e] { grid-column: span 9; } .col-md-8[data-v-3e1aac0e] { grid-column: span 8; } .col-md-6[data-v-3e1aac0e] { grid-column: span 6; } .col-md-5[data-v-3e1aac0e] { grid-column: span 5; } .col-md-4[data-v-3e1aac0e] { grid-column: span 4; } .col-md-3[data-v-3e1aac0e] { grid-column: span 3; } .col-md-2[data-v-3e1aac0e] { grid-column: span 2; } .col-md-1[data-v-3e1aac0e] { grid-column: span 1; } .col-md-auto[data-v-3e1aac0e] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-3e1aac0e] { display: none; } .col-sm-36[data-v-3e1aac0e] { grid-column: span 36; } .col-sm-32[data-v-3e1aac0e] { grid-column: span 32; } .col-sm-28[data-v-3e1aac0e] { grid-column: span 28; } .col-sm-27[data-v-3e1aac0e] { grid-column: span 27; } .col-sm-24[data-v-3e1aac0e] { grid-column: span 24; } .col-sm-22[data-v-3e1aac0e] { grid-column: span 22; } .col-sm-20[data-v-3e1aac0e] { grid-column: span 20; } .col-sm-18[data-v-3e1aac0e] { grid-column: span 18; } .col-sm-16[data-v-3e1aac0e] { grid-column: span 16; } .col-sm-15[data-v-3e1aac0e] { grid-column: span 15; } .col-sm-14[data-v-3e1aac0e] { grid-column: span 14; } .col-sm-13[data-v-3e1aac0e] { grid-column: span 12; } .col-sm-12[data-v-3e1aac0e] { grid-column: span 12; } .col-sm-10[data-v-3e1aac0e] { grid-column: span 10; } .col-sm-9[data-v-3e1aac0e] { grid-column: span 8; } .col-sm-8[data-v-3e1aac0e] { grid-column: span 8; } .col-sm-6[data-v-3e1aac0e] { grid-column: span 6; } .col-sm-4[data-v-3e1aac0e] { grid-column: span 4; } .col-sm-auto[data-v-3e1aac0e] { grid-column: auto; } } .fade-enter-active[data-v-3e1aac0e] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-3e1aac0e] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-3e1aac0e], .fade-leave-to[data-v-3e1aac0e] { opacity: 0; } .admin-promo[data-v-3e1aac0e] { display: flex; flex-direction: column; gap: 16px; } .admin-promo__header[data-v-3e1aac0e] { background: var(--bg-subtle); border-radius: 8px; padding: 12px 16px; } .admin-promo__row[data-v-3e1aac0e] { cursor: pointer; transition: transform 0.15s ease; } .admin-promo__row[data-v-3e1aac0e]:hover { transform: translateX(4px); } .admin-promo__item[data-v-3e1aac0e] { background: transparent; border: 1px solid var(--border-default); border-radius: 10px; padding: 16px; transition: all 0.2s ease; } .admin-promo__item[data-v-3e1aac0e]:hover { border-color: var(--primary-200); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .admin-promo__code-cell[data-v-3e1aac0e] { display: flex; align-items: flex-start; } .admin-promo__code-info[data-v-3e1aac0e] { display: flex; flex-direction: column; gap: 4px; } .admin-promo__code[data-v-3e1aac0e] { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 14px; font-weight: 600; color: var(--primary-700); background: var(--primary-50); padding: 4px 8px; border-radius: 4px; } .admin-promo__description[data-v-3e1aac0e] { font-size: 12px; color: var(--text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-promo__value[data-v-3e1aac0e] { font-weight: 600; color: var(--success-600); font-size: 14px; } .admin-promo__min[data-v-3e1aac0e] { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; } .admin-promo__usage[data-v-3e1aac0e] { display: flex; align-items: baseline; gap: 4px; font-size: 14px; color: var(--text-primary); } .admin-promo__usage-max[data-v-3e1aac0e] { color: var(--text-muted); font-size: 12px; } .admin-promo__usage-unlimited[data-v-3e1aac0e] { color: var(--text-muted); font-size: 11px; font-style: italic; } .admin-promo__validity[data-v-3e1aac0e] { display: flex; flex-direction: column; gap: 2px; } .admin-promo__date[data-v-3e1aac0e] { font-size: 13px; color: var(--text-secondary); } .admin-promo__permanent[data-v-3e1aac0e] { font-size: 12px; color: var(--text-muted); font-style: italic; } .admin-promo__actions[data-v-3e1aac0e] { display: flex; gap: 8px; justify-content: flex-end; } .admin-promo__mobile-card[data-v-3e1aac0e] { background: transparent; border: 1px solid var(--border-default); border-radius: 12px; padding: 16px; margin-bottom: 12px; cursor: pointer; } .admin-promo__mobile-card[data-v-3e1aac0e]:active { background: rgba(var(--primary-500-rgb), 0.08); } .admin-promo__mobile-header[data-v-3e1aac0e] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .admin-promo__mobile-code[data-v-3e1aac0e] { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 16px; font-weight: 600; color: var(--primary-700); } .admin-promo__mobile-body[data-v-3e1aac0e] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .admin-promo__mobile-row[data-v-3e1aac0e] { display: flex; justify-content: space-between; align-items: center; } .admin-promo__mobile-label[data-v-3e1aac0e] { font-size: 13px; color: var(--text-muted); } .admin-promo__mobile-value[data-v-3e1aac0e] { font-size: 14px; font-weight: 500; color: var(--text-primary); } .admin-promo__mobile-actions[data-v-3e1aac0e] { display: flex; gap: 8px; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--border-default); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-492cca5b]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-492cca5b] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-492cca5b] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-492cca5b]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-492cca5b], .theme-mode-light[data-v-492cca5b] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-492cca5b], .theme-mode-dark[data-v-492cca5b] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-492cca5b]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-492cca5b]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-492cca5b] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-492cca5b] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-492cca5b]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-492cca5b], input[disabled][data-v-492cca5b] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-492cca5b] { opacity: 0.9; } input[readonly][data-v-492cca5b] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-492cca5b] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-492cca5b]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-492cca5b]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-492cca5b]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-492cca5b] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-492cca5b]:nth-child(odd), .list-card-desktop__wrapper[data-v-492cca5b]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-492cca5b]:nth-child(even), .list-card-desktop__wrapper[data-v-492cca5b]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-492cca5b]:nth-child(odd), .listCardDesktopWrapper[data-v-492cca5b]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-492cca5b]:nth-child(even), .listCardDesktopWrapper[data-v-492cca5b]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-492cca5b] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-492cca5b] { cursor: pointer; } .card-layout--selectionnable[data-v-492cca5b]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-492cca5b] { cursor: auto; } .card-layout--drawer[data-v-492cca5b] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-492cca5b] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-492cca5b] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-492cca5b] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-492cca5b] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-492cca5b] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-492cca5b]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-492cca5b] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-492cca5b] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-492cca5b] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-492cca5b] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-492cca5b] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-492cca5b] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-492cca5b] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-492cca5b] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-492cca5b] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-492cca5b] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-492cca5b] { background-color: #eb1515; } .color-chip--dossiers[data-v-492cca5b] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-492cca5b] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-492cca5b] { background-color: #00a79b; } .color-chip--virements[data-v-492cca5b] { background-color: var(--secondary-400); } .color-chip--factures[data-v-492cca5b] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-492cca5b] { background-color: #eb1515; } .color-recherche-dossiers[data-v-492cca5b] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-492cca5b] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-492cca5b] { background-color: #00a79b; } .color-recherche-virements[data-v-492cca5b] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-492cca5b] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-492cca5b] { color: #00a79b; cursor: pointer; } .scrollable[data-v-492cca5b] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-492cca5b] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-492cca5b] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-492cca5b] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-492cca5b] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-492cca5b] { font-weight: 800; } .grid-cell--column[data-v-492cca5b] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-492cca5b] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-492cca5b] { fill: #00a79b; } .grid-cell--disabled[data-v-492cca5b] { color: #cccccc; } .grid-cell--disabled svg[data-v-492cca5b] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-492cca5b] { white-space: nowrap; } .grid-cell--danger svg[data-v-492cca5b] { fill: #eb1515; } .grid-cell--span-1[data-v-492cca5b] { grid-column: span 1; } .grid-cell--span-2[data-v-492cca5b] { grid-column: span 2; } .grid-cell--span-3[data-v-492cca5b] { grid-column: span 3; } .grid-cell--span-4[data-v-492cca5b] { grid-column: span 4; } .grid-cell--span-5[data-v-492cca5b] { grid-column: span 5; } .grid-cell--span-6[data-v-492cca5b] { grid-column: span 6; } .grid-cell--span-7[data-v-492cca5b] { grid-column: span 7; } .grid-cell--span-8[data-v-492cca5b] { grid-column: span 8; } .grid-cell--span-9[data-v-492cca5b] { grid-column: span 9; } .grid-cell--span-10[data-v-492cca5b] { grid-column: span 10; } .grid-cell--span-12[data-v-492cca5b] { grid-column: span 12; } .grid-cell--span-13[data-v-492cca5b] { grid-column: span 13; } .grid-cell--span-14[data-v-492cca5b] { grid-column: span 14; } .grid-cell--span-16[data-v-492cca5b] { grid-column: span 16; } .grid-cell--span-18[data-v-492cca5b] { grid-column: span 18; } .grid-cell--span-20[data-v-492cca5b] { grid-column: span 20; } .grid-cell--span-32[data-v-492cca5b] { grid-column: span 32; } .grid-cell--span-36[data-v-492cca5b] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-492cca5b] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-492cca5b] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-492cca5b] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-492cca5b] { justify-content: center !important; } .elem--bold span[data-v-492cca5b] { font-weight: 800; } .elem--column[data-v-492cca5b] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-492cca5b] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-492cca5b] { fill: #00a79b; } .elem--clickable[data-v-492cca5b]:hover { cursor: pointer; } .elem--disabled[data-v-492cca5b] { color: #cccccc; } .elem--disabled svg[data-v-492cca5b] { fill: #cccccc; } .elem--nowrap span[data-v-492cca5b] { white-space: nowrap; } .elem--danger svg[data-v-492cca5b] { fill: #eb1515; } .elem--span-1[data-v-492cca5b] { grid-column: span 1; } .elem--span-2[data-v-492cca5b] { grid-column: span 2; } .elem--span-3[data-v-492cca5b] { grid-column: span 3; } .elem--span-4[data-v-492cca5b] { grid-column: span 4; } .elem--span-5[data-v-492cca5b] { grid-column: span 5; } .elem--span-6[data-v-492cca5b] { grid-column: span 6; } .elem--span-7[data-v-492cca5b] { grid-column: span 7; } .elem--span-8[data-v-492cca5b] { grid-column: span 8; } .elem--span-9[data-v-492cca5b] { grid-column: span 9; } .elem--span-10[data-v-492cca5b] { grid-column: span 10; } .elem--span-12[data-v-492cca5b] { grid-column: span 12; } .elem--span-13[data-v-492cca5b] { grid-column: span 13; } .elem--span-14[data-v-492cca5b] { grid-column: span 14; } .elem--span-16[data-v-492cca5b] { grid-column: span 16; } .elem--span-18[data-v-492cca5b] { grid-column: span 18; } .elem--span-20[data-v-492cca5b] { grid-column: span 20; } .elem--span-32[data-v-492cca5b] { grid-column: span 32; } .elem--span-36[data-v-492cca5b] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-492cca5b] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-492cca5b] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-492cca5b]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-492cca5b] { display: flex; } /* flex-direction */ .flex-column[data-v-492cca5b] { flex-direction: column; } .flex-row[data-v-492cca5b] { flex-direction: row; } /* flex */ .flex-1[data-v-492cca5b] { flex: 1 !important; } .flex-2[data-v-492cca5b] { flex: 2; } .flex-3[data-v-492cca5b] { flex: 3; } .flex-3[data-v-492cca5b] { flex: 4; } .flex-5[data-v-492cca5b] { flex: 5; } .flex-auto[data-v-492cca5b] { flex: auto; } .flex-none[data-v-492cca5b] { flex: none; } .flex-content[data-v-492cca5b] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-492cca5b] { flex-wrap: wrap; } .flex-nowrap[data-v-492cca5b] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-492cca5b] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-492cca5b] { justify-content: flex-start; } .justify-content-end[data-v-492cca5b] { justify-content: flex-end; } .justify-content-baseline[data-v-492cca5b] { justify-content: baseline; } .justify-content-center[data-v-492cca5b] { justify-content: center; } .justify-content-space-between[data-v-492cca5b] { justify-content: space-between; } .justify-content-space-around[data-v-492cca5b] { justify-content: space-around; } .justify-content-space-evenly[data-v-492cca5b] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-492cca5b] { align-items: flex-start; } .align-items-flex-end[data-v-492cca5b] { align-items: flex-end; } .align-items-stretch[data-v-492cca5b] { align-items: stretch; } .align-items-baseline[data-v-492cca5b] { align-items: baseline; } .align-items-center[data-v-492cca5b] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-492cca5b] { align-content: flex-start; } .align-content-flex-end[data-v-492cca5b] { align-content: flex-end; } .align-content-center[data-v-492cca5b] { align-content: center; } .align-content-stretch[data-v-492cca5b] { align-content: stretch; } .align-content-space-between[data-v-492cca5b] { align-content: space-between; } .align-content-space-around[data-v-492cca5b] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-492cca5b] { align-self: flex-start; } .align-self-flex-end[data-v-492cca5b] { align-self: flex-end; } .align-self-stretch[data-v-492cca5b] { align-self: stretch; } .align-self-flex-baseline[data-v-492cca5b] { align-self: baseline; } .align-self-center[data-v-492cca5b] { align-self: center; } .align-self-auto[data-v-492cca5b] { align-self: auto; } .flex-gap-1[data-v-492cca5b] { gap: 4px; } .flex-gap-2[data-v-492cca5b] { gap: 8px; } .flex-gap-3[data-v-492cca5b] { gap: 12px; } .flex-gap-4[data-v-492cca5b] { gap: 16px; } .flex-gap-5[data-v-492cca5b] { gap: 20px; } .flex-gap-6[data-v-492cca5b] { gap: 24px; } .flex-gap-7[data-v-492cca5b] { gap: 28px; } .flex-gap-8[data-v-492cca5b] { gap: 32px; } .flex-gap-10[data-v-492cca5b] { gap: 40px; } .flex-gap-12[data-v-492cca5b] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-492cca5b] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-492cca5b] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-492cca5b] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-492cca5b] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-492cca5b] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-492cca5b] { display: none !important; } } .col-none[data-v-492cca5b] { display: none; } .col-auto[data-v-492cca5b] { grid-column: auto; } .col-1[data-v-492cca5b] { grid-column: span 1; } .col-2[data-v-492cca5b] { grid-column: span 2; } .col-3[data-v-492cca5b] { grid-column: span 3; } .col-4[data-v-492cca5b] { grid-column: span 4; } .col-5[data-v-492cca5b] { grid-column: span 5; } .col-6[data-v-492cca5b] { grid-column: span 6; } .col-7[data-v-492cca5b] { grid-column: span 7; } .col-8[data-v-492cca5b] { grid-column: span 8; } .col-9[data-v-492cca5b] { grid-column: span 9; } .col-10[data-v-492cca5b] { grid-column: span 10; } .col-12[data-v-492cca5b] { grid-column: span 12; } .col-13[data-v-492cca5b] { grid-column: span 13; } .col-14[data-v-492cca5b] { grid-column: span 14; } .col-15[data-v-492cca5b] { grid-column: span 15; } .col-16[data-v-492cca5b] { grid-column: span 16; } .col-18[data-v-492cca5b] { grid-column: span 18; } .col-20[data-v-492cca5b] { grid-column: span 20; } .col-22[data-v-492cca5b] { grid-column: span 22; } .col-24[data-v-492cca5b] { grid-column: span 24; } .col-26[data-v-492cca5b] { grid-column: span 26; } .col-27[data-v-492cca5b] { grid-column: span 27; } .col-28[data-v-492cca5b] { grid-column: span 28; } .col-30[data-v-492cca5b] { grid-column: span 30; } .col-36[data-v-492cca5b] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-492cca5b] { display: none; } .col-md-36[data-v-492cca5b] { grid-column: span 36; } .col-md-28[data-v-492cca5b] { grid-column: span 28; } .col-md-27[data-v-492cca5b] { grid-column: span 27; } .col-md-24[data-v-492cca5b] { grid-column: span 24; } .col-md-22[data-v-492cca5b] { grid-column: span 22; } .col-md-20[data-v-492cca5b] { grid-column: span 20; } .col-md-19[data-v-492cca5b] { grid-column: span 19; } .col-md-18[data-v-492cca5b] { grid-column: span 18; } .col-md-17[data-v-492cca5b] { grid-column: span 17; } .col-md-16[data-v-492cca5b] { grid-column: span 16; } .col-md-15[data-v-492cca5b] { grid-column: span 15; } .col-md-14[data-v-492cca5b] { grid-column: span 14; } .col-md-13[data-v-492cca5b] { grid-column: span 13; } .col-md-12[data-v-492cca5b] { grid-column: span 12; } .col-md-10[data-v-492cca5b] { grid-column: span 10; } .col-md-9[data-v-492cca5b] { grid-column: span 9; } .col-md-8[data-v-492cca5b] { grid-column: span 8; } .col-md-6[data-v-492cca5b] { grid-column: span 6; } .col-md-5[data-v-492cca5b] { grid-column: span 5; } .col-md-4[data-v-492cca5b] { grid-column: span 4; } .col-md-3[data-v-492cca5b] { grid-column: span 3; } .col-md-2[data-v-492cca5b] { grid-column: span 2; } .col-md-1[data-v-492cca5b] { grid-column: span 1; } .col-md-auto[data-v-492cca5b] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-492cca5b] { display: none; } .col-sm-36[data-v-492cca5b] { grid-column: span 36; } .col-sm-32[data-v-492cca5b] { grid-column: span 32; } .col-sm-28[data-v-492cca5b] { grid-column: span 28; } .col-sm-27[data-v-492cca5b] { grid-column: span 27; } .col-sm-24[data-v-492cca5b] { grid-column: span 24; } .col-sm-22[data-v-492cca5b] { grid-column: span 22; } .col-sm-20[data-v-492cca5b] { grid-column: span 20; } .col-sm-18[data-v-492cca5b] { grid-column: span 18; } .col-sm-16[data-v-492cca5b] { grid-column: span 16; } .col-sm-15[data-v-492cca5b] { grid-column: span 15; } .col-sm-14[data-v-492cca5b] { grid-column: span 14; } .col-sm-13[data-v-492cca5b] { grid-column: span 12; } .col-sm-12[data-v-492cca5b] { grid-column: span 12; } .col-sm-10[data-v-492cca5b] { grid-column: span 10; } .col-sm-9[data-v-492cca5b] { grid-column: span 8; } .col-sm-8[data-v-492cca5b] { grid-column: span 8; } .col-sm-6[data-v-492cca5b] { grid-column: span 6; } .col-sm-4[data-v-492cca5b] { grid-column: span 4; } .col-sm-auto[data-v-492cca5b] { grid-column: auto; } } .fade-enter-active[data-v-492cca5b] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-492cca5b] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-492cca5b], .fade-leave-to[data-v-492cca5b] { opacity: 0; } .session-card-mobile[data-v-492cca5b] { background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 12px; padding: 14px; margin-bottom: 8px; } .session-card-mobile__header[data-v-492cca5b] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .session-card-mobile__header .user-info[data-v-492cca5b] { display: flex; gap: 10px; align-items: center; } .session-card-mobile__header .user-info .avatar[data-v-492cca5b] { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; } .session-card-mobile__header .user-info .avatar img[data-v-492cca5b] { width: 100%; height: 100%; object-fit: cover; } .session-card-mobile__header .user-info .details[data-v-492cca5b] { display: flex; flex-direction: column; } .session-card-mobile__header .user-info .details .name[data-v-492cca5b] { font-weight: 600; color: var(--text-primary); font-size: 14px; } .session-card-mobile__header .user-info .details .meta[data-v-492cca5b] { font-size: 12px; color: var(--text-muted); } .session-card-mobile__body[data-v-492cca5b] { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); } .session-card-mobile__body .info-row[data-v-492cca5b] { display: flex; justify-content: space-between; align-items: center; } .session-card-mobile__body .info-row .label[data-v-492cca5b] { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); } .session-card-mobile__body .info-row .value[data-v-492cca5b] { font-size: 13px; color: var(--text-primary); font-weight: 500; } .session-card-mobile__footer[data-v-492cca5b] { display: flex; gap: 8px; padding-top: 12px; flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-23d9f298]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-23d9f298] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-23d9f298] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-23d9f298]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-23d9f298], .theme-mode-light[data-v-23d9f298] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-23d9f298], .theme-mode-dark[data-v-23d9f298] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-23d9f298]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-23d9f298]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-23d9f298] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-23d9f298] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-23d9f298]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-23d9f298], input[disabled][data-v-23d9f298] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-23d9f298] { opacity: 0.9; } input[readonly][data-v-23d9f298] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-23d9f298] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-23d9f298]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-23d9f298]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-23d9f298]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-23d9f298] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-23d9f298]:nth-child(odd), .list-card-desktop__wrapper[data-v-23d9f298]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-23d9f298]:nth-child(even), .list-card-desktop__wrapper[data-v-23d9f298]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-23d9f298]:nth-child(odd), .listCardDesktopWrapper[data-v-23d9f298]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-23d9f298]:nth-child(even), .listCardDesktopWrapper[data-v-23d9f298]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-23d9f298] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-23d9f298] { cursor: pointer; } .card-layout--selectionnable[data-v-23d9f298]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-23d9f298] { cursor: auto; } .card-layout--drawer[data-v-23d9f298] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-23d9f298] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-23d9f298] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-23d9f298] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-23d9f298] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-23d9f298] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-23d9f298]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-23d9f298] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-23d9f298] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-23d9f298] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-23d9f298] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-23d9f298] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-23d9f298] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-23d9f298] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-23d9f298] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-23d9f298] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-23d9f298] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-23d9f298] { background-color: #eb1515; } .color-chip--dossiers[data-v-23d9f298] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-23d9f298] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-23d9f298] { background-color: #00a79b; } .color-chip--virements[data-v-23d9f298] { background-color: var(--secondary-400); } .color-chip--factures[data-v-23d9f298] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-23d9f298] { background-color: #eb1515; } .color-recherche-dossiers[data-v-23d9f298] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-23d9f298] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-23d9f298] { background-color: #00a79b; } .color-recherche-virements[data-v-23d9f298] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-23d9f298] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-23d9f298] { color: #00a79b; cursor: pointer; } .scrollable[data-v-23d9f298] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-23d9f298] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-23d9f298] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-23d9f298] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-23d9f298] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-23d9f298] { font-weight: 800; } .grid-cell--column[data-v-23d9f298] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-23d9f298] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-23d9f298] { fill: #00a79b; } .grid-cell--disabled[data-v-23d9f298] { color: #cccccc; } .grid-cell--disabled svg[data-v-23d9f298] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-23d9f298] { white-space: nowrap; } .grid-cell--danger svg[data-v-23d9f298] { fill: #eb1515; } .grid-cell--span-1[data-v-23d9f298] { grid-column: span 1; } .grid-cell--span-2[data-v-23d9f298] { grid-column: span 2; } .grid-cell--span-3[data-v-23d9f298] { grid-column: span 3; } .grid-cell--span-4[data-v-23d9f298] { grid-column: span 4; } .grid-cell--span-5[data-v-23d9f298] { grid-column: span 5; } .grid-cell--span-6[data-v-23d9f298] { grid-column: span 6; } .grid-cell--span-7[data-v-23d9f298] { grid-column: span 7; } .grid-cell--span-8[data-v-23d9f298] { grid-column: span 8; } .grid-cell--span-9[data-v-23d9f298] { grid-column: span 9; } .grid-cell--span-10[data-v-23d9f298] { grid-column: span 10; } .grid-cell--span-12[data-v-23d9f298] { grid-column: span 12; } .grid-cell--span-13[data-v-23d9f298] { grid-column: span 13; } .grid-cell--span-14[data-v-23d9f298] { grid-column: span 14; } .grid-cell--span-16[data-v-23d9f298] { grid-column: span 16; } .grid-cell--span-18[data-v-23d9f298] { grid-column: span 18; } .grid-cell--span-20[data-v-23d9f298] { grid-column: span 20; } .grid-cell--span-32[data-v-23d9f298] { grid-column: span 32; } .grid-cell--span-36[data-v-23d9f298] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-23d9f298] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-23d9f298] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-23d9f298] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-23d9f298] { justify-content: center !important; } .elem--bold span[data-v-23d9f298] { font-weight: 800; } .elem--column[data-v-23d9f298] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-23d9f298] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-23d9f298] { fill: #00a79b; } .elem--clickable[data-v-23d9f298]:hover { cursor: pointer; } .elem--disabled[data-v-23d9f298] { color: #cccccc; } .elem--disabled svg[data-v-23d9f298] { fill: #cccccc; } .elem--nowrap span[data-v-23d9f298] { white-space: nowrap; } .elem--danger svg[data-v-23d9f298] { fill: #eb1515; } .elem--span-1[data-v-23d9f298] { grid-column: span 1; } .elem--span-2[data-v-23d9f298] { grid-column: span 2; } .elem--span-3[data-v-23d9f298] { grid-column: span 3; } .elem--span-4[data-v-23d9f298] { grid-column: span 4; } .elem--span-5[data-v-23d9f298] { grid-column: span 5; } .elem--span-6[data-v-23d9f298] { grid-column: span 6; } .elem--span-7[data-v-23d9f298] { grid-column: span 7; } .elem--span-8[data-v-23d9f298] { grid-column: span 8; } .elem--span-9[data-v-23d9f298] { grid-column: span 9; } .elem--span-10[data-v-23d9f298] { grid-column: span 10; } .elem--span-12[data-v-23d9f298] { grid-column: span 12; } .elem--span-13[data-v-23d9f298] { grid-column: span 13; } .elem--span-14[data-v-23d9f298] { grid-column: span 14; } .elem--span-16[data-v-23d9f298] { grid-column: span 16; } .elem--span-18[data-v-23d9f298] { grid-column: span 18; } .elem--span-20[data-v-23d9f298] { grid-column: span 20; } .elem--span-32[data-v-23d9f298] { grid-column: span 32; } .elem--span-36[data-v-23d9f298] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-23d9f298] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-23d9f298] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-23d9f298]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-23d9f298] { display: flex; } /* flex-direction */ .flex-column[data-v-23d9f298] { flex-direction: column; } .flex-row[data-v-23d9f298] { flex-direction: row; } /* flex */ .flex-1[data-v-23d9f298] { flex: 1 !important; } .flex-2[data-v-23d9f298] { flex: 2; } .flex-3[data-v-23d9f298] { flex: 3; } .flex-3[data-v-23d9f298] { flex: 4; } .flex-5[data-v-23d9f298] { flex: 5; } .flex-auto[data-v-23d9f298] { flex: auto; } .flex-none[data-v-23d9f298] { flex: none; } .flex-content[data-v-23d9f298] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-23d9f298] { flex-wrap: wrap; } .flex-nowrap[data-v-23d9f298] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-23d9f298] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-23d9f298] { justify-content: flex-start; } .justify-content-end[data-v-23d9f298] { justify-content: flex-end; } .justify-content-baseline[data-v-23d9f298] { justify-content: baseline; } .justify-content-center[data-v-23d9f298] { justify-content: center; } .justify-content-space-between[data-v-23d9f298] { justify-content: space-between; } .justify-content-space-around[data-v-23d9f298] { justify-content: space-around; } .justify-content-space-evenly[data-v-23d9f298] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-23d9f298] { align-items: flex-start; } .align-items-flex-end[data-v-23d9f298] { align-items: flex-end; } .align-items-stretch[data-v-23d9f298] { align-items: stretch; } .align-items-baseline[data-v-23d9f298] { align-items: baseline; } .align-items-center[data-v-23d9f298] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-23d9f298] { align-content: flex-start; } .align-content-flex-end[data-v-23d9f298] { align-content: flex-end; } .align-content-center[data-v-23d9f298] { align-content: center; } .align-content-stretch[data-v-23d9f298] { align-content: stretch; } .align-content-space-between[data-v-23d9f298] { align-content: space-between; } .align-content-space-around[data-v-23d9f298] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-23d9f298] { align-self: flex-start; } .align-self-flex-end[data-v-23d9f298] { align-self: flex-end; } .align-self-stretch[data-v-23d9f298] { align-self: stretch; } .align-self-flex-baseline[data-v-23d9f298] { align-self: baseline; } .align-self-center[data-v-23d9f298] { align-self: center; } .align-self-auto[data-v-23d9f298] { align-self: auto; } .flex-gap-1[data-v-23d9f298] { gap: 4px; } .flex-gap-2[data-v-23d9f298] { gap: 8px; } .flex-gap-3[data-v-23d9f298] { gap: 12px; } .flex-gap-4[data-v-23d9f298] { gap: 16px; } .flex-gap-5[data-v-23d9f298] { gap: 20px; } .flex-gap-6[data-v-23d9f298] { gap: 24px; } .flex-gap-7[data-v-23d9f298] { gap: 28px; } .flex-gap-8[data-v-23d9f298] { gap: 32px; } .flex-gap-10[data-v-23d9f298] { gap: 40px; } .flex-gap-12[data-v-23d9f298] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-23d9f298] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-23d9f298] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-23d9f298] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-23d9f298] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-23d9f298] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-23d9f298] { display: none !important; } } .col-none[data-v-23d9f298] { display: none; } .col-auto[data-v-23d9f298] { grid-column: auto; } .col-1[data-v-23d9f298] { grid-column: span 1; } .col-2[data-v-23d9f298] { grid-column: span 2; } .col-3[data-v-23d9f298] { grid-column: span 3; } .col-4[data-v-23d9f298] { grid-column: span 4; } .col-5[data-v-23d9f298] { grid-column: span 5; } .col-6[data-v-23d9f298] { grid-column: span 6; } .col-7[data-v-23d9f298] { grid-column: span 7; } .col-8[data-v-23d9f298] { grid-column: span 8; } .col-9[data-v-23d9f298] { grid-column: span 9; } .col-10[data-v-23d9f298] { grid-column: span 10; } .col-12[data-v-23d9f298] { grid-column: span 12; } .col-13[data-v-23d9f298] { grid-column: span 13; } .col-14[data-v-23d9f298] { grid-column: span 14; } .col-15[data-v-23d9f298] { grid-column: span 15; } .col-16[data-v-23d9f298] { grid-column: span 16; } .col-18[data-v-23d9f298] { grid-column: span 18; } .col-20[data-v-23d9f298] { grid-column: span 20; } .col-22[data-v-23d9f298] { grid-column: span 22; } .col-24[data-v-23d9f298] { grid-column: span 24; } .col-26[data-v-23d9f298] { grid-column: span 26; } .col-27[data-v-23d9f298] { grid-column: span 27; } .col-28[data-v-23d9f298] { grid-column: span 28; } .col-30[data-v-23d9f298] { grid-column: span 30; } .col-36[data-v-23d9f298] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-23d9f298] { display: none; } .col-md-36[data-v-23d9f298] { grid-column: span 36; } .col-md-28[data-v-23d9f298] { grid-column: span 28; } .col-md-27[data-v-23d9f298] { grid-column: span 27; } .col-md-24[data-v-23d9f298] { grid-column: span 24; } .col-md-22[data-v-23d9f298] { grid-column: span 22; } .col-md-20[data-v-23d9f298] { grid-column: span 20; } .col-md-19[data-v-23d9f298] { grid-column: span 19; } .col-md-18[data-v-23d9f298] { grid-column: span 18; } .col-md-17[data-v-23d9f298] { grid-column: span 17; } .col-md-16[data-v-23d9f298] { grid-column: span 16; } .col-md-15[data-v-23d9f298] { grid-column: span 15; } .col-md-14[data-v-23d9f298] { grid-column: span 14; } .col-md-13[data-v-23d9f298] { grid-column: span 13; } .col-md-12[data-v-23d9f298] { grid-column: span 12; } .col-md-10[data-v-23d9f298] { grid-column: span 10; } .col-md-9[data-v-23d9f298] { grid-column: span 9; } .col-md-8[data-v-23d9f298] { grid-column: span 8; } .col-md-6[data-v-23d9f298] { grid-column: span 6; } .col-md-5[data-v-23d9f298] { grid-column: span 5; } .col-md-4[data-v-23d9f298] { grid-column: span 4; } .col-md-3[data-v-23d9f298] { grid-column: span 3; } .col-md-2[data-v-23d9f298] { grid-column: span 2; } .col-md-1[data-v-23d9f298] { grid-column: span 1; } .col-md-auto[data-v-23d9f298] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-23d9f298] { display: none; } .col-sm-36[data-v-23d9f298] { grid-column: span 36; } .col-sm-32[data-v-23d9f298] { grid-column: span 32; } .col-sm-28[data-v-23d9f298] { grid-column: span 28; } .col-sm-27[data-v-23d9f298] { grid-column: span 27; } .col-sm-24[data-v-23d9f298] { grid-column: span 24; } .col-sm-22[data-v-23d9f298] { grid-column: span 22; } .col-sm-20[data-v-23d9f298] { grid-column: span 20; } .col-sm-18[data-v-23d9f298] { grid-column: span 18; } .col-sm-16[data-v-23d9f298] { grid-column: span 16; } .col-sm-15[data-v-23d9f298] { grid-column: span 15; } .col-sm-14[data-v-23d9f298] { grid-column: span 14; } .col-sm-13[data-v-23d9f298] { grid-column: span 12; } .col-sm-12[data-v-23d9f298] { grid-column: span 12; } .col-sm-10[data-v-23d9f298] { grid-column: span 10; } .col-sm-9[data-v-23d9f298] { grid-column: span 8; } .col-sm-8[data-v-23d9f298] { grid-column: span 8; } .col-sm-6[data-v-23d9f298] { grid-column: span 6; } .col-sm-4[data-v-23d9f298] { grid-column: span 4; } .col-sm-auto[data-v-23d9f298] { grid-column: auto; } } .fade-enter-active[data-v-23d9f298] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-23d9f298] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-23d9f298], .fade-leave-to[data-v-23d9f298] { opacity: 0; } .admin-sessions[data-v-23d9f298] { display: flex; flex-direction: column; gap: 24px; } .admin-sessions .dashboard-card[data-v-23d9f298] { background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 12px; padding: 20px; } .sessions-stats[data-v-23d9f298] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .stat-card[data-v-23d9f298] { display: flex; align-items: center; gap: 16px; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 12px; padding: 20px; transition: all 0.2s ease; } .stat-card[data-v-23d9f298]:hover { border-color: var(--primary-300); } .stat-card--primary[data-v-23d9f298] { border-left: 4px solid var(--primary-500); } .stat-card--success[data-v-23d9f298] { border-left: 4px solid var(--success-500); } .stat-card--info[data-v-23d9f298] { border-left: 4px solid var(--info-500); } .stat-card--warning[data-v-23d9f298] { border-left: 4px solid var(--warning-500); } .stat-card__content[data-v-23d9f298] { display: flex; flex-direction: column; } .stat-card__value[data-v-23d9f298] { font-size: 28px; font-weight: 700; color: var(--text-primary); } .stat-card__label[data-v-23d9f298] { font-size: 14px; color: var(--text-muted); } .active-sessions .section-header[data-v-23d9f298] { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .active-sessions .pulse-dot[data-v-23d9f298] { display: inline-block; width: 10px; height: 10px; background: var(--success-500); border-radius: 50%; margin-right: 8px; animation: pulse-23d9f298 2s infinite; } .active-sessions__list[data-v-23d9f298] { display: flex; flex-direction: column; gap: 8px; } .active-session-item[data-v-23d9f298] { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-subtle); border-radius: 8px; transition: background 0.15s ease; } .active-session-item[data-v-23d9f298]:hover { background: rgba(var(--primary-500-rgb), 0.08); } .active-session-item__avatar[data-v-23d9f298] { width: 36px; height: 36px; border-radius: 50%; background: var(--border-default); display: flex; align-items: center; justify-content: center; overflow: hidden; } .active-session-item__avatar img[data-v-23d9f298] { width: 100%; height: 100%; object-fit: cover; } .active-session-item__info[data-v-23d9f298] { flex: 1; display: flex; flex-direction: column; } .active-session-item__info .name[data-v-23d9f298] { font-weight: 600; color: var(--text-primary); } .active-session-item__info .details[data-v-23d9f298] { font-size: 13px; color: var(--text-muted); } .sessions-filters[data-v-23d9f298] { display: flex; gap: 8px; margin-left: 16px; } .sessions-header[data-v-23d9f298], .sessions-item[data-v-23d9f298] { align-items: center; } .sessions-item[data-v-23d9f298] { cursor: default; transition: background 0.15s ease; } .sessions-item[data-v-23d9f298]:hover { background: rgba(var(--primary-500-rgb), 0.08); } .user-cell[data-v-23d9f298] { display: flex; align-items: center; gap: 8px; } .user-cell .avatar[data-v-23d9f298] { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .user-cell .user-name[data-v-23d9f298] { font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .location-cell[data-v-23d9f298], .device-cell[data-v-23d9f298] { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-secondary); } .actions-cell[data-v-23d9f298] { display: flex; gap: 4px; } .pages-viewed[data-v-23d9f298] { font-size: 13px; color: var(--text-muted); } .sessions-countries .countries-grid[data-v-23d9f298] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; } .country-item[data-v-23d9f298] { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-subtle); border-radius: 8px; } .country-item .country-flag[data-v-23d9f298] { font-size: 24px; } .country-item .country-name[data-v-23d9f298] { flex: 1; font-weight: 500; color: var(--text-primary); } .country-item .country-sessions[data-v-23d9f298] { font-size: 13px; color: var(--text-muted); } @keyframes pulse-23d9f298 { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @media (max-width: 720px) { .sessions-stats[data-v-23d9f298] { grid-template-columns: repeat(2, 1fr); } .stat-card[data-v-23d9f298] { padding: 14px; gap: 10px; } .stat-card__value[data-v-23d9f298] { font-size: 22px; } .stat-card__label[data-v-23d9f298] { font-size: 12px; } .sessions-filters[data-v-23d9f298] { flex-wrap: wrap; margin-left: 0; margin-top: 12px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-34b446f8]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-34b446f8] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-34b446f8] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-34b446f8]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-34b446f8], .theme-mode-light[data-v-34b446f8] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-34b446f8], .theme-mode-dark[data-v-34b446f8] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-34b446f8]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-34b446f8]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-34b446f8] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-34b446f8] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-34b446f8]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-34b446f8], input[disabled][data-v-34b446f8] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-34b446f8] { opacity: 0.9; } input[readonly][data-v-34b446f8] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-34b446f8] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-34b446f8]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-34b446f8]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-34b446f8]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-34b446f8] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-34b446f8]:nth-child(odd), .list-card-desktop__wrapper[data-v-34b446f8]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-34b446f8]:nth-child(even), .list-card-desktop__wrapper[data-v-34b446f8]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-34b446f8]:nth-child(odd), .listCardDesktopWrapper[data-v-34b446f8]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-34b446f8]:nth-child(even), .listCardDesktopWrapper[data-v-34b446f8]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-34b446f8] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-34b446f8] { cursor: pointer; } .card-layout--selectionnable[data-v-34b446f8]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-34b446f8] { cursor: auto; } .card-layout--drawer[data-v-34b446f8] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-34b446f8] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-34b446f8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-34b446f8] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-34b446f8] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-34b446f8] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-34b446f8]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-34b446f8] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-34b446f8] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-34b446f8] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-34b446f8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-34b446f8] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-34b446f8] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-34b446f8] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-34b446f8] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-34b446f8] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-34b446f8] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-34b446f8] { background-color: #eb1515; } .color-chip--dossiers[data-v-34b446f8] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-34b446f8] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-34b446f8] { background-color: #00a79b; } .color-chip--virements[data-v-34b446f8] { background-color: var(--secondary-400); } .color-chip--factures[data-v-34b446f8] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-34b446f8] { background-color: #eb1515; } .color-recherche-dossiers[data-v-34b446f8] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-34b446f8] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-34b446f8] { background-color: #00a79b; } .color-recherche-virements[data-v-34b446f8] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-34b446f8] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-34b446f8] { color: #00a79b; cursor: pointer; } .scrollable[data-v-34b446f8] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-34b446f8] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-34b446f8] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-34b446f8] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-34b446f8] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-34b446f8] { font-weight: 800; } .grid-cell--column[data-v-34b446f8] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-34b446f8] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-34b446f8] { fill: #00a79b; } .grid-cell--disabled[data-v-34b446f8] { color: #cccccc; } .grid-cell--disabled svg[data-v-34b446f8] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-34b446f8] { white-space: nowrap; } .grid-cell--danger svg[data-v-34b446f8] { fill: #eb1515; } .grid-cell--span-1[data-v-34b446f8] { grid-column: span 1; } .grid-cell--span-2[data-v-34b446f8] { grid-column: span 2; } .grid-cell--span-3[data-v-34b446f8] { grid-column: span 3; } .grid-cell--span-4[data-v-34b446f8] { grid-column: span 4; } .grid-cell--span-5[data-v-34b446f8] { grid-column: span 5; } .grid-cell--span-6[data-v-34b446f8] { grid-column: span 6; } .grid-cell--span-7[data-v-34b446f8] { grid-column: span 7; } .grid-cell--span-8[data-v-34b446f8] { grid-column: span 8; } .grid-cell--span-9[data-v-34b446f8] { grid-column: span 9; } .grid-cell--span-10[data-v-34b446f8] { grid-column: span 10; } .grid-cell--span-12[data-v-34b446f8] { grid-column: span 12; } .grid-cell--span-13[data-v-34b446f8] { grid-column: span 13; } .grid-cell--span-14[data-v-34b446f8] { grid-column: span 14; } .grid-cell--span-16[data-v-34b446f8] { grid-column: span 16; } .grid-cell--span-18[data-v-34b446f8] { grid-column: span 18; } .grid-cell--span-20[data-v-34b446f8] { grid-column: span 20; } .grid-cell--span-32[data-v-34b446f8] { grid-column: span 32; } .grid-cell--span-36[data-v-34b446f8] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-34b446f8] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-34b446f8] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-34b446f8] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-34b446f8] { justify-content: center !important; } .elem--bold span[data-v-34b446f8] { font-weight: 800; } .elem--column[data-v-34b446f8] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-34b446f8] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-34b446f8] { fill: #00a79b; } .elem--clickable[data-v-34b446f8]:hover { cursor: pointer; } .elem--disabled[data-v-34b446f8] { color: #cccccc; } .elem--disabled svg[data-v-34b446f8] { fill: #cccccc; } .elem--nowrap span[data-v-34b446f8] { white-space: nowrap; } .elem--danger svg[data-v-34b446f8] { fill: #eb1515; } .elem--span-1[data-v-34b446f8] { grid-column: span 1; } .elem--span-2[data-v-34b446f8] { grid-column: span 2; } .elem--span-3[data-v-34b446f8] { grid-column: span 3; } .elem--span-4[data-v-34b446f8] { grid-column: span 4; } .elem--span-5[data-v-34b446f8] { grid-column: span 5; } .elem--span-6[data-v-34b446f8] { grid-column: span 6; } .elem--span-7[data-v-34b446f8] { grid-column: span 7; } .elem--span-8[data-v-34b446f8] { grid-column: span 8; } .elem--span-9[data-v-34b446f8] { grid-column: span 9; } .elem--span-10[data-v-34b446f8] { grid-column: span 10; } .elem--span-12[data-v-34b446f8] { grid-column: span 12; } .elem--span-13[data-v-34b446f8] { grid-column: span 13; } .elem--span-14[data-v-34b446f8] { grid-column: span 14; } .elem--span-16[data-v-34b446f8] { grid-column: span 16; } .elem--span-18[data-v-34b446f8] { grid-column: span 18; } .elem--span-20[data-v-34b446f8] { grid-column: span 20; } .elem--span-32[data-v-34b446f8] { grid-column: span 32; } .elem--span-36[data-v-34b446f8] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-34b446f8] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-34b446f8] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-34b446f8]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-34b446f8] { display: flex; } /* flex-direction */ .flex-column[data-v-34b446f8] { flex-direction: column; } .flex-row[data-v-34b446f8] { flex-direction: row; } /* flex */ .flex-1[data-v-34b446f8] { flex: 1 !important; } .flex-2[data-v-34b446f8] { flex: 2; } .flex-3[data-v-34b446f8] { flex: 3; } .flex-3[data-v-34b446f8] { flex: 4; } .flex-5[data-v-34b446f8] { flex: 5; } .flex-auto[data-v-34b446f8] { flex: auto; } .flex-none[data-v-34b446f8] { flex: none; } .flex-content[data-v-34b446f8] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-34b446f8] { flex-wrap: wrap; } .flex-nowrap[data-v-34b446f8] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-34b446f8] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-34b446f8] { justify-content: flex-start; } .justify-content-end[data-v-34b446f8] { justify-content: flex-end; } .justify-content-baseline[data-v-34b446f8] { justify-content: baseline; } .justify-content-center[data-v-34b446f8] { justify-content: center; } .justify-content-space-between[data-v-34b446f8] { justify-content: space-between; } .justify-content-space-around[data-v-34b446f8] { justify-content: space-around; } .justify-content-space-evenly[data-v-34b446f8] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-34b446f8] { align-items: flex-start; } .align-items-flex-end[data-v-34b446f8] { align-items: flex-end; } .align-items-stretch[data-v-34b446f8] { align-items: stretch; } .align-items-baseline[data-v-34b446f8] { align-items: baseline; } .align-items-center[data-v-34b446f8] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-34b446f8] { align-content: flex-start; } .align-content-flex-end[data-v-34b446f8] { align-content: flex-end; } .align-content-center[data-v-34b446f8] { align-content: center; } .align-content-stretch[data-v-34b446f8] { align-content: stretch; } .align-content-space-between[data-v-34b446f8] { align-content: space-between; } .align-content-space-around[data-v-34b446f8] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-34b446f8] { align-self: flex-start; } .align-self-flex-end[data-v-34b446f8] { align-self: flex-end; } .align-self-stretch[data-v-34b446f8] { align-self: stretch; } .align-self-flex-baseline[data-v-34b446f8] { align-self: baseline; } .align-self-center[data-v-34b446f8] { align-self: center; } .align-self-auto[data-v-34b446f8] { align-self: auto; } .flex-gap-1[data-v-34b446f8] { gap: 4px; } .flex-gap-2[data-v-34b446f8] { gap: 8px; } .flex-gap-3[data-v-34b446f8] { gap: 12px; } .flex-gap-4[data-v-34b446f8] { gap: 16px; } .flex-gap-5[data-v-34b446f8] { gap: 20px; } .flex-gap-6[data-v-34b446f8] { gap: 24px; } .flex-gap-7[data-v-34b446f8] { gap: 28px; } .flex-gap-8[data-v-34b446f8] { gap: 32px; } .flex-gap-10[data-v-34b446f8] { gap: 40px; } .flex-gap-12[data-v-34b446f8] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-34b446f8] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-34b446f8] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-34b446f8] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-34b446f8] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-34b446f8] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-34b446f8] { display: none !important; } } .col-none[data-v-34b446f8] { display: none; } .col-auto[data-v-34b446f8] { grid-column: auto; } .col-1[data-v-34b446f8] { grid-column: span 1; } .col-2[data-v-34b446f8] { grid-column: span 2; } .col-3[data-v-34b446f8] { grid-column: span 3; } .col-4[data-v-34b446f8] { grid-column: span 4; } .col-5[data-v-34b446f8] { grid-column: span 5; } .col-6[data-v-34b446f8] { grid-column: span 6; } .col-7[data-v-34b446f8] { grid-column: span 7; } .col-8[data-v-34b446f8] { grid-column: span 8; } .col-9[data-v-34b446f8] { grid-column: span 9; } .col-10[data-v-34b446f8] { grid-column: span 10; } .col-12[data-v-34b446f8] { grid-column: span 12; } .col-13[data-v-34b446f8] { grid-column: span 13; } .col-14[data-v-34b446f8] { grid-column: span 14; } .col-15[data-v-34b446f8] { grid-column: span 15; } .col-16[data-v-34b446f8] { grid-column: span 16; } .col-18[data-v-34b446f8] { grid-column: span 18; } .col-20[data-v-34b446f8] { grid-column: span 20; } .col-22[data-v-34b446f8] { grid-column: span 22; } .col-24[data-v-34b446f8] { grid-column: span 24; } .col-26[data-v-34b446f8] { grid-column: span 26; } .col-27[data-v-34b446f8] { grid-column: span 27; } .col-28[data-v-34b446f8] { grid-column: span 28; } .col-30[data-v-34b446f8] { grid-column: span 30; } .col-36[data-v-34b446f8] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-34b446f8] { display: none; } .col-md-36[data-v-34b446f8] { grid-column: span 36; } .col-md-28[data-v-34b446f8] { grid-column: span 28; } .col-md-27[data-v-34b446f8] { grid-column: span 27; } .col-md-24[data-v-34b446f8] { grid-column: span 24; } .col-md-22[data-v-34b446f8] { grid-column: span 22; } .col-md-20[data-v-34b446f8] { grid-column: span 20; } .col-md-19[data-v-34b446f8] { grid-column: span 19; } .col-md-18[data-v-34b446f8] { grid-column: span 18; } .col-md-17[data-v-34b446f8] { grid-column: span 17; } .col-md-16[data-v-34b446f8] { grid-column: span 16; } .col-md-15[data-v-34b446f8] { grid-column: span 15; } .col-md-14[data-v-34b446f8] { grid-column: span 14; } .col-md-13[data-v-34b446f8] { grid-column: span 13; } .col-md-12[data-v-34b446f8] { grid-column: span 12; } .col-md-10[data-v-34b446f8] { grid-column: span 10; } .col-md-9[data-v-34b446f8] { grid-column: span 9; } .col-md-8[data-v-34b446f8] { grid-column: span 8; } .col-md-6[data-v-34b446f8] { grid-column: span 6; } .col-md-5[data-v-34b446f8] { grid-column: span 5; } .col-md-4[data-v-34b446f8] { grid-column: span 4; } .col-md-3[data-v-34b446f8] { grid-column: span 3; } .col-md-2[data-v-34b446f8] { grid-column: span 2; } .col-md-1[data-v-34b446f8] { grid-column: span 1; } .col-md-auto[data-v-34b446f8] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-34b446f8] { display: none; } .col-sm-36[data-v-34b446f8] { grid-column: span 36; } .col-sm-32[data-v-34b446f8] { grid-column: span 32; } .col-sm-28[data-v-34b446f8] { grid-column: span 28; } .col-sm-27[data-v-34b446f8] { grid-column: span 27; } .col-sm-24[data-v-34b446f8] { grid-column: span 24; } .col-sm-22[data-v-34b446f8] { grid-column: span 22; } .col-sm-20[data-v-34b446f8] { grid-column: span 20; } .col-sm-18[data-v-34b446f8] { grid-column: span 18; } .col-sm-16[data-v-34b446f8] { grid-column: span 16; } .col-sm-15[data-v-34b446f8] { grid-column: span 15; } .col-sm-14[data-v-34b446f8] { grid-column: span 14; } .col-sm-13[data-v-34b446f8] { grid-column: span 12; } .col-sm-12[data-v-34b446f8] { grid-column: span 12; } .col-sm-10[data-v-34b446f8] { grid-column: span 10; } .col-sm-9[data-v-34b446f8] { grid-column: span 8; } .col-sm-8[data-v-34b446f8] { grid-column: span 8; } .col-sm-6[data-v-34b446f8] { grid-column: span 6; } .col-sm-4[data-v-34b446f8] { grid-column: span 4; } .col-sm-auto[data-v-34b446f8] { grid-column: auto; } } .fade-enter-active[data-v-34b446f8] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-34b446f8] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-34b446f8], .fade-leave-to[data-v-34b446f8] { opacity: 0; } .mobile-card[data-v-34b446f8] { background: var(--bg-subtle); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .mobile-card[data-v-34b446f8]:hover { border-color: var(--primary-300); } .mobile-card[data-v-34b446f8]:active { background: rgba(var(--primary-500-rgb), 0.08); } .top-row[data-v-34b446f8] { display: flex; align-items: center; gap: 10px; } .thumb[data-v-34b446f8] { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border-default); background: var(--bg-subtle); flex-shrink: 0; } .content[data-v-34b446f8] { flex: 1; display: flex; flex-direction: column; gap: 2px; } .content .title[data-v-34b446f8] { line-height: 1.2; } .theme[data-v-34b446f8] { margin-left: 66px; } .actions[data-v-34b446f8] { display: flex; justify-content: flex-end; align-items: center; } .action-btn[data-v-34b446f8] { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s ease; margin: -8px -8px -8px 0; } .action-btn[data-v-34b446f8]:active { background: rgba(239, 68, 68, 0.1); } .action-btn svg[data-v-34b446f8] { opacity: 0.8; transition: opacity 0.2s ease; } .action-btn:hover svg[data-v-34b446f8] { opacity: 1; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-ca7e1cee]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-ca7e1cee] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-ca7e1cee] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-ca7e1cee]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-ca7e1cee], .theme-mode-light[data-v-ca7e1cee] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-ca7e1cee], .theme-mode-dark[data-v-ca7e1cee] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-ca7e1cee]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-ca7e1cee]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-ca7e1cee] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-ca7e1cee] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-ca7e1cee]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-ca7e1cee], input[disabled][data-v-ca7e1cee] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-ca7e1cee] { opacity: 0.9; } input[readonly][data-v-ca7e1cee] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-ca7e1cee] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-ca7e1cee]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-ca7e1cee]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-ca7e1cee]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-ca7e1cee] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-ca7e1cee]:nth-child(odd), .list-card-desktop__wrapper[data-v-ca7e1cee]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-ca7e1cee]:nth-child(even), .list-card-desktop__wrapper[data-v-ca7e1cee]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-ca7e1cee]:nth-child(odd), .listCardDesktopWrapper[data-v-ca7e1cee]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-ca7e1cee]:nth-child(even), .listCardDesktopWrapper[data-v-ca7e1cee]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-ca7e1cee] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-ca7e1cee] { cursor: pointer; } .card-layout--selectionnable[data-v-ca7e1cee]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-ca7e1cee] { cursor: auto; } .card-layout--drawer[data-v-ca7e1cee] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-ca7e1cee] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-ca7e1cee] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-ca7e1cee] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-ca7e1cee] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-ca7e1cee] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-ca7e1cee]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-ca7e1cee] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-ca7e1cee] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-ca7e1cee] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-ca7e1cee] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-ca7e1cee] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-ca7e1cee] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-ca7e1cee] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-ca7e1cee] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-ca7e1cee] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-ca7e1cee] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-ca7e1cee] { background-color: #eb1515; } .color-chip--dossiers[data-v-ca7e1cee] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-ca7e1cee] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-ca7e1cee] { background-color: #00a79b; } .color-chip--virements[data-v-ca7e1cee] { background-color: var(--secondary-400); } .color-chip--factures[data-v-ca7e1cee] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-ca7e1cee] { background-color: #eb1515; } .color-recherche-dossiers[data-v-ca7e1cee] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-ca7e1cee] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-ca7e1cee] { background-color: #00a79b; } .color-recherche-virements[data-v-ca7e1cee] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-ca7e1cee] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-ca7e1cee] { color: #00a79b; cursor: pointer; } .scrollable[data-v-ca7e1cee] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-ca7e1cee] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-ca7e1cee] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-ca7e1cee] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-ca7e1cee] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-ca7e1cee] { font-weight: 800; } .grid-cell--column[data-v-ca7e1cee] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-ca7e1cee] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-ca7e1cee] { fill: #00a79b; } .grid-cell--disabled[data-v-ca7e1cee] { color: #cccccc; } .grid-cell--disabled svg[data-v-ca7e1cee] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-ca7e1cee] { white-space: nowrap; } .grid-cell--danger svg[data-v-ca7e1cee] { fill: #eb1515; } .grid-cell--span-1[data-v-ca7e1cee] { grid-column: span 1; } .grid-cell--span-2[data-v-ca7e1cee] { grid-column: span 2; } .grid-cell--span-3[data-v-ca7e1cee] { grid-column: span 3; } .grid-cell--span-4[data-v-ca7e1cee] { grid-column: span 4; } .grid-cell--span-5[data-v-ca7e1cee] { grid-column: span 5; } .grid-cell--span-6[data-v-ca7e1cee] { grid-column: span 6; } .grid-cell--span-7[data-v-ca7e1cee] { grid-column: span 7; } .grid-cell--span-8[data-v-ca7e1cee] { grid-column: span 8; } .grid-cell--span-9[data-v-ca7e1cee] { grid-column: span 9; } .grid-cell--span-10[data-v-ca7e1cee] { grid-column: span 10; } .grid-cell--span-12[data-v-ca7e1cee] { grid-column: span 12; } .grid-cell--span-13[data-v-ca7e1cee] { grid-column: span 13; } .grid-cell--span-14[data-v-ca7e1cee] { grid-column: span 14; } .grid-cell--span-16[data-v-ca7e1cee] { grid-column: span 16; } .grid-cell--span-18[data-v-ca7e1cee] { grid-column: span 18; } .grid-cell--span-20[data-v-ca7e1cee] { grid-column: span 20; } .grid-cell--span-32[data-v-ca7e1cee] { grid-column: span 32; } .grid-cell--span-36[data-v-ca7e1cee] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-ca7e1cee] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-ca7e1cee] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-ca7e1cee] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-ca7e1cee] { justify-content: center !important; } .elem--bold span[data-v-ca7e1cee] { font-weight: 800; } .elem--column[data-v-ca7e1cee] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-ca7e1cee] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-ca7e1cee] { fill: #00a79b; } .elem--clickable[data-v-ca7e1cee]:hover { cursor: pointer; } .elem--disabled[data-v-ca7e1cee] { color: #cccccc; } .elem--disabled svg[data-v-ca7e1cee] { fill: #cccccc; } .elem--nowrap span[data-v-ca7e1cee] { white-space: nowrap; } .elem--danger svg[data-v-ca7e1cee] { fill: #eb1515; } .elem--span-1[data-v-ca7e1cee] { grid-column: span 1; } .elem--span-2[data-v-ca7e1cee] { grid-column: span 2; } .elem--span-3[data-v-ca7e1cee] { grid-column: span 3; } .elem--span-4[data-v-ca7e1cee] { grid-column: span 4; } .elem--span-5[data-v-ca7e1cee] { grid-column: span 5; } .elem--span-6[data-v-ca7e1cee] { grid-column: span 6; } .elem--span-7[data-v-ca7e1cee] { grid-column: span 7; } .elem--span-8[data-v-ca7e1cee] { grid-column: span 8; } .elem--span-9[data-v-ca7e1cee] { grid-column: span 9; } .elem--span-10[data-v-ca7e1cee] { grid-column: span 10; } .elem--span-12[data-v-ca7e1cee] { grid-column: span 12; } .elem--span-13[data-v-ca7e1cee] { grid-column: span 13; } .elem--span-14[data-v-ca7e1cee] { grid-column: span 14; } .elem--span-16[data-v-ca7e1cee] { grid-column: span 16; } .elem--span-18[data-v-ca7e1cee] { grid-column: span 18; } .elem--span-20[data-v-ca7e1cee] { grid-column: span 20; } .elem--span-32[data-v-ca7e1cee] { grid-column: span 32; } .elem--span-36[data-v-ca7e1cee] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-ca7e1cee] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-ca7e1cee] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-ca7e1cee]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-ca7e1cee] { display: flex; } /* flex-direction */ .flex-column[data-v-ca7e1cee] { flex-direction: column; } .flex-row[data-v-ca7e1cee] { flex-direction: row; } /* flex */ .flex-1[data-v-ca7e1cee] { flex: 1 !important; } .flex-2[data-v-ca7e1cee] { flex: 2; } .flex-3[data-v-ca7e1cee] { flex: 3; } .flex-3[data-v-ca7e1cee] { flex: 4; } .flex-5[data-v-ca7e1cee] { flex: 5; } .flex-auto[data-v-ca7e1cee] { flex: auto; } .flex-none[data-v-ca7e1cee] { flex: none; } .flex-content[data-v-ca7e1cee] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-ca7e1cee] { flex-wrap: wrap; } .flex-nowrap[data-v-ca7e1cee] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-ca7e1cee] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-ca7e1cee] { justify-content: flex-start; } .justify-content-end[data-v-ca7e1cee] { justify-content: flex-end; } .justify-content-baseline[data-v-ca7e1cee] { justify-content: baseline; } .justify-content-center[data-v-ca7e1cee] { justify-content: center; } .justify-content-space-between[data-v-ca7e1cee] { justify-content: space-between; } .justify-content-space-around[data-v-ca7e1cee] { justify-content: space-around; } .justify-content-space-evenly[data-v-ca7e1cee] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-ca7e1cee] { align-items: flex-start; } .align-items-flex-end[data-v-ca7e1cee] { align-items: flex-end; } .align-items-stretch[data-v-ca7e1cee] { align-items: stretch; } .align-items-baseline[data-v-ca7e1cee] { align-items: baseline; } .align-items-center[data-v-ca7e1cee] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-ca7e1cee] { align-content: flex-start; } .align-content-flex-end[data-v-ca7e1cee] { align-content: flex-end; } .align-content-center[data-v-ca7e1cee] { align-content: center; } .align-content-stretch[data-v-ca7e1cee] { align-content: stretch; } .align-content-space-between[data-v-ca7e1cee] { align-content: space-between; } .align-content-space-around[data-v-ca7e1cee] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-ca7e1cee] { align-self: flex-start; } .align-self-flex-end[data-v-ca7e1cee] { align-self: flex-end; } .align-self-stretch[data-v-ca7e1cee] { align-self: stretch; } .align-self-flex-baseline[data-v-ca7e1cee] { align-self: baseline; } .align-self-center[data-v-ca7e1cee] { align-self: center; } .align-self-auto[data-v-ca7e1cee] { align-self: auto; } .flex-gap-1[data-v-ca7e1cee] { gap: 4px; } .flex-gap-2[data-v-ca7e1cee] { gap: 8px; } .flex-gap-3[data-v-ca7e1cee] { gap: 12px; } .flex-gap-4[data-v-ca7e1cee] { gap: 16px; } .flex-gap-5[data-v-ca7e1cee] { gap: 20px; } .flex-gap-6[data-v-ca7e1cee] { gap: 24px; } .flex-gap-7[data-v-ca7e1cee] { gap: 28px; } .flex-gap-8[data-v-ca7e1cee] { gap: 32px; } .flex-gap-10[data-v-ca7e1cee] { gap: 40px; } .flex-gap-12[data-v-ca7e1cee] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-ca7e1cee] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-ca7e1cee] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-ca7e1cee] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-ca7e1cee] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-ca7e1cee] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-ca7e1cee] { display: none !important; } } .col-none[data-v-ca7e1cee] { display: none; } .col-auto[data-v-ca7e1cee] { grid-column: auto; } .col-1[data-v-ca7e1cee] { grid-column: span 1; } .col-2[data-v-ca7e1cee] { grid-column: span 2; } .col-3[data-v-ca7e1cee] { grid-column: span 3; } .col-4[data-v-ca7e1cee] { grid-column: span 4; } .col-5[data-v-ca7e1cee] { grid-column: span 5; } .col-6[data-v-ca7e1cee] { grid-column: span 6; } .col-7[data-v-ca7e1cee] { grid-column: span 7; } .col-8[data-v-ca7e1cee] { grid-column: span 8; } .col-9[data-v-ca7e1cee] { grid-column: span 9; } .col-10[data-v-ca7e1cee] { grid-column: span 10; } .col-12[data-v-ca7e1cee] { grid-column: span 12; } .col-13[data-v-ca7e1cee] { grid-column: span 13; } .col-14[data-v-ca7e1cee] { grid-column: span 14; } .col-15[data-v-ca7e1cee] { grid-column: span 15; } .col-16[data-v-ca7e1cee] { grid-column: span 16; } .col-18[data-v-ca7e1cee] { grid-column: span 18; } .col-20[data-v-ca7e1cee] { grid-column: span 20; } .col-22[data-v-ca7e1cee] { grid-column: span 22; } .col-24[data-v-ca7e1cee] { grid-column: span 24; } .col-26[data-v-ca7e1cee] { grid-column: span 26; } .col-27[data-v-ca7e1cee] { grid-column: span 27; } .col-28[data-v-ca7e1cee] { grid-column: span 28; } .col-30[data-v-ca7e1cee] { grid-column: span 30; } .col-36[data-v-ca7e1cee] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-ca7e1cee] { display: none; } .col-md-36[data-v-ca7e1cee] { grid-column: span 36; } .col-md-28[data-v-ca7e1cee] { grid-column: span 28; } .col-md-27[data-v-ca7e1cee] { grid-column: span 27; } .col-md-24[data-v-ca7e1cee] { grid-column: span 24; } .col-md-22[data-v-ca7e1cee] { grid-column: span 22; } .col-md-20[data-v-ca7e1cee] { grid-column: span 20; } .col-md-19[data-v-ca7e1cee] { grid-column: span 19; } .col-md-18[data-v-ca7e1cee] { grid-column: span 18; } .col-md-17[data-v-ca7e1cee] { grid-column: span 17; } .col-md-16[data-v-ca7e1cee] { grid-column: span 16; } .col-md-15[data-v-ca7e1cee] { grid-column: span 15; } .col-md-14[data-v-ca7e1cee] { grid-column: span 14; } .col-md-13[data-v-ca7e1cee] { grid-column: span 13; } .col-md-12[data-v-ca7e1cee] { grid-column: span 12; } .col-md-10[data-v-ca7e1cee] { grid-column: span 10; } .col-md-9[data-v-ca7e1cee] { grid-column: span 9; } .col-md-8[data-v-ca7e1cee] { grid-column: span 8; } .col-md-6[data-v-ca7e1cee] { grid-column: span 6; } .col-md-5[data-v-ca7e1cee] { grid-column: span 5; } .col-md-4[data-v-ca7e1cee] { grid-column: span 4; } .col-md-3[data-v-ca7e1cee] { grid-column: span 3; } .col-md-2[data-v-ca7e1cee] { grid-column: span 2; } .col-md-1[data-v-ca7e1cee] { grid-column: span 1; } .col-md-auto[data-v-ca7e1cee] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-ca7e1cee] { display: none; } .col-sm-36[data-v-ca7e1cee] { grid-column: span 36; } .col-sm-32[data-v-ca7e1cee] { grid-column: span 32; } .col-sm-28[data-v-ca7e1cee] { grid-column: span 28; } .col-sm-27[data-v-ca7e1cee] { grid-column: span 27; } .col-sm-24[data-v-ca7e1cee] { grid-column: span 24; } .col-sm-22[data-v-ca7e1cee] { grid-column: span 22; } .col-sm-20[data-v-ca7e1cee] { grid-column: span 20; } .col-sm-18[data-v-ca7e1cee] { grid-column: span 18; } .col-sm-16[data-v-ca7e1cee] { grid-column: span 16; } .col-sm-15[data-v-ca7e1cee] { grid-column: span 15; } .col-sm-14[data-v-ca7e1cee] { grid-column: span 14; } .col-sm-13[data-v-ca7e1cee] { grid-column: span 12; } .col-sm-12[data-v-ca7e1cee] { grid-column: span 12; } .col-sm-10[data-v-ca7e1cee] { grid-column: span 10; } .col-sm-9[data-v-ca7e1cee] { grid-column: span 8; } .col-sm-8[data-v-ca7e1cee] { grid-column: span 8; } .col-sm-6[data-v-ca7e1cee] { grid-column: span 6; } .col-sm-4[data-v-ca7e1cee] { grid-column: span 4; } .col-sm-auto[data-v-ca7e1cee] { grid-column: auto; } } .fade-enter-active[data-v-ca7e1cee] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-ca7e1cee] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-ca7e1cee], .fade-leave-to[data-v-ca7e1cee] { opacity: 0; } .topic-form[data-v-ca7e1cee] { display: flex; flex-direction: column; gap: 28px; padding: 16px; overflow-x: hidden; } .hidden-input[data-v-ca7e1cee] { display: none; } .image-preview[data-v-ca7e1cee] { margin-top: 16px; padding: 20px; border: 2px dashed var(--primary-200); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.03) 0%, rgba(var(--primary-300-rgb), 0.05) 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; overflow: hidden; } .image-preview[data-v-ca7e1cee]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: radial-gradient(circle at 50% 0%, rgba(var(--primary-500-rgb), 0.05) 0%, transparent 70%); pointer-events: none; } .image-preview img[data-v-ca7e1cee] { max-width: 280px; max-height: 220px; object-fit: contain; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; } .image-preview img[data-v-ca7e1cee]:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); } .image-preview .image-actions[data-v-ca7e1cee] { display: flex; gap: 12px; margin-top: 8px; z-index: 1; position: relative; } .image-preview .image-actions button[data-v-ca7e1cee] { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .image-preview .image-actions button[data-v-ca7e1cee]:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .image-preview .image-actions button[data-v-ca7e1cee]:active { opacity: 0.9; } .topic-form[data-v-ca7e1cee] > * { animation: fadeInUp-ca7e1cee 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .topic-form[data-v-ca7e1cee] > *:nth-child(1) { animation-delay: 0.05s; } .topic-form[data-v-ca7e1cee] > *:nth-child(2) { animation-delay: 0.1s; } .topic-form[data-v-ca7e1cee] > *:nth-child(3) { animation-delay: 0.15s; } @keyframes fadeInUp-ca7e1cee { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } [data-v-ca7e1cee] .wrapper-input .input-wrapper { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } [data-v-ca7e1cee] .wrapper-input .input-wrapper:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .translations-section[data-v-ca7e1cee] { margin-top: 8px; border: 2px dashed var(--primary-200); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.02) 0%, rgba(var(--secondary-500-rgb), 0.02) 100%); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .translations-section[data-v-ca7e1cee]:hover { border-color: var(--primary-300); box-shadow: 0 4px 12px rgba(var(--primary-500-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); } .translations-section .translations-header[data-v-ca7e1cee] { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.05) 0%, rgba(var(--primary-300-rgb), 0.03) 100%); cursor: pointer; transition: all 0.2s; user-select: none; } .translations-section .translations-header[data-v-ca7e1cee]:hover { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.08) 0%, rgba(var(--primary-300-rgb), 0.06) 100%); } .translations-section .translations-header[data-v-ca7e1cee]:active { transform: scale(0.99); } .translations-section .translations-content[data-v-ca7e1cee] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; background: #ffffff; animation: slideDown-ca7e1cee 0.3s ease-out; } @media (max-width: 720px) { .translations-section .translations-content[data-v-ca7e1cee] { grid-template-columns: 1fr; gap: 20px; padding: 16px; } } .translations-section .language-group[data-v-ca7e1cee] { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); border-radius: 12px; border: 1px solid #e2e7ef; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04); } .translations-section .language-group .language-title[data-v-ca7e1cee] { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--primary-100); margin-bottom: 4px; } .translations-section .language-group .custom-textarea[data-v-ca7e1cee] { border: 2px solid #e2e7ef; border-radius: 12px; padding: 14px 16px; font-size: 14px; width: 100%; resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.6; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .translations-section .language-group .custom-textarea[data-v-ca7e1cee]:hover { border-color: var(--primary-300); } .translations-section .language-group .custom-textarea[data-v-ca7e1cee]:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(var(--primary-500-rgb), 0.1), 0 2px 8px rgba(var(--primary-500-rgb), 0.15); background: #ffffff; } .translations-section .language-group .custom-textarea[data-v-ca7e1cee]::placeholder { color: #b4bfce; } @keyframes slideDown-ca7e1cee { from { opacity: 0; max-height: 0; transform: translateY(-10px); } to { opacity: 1; max-height: 1000px; transform: translateY(0); } } @media (max-width: 720px) { .topic-form[data-v-ca7e1cee] { gap: 20px; padding: 4px; } .image-preview img[data-v-ca7e1cee] { max-width: 220px; max-height: 180px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-e9d2e64b]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-e9d2e64b] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-e9d2e64b] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-e9d2e64b]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-e9d2e64b], .theme-mode-light[data-v-e9d2e64b] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-e9d2e64b], .theme-mode-dark[data-v-e9d2e64b] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-e9d2e64b]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-e9d2e64b]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-e9d2e64b] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-e9d2e64b] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-e9d2e64b]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-e9d2e64b], input[disabled][data-v-e9d2e64b] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-e9d2e64b] { opacity: 0.9; } input[readonly][data-v-e9d2e64b] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-e9d2e64b] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-e9d2e64b]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-e9d2e64b]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-e9d2e64b]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-e9d2e64b] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-e9d2e64b]:nth-child(odd), .list-card-desktop__wrapper[data-v-e9d2e64b]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-e9d2e64b]:nth-child(even), .list-card-desktop__wrapper[data-v-e9d2e64b]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-e9d2e64b]:nth-child(odd), .listCardDesktopWrapper[data-v-e9d2e64b]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-e9d2e64b]:nth-child(even), .listCardDesktopWrapper[data-v-e9d2e64b]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-e9d2e64b] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-e9d2e64b] { cursor: pointer; } .card-layout--selectionnable[data-v-e9d2e64b]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-e9d2e64b] { cursor: auto; } .card-layout--drawer[data-v-e9d2e64b] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-e9d2e64b] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-e9d2e64b] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-e9d2e64b] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-e9d2e64b] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-e9d2e64b] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-e9d2e64b]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-e9d2e64b] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-e9d2e64b] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-e9d2e64b] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-e9d2e64b] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-e9d2e64b] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-e9d2e64b] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-e9d2e64b] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-e9d2e64b] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-e9d2e64b] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-e9d2e64b] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-e9d2e64b] { background-color: #eb1515; } .color-chip--dossiers[data-v-e9d2e64b] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-e9d2e64b] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-e9d2e64b] { background-color: #00a79b; } .color-chip--virements[data-v-e9d2e64b] { background-color: var(--secondary-400); } .color-chip--factures[data-v-e9d2e64b] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-e9d2e64b] { background-color: #eb1515; } .color-recherche-dossiers[data-v-e9d2e64b] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-e9d2e64b] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-e9d2e64b] { background-color: #00a79b; } .color-recherche-virements[data-v-e9d2e64b] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-e9d2e64b] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-e9d2e64b] { color: #00a79b; cursor: pointer; } .scrollable[data-v-e9d2e64b] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-e9d2e64b] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-e9d2e64b] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-e9d2e64b] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-e9d2e64b] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-e9d2e64b] { font-weight: 800; } .grid-cell--column[data-v-e9d2e64b] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-e9d2e64b] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-e9d2e64b] { fill: #00a79b; } .grid-cell--disabled[data-v-e9d2e64b] { color: #cccccc; } .grid-cell--disabled svg[data-v-e9d2e64b] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-e9d2e64b] { white-space: nowrap; } .grid-cell--danger svg[data-v-e9d2e64b] { fill: #eb1515; } .grid-cell--span-1[data-v-e9d2e64b] { grid-column: span 1; } .grid-cell--span-2[data-v-e9d2e64b] { grid-column: span 2; } .grid-cell--span-3[data-v-e9d2e64b] { grid-column: span 3; } .grid-cell--span-4[data-v-e9d2e64b] { grid-column: span 4; } .grid-cell--span-5[data-v-e9d2e64b] { grid-column: span 5; } .grid-cell--span-6[data-v-e9d2e64b] { grid-column: span 6; } .grid-cell--span-7[data-v-e9d2e64b] { grid-column: span 7; } .grid-cell--span-8[data-v-e9d2e64b] { grid-column: span 8; } .grid-cell--span-9[data-v-e9d2e64b] { grid-column: span 9; } .grid-cell--span-10[data-v-e9d2e64b] { grid-column: span 10; } .grid-cell--span-12[data-v-e9d2e64b] { grid-column: span 12; } .grid-cell--span-13[data-v-e9d2e64b] { grid-column: span 13; } .grid-cell--span-14[data-v-e9d2e64b] { grid-column: span 14; } .grid-cell--span-16[data-v-e9d2e64b] { grid-column: span 16; } .grid-cell--span-18[data-v-e9d2e64b] { grid-column: span 18; } .grid-cell--span-20[data-v-e9d2e64b] { grid-column: span 20; } .grid-cell--span-32[data-v-e9d2e64b] { grid-column: span 32; } .grid-cell--span-36[data-v-e9d2e64b] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-e9d2e64b] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-e9d2e64b] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-e9d2e64b] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-e9d2e64b] { justify-content: center !important; } .elem--bold span[data-v-e9d2e64b] { font-weight: 800; } .elem--column[data-v-e9d2e64b] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-e9d2e64b] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-e9d2e64b] { fill: #00a79b; } .elem--clickable[data-v-e9d2e64b]:hover { cursor: pointer; } .elem--disabled[data-v-e9d2e64b] { color: #cccccc; } .elem--disabled svg[data-v-e9d2e64b] { fill: #cccccc; } .elem--nowrap span[data-v-e9d2e64b] { white-space: nowrap; } .elem--danger svg[data-v-e9d2e64b] { fill: #eb1515; } .elem--span-1[data-v-e9d2e64b] { grid-column: span 1; } .elem--span-2[data-v-e9d2e64b] { grid-column: span 2; } .elem--span-3[data-v-e9d2e64b] { grid-column: span 3; } .elem--span-4[data-v-e9d2e64b] { grid-column: span 4; } .elem--span-5[data-v-e9d2e64b] { grid-column: span 5; } .elem--span-6[data-v-e9d2e64b] { grid-column: span 6; } .elem--span-7[data-v-e9d2e64b] { grid-column: span 7; } .elem--span-8[data-v-e9d2e64b] { grid-column: span 8; } .elem--span-9[data-v-e9d2e64b] { grid-column: span 9; } .elem--span-10[data-v-e9d2e64b] { grid-column: span 10; } .elem--span-12[data-v-e9d2e64b] { grid-column: span 12; } .elem--span-13[data-v-e9d2e64b] { grid-column: span 13; } .elem--span-14[data-v-e9d2e64b] { grid-column: span 14; } .elem--span-16[data-v-e9d2e64b] { grid-column: span 16; } .elem--span-18[data-v-e9d2e64b] { grid-column: span 18; } .elem--span-20[data-v-e9d2e64b] { grid-column: span 20; } .elem--span-32[data-v-e9d2e64b] { grid-column: span 32; } .elem--span-36[data-v-e9d2e64b] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-e9d2e64b] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-e9d2e64b] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-e9d2e64b]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-e9d2e64b] { display: flex; } /* flex-direction */ .flex-column[data-v-e9d2e64b] { flex-direction: column; } .flex-row[data-v-e9d2e64b] { flex-direction: row; } /* flex */ .flex-1[data-v-e9d2e64b] { flex: 1 !important; } .flex-2[data-v-e9d2e64b] { flex: 2; } .flex-3[data-v-e9d2e64b] { flex: 3; } .flex-3[data-v-e9d2e64b] { flex: 4; } .flex-5[data-v-e9d2e64b] { flex: 5; } .flex-auto[data-v-e9d2e64b] { flex: auto; } .flex-none[data-v-e9d2e64b] { flex: none; } .flex-content[data-v-e9d2e64b] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-e9d2e64b] { flex-wrap: wrap; } .flex-nowrap[data-v-e9d2e64b] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-e9d2e64b] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-e9d2e64b] { justify-content: flex-start; } .justify-content-end[data-v-e9d2e64b] { justify-content: flex-end; } .justify-content-baseline[data-v-e9d2e64b] { justify-content: baseline; } .justify-content-center[data-v-e9d2e64b] { justify-content: center; } .justify-content-space-between[data-v-e9d2e64b] { justify-content: space-between; } .justify-content-space-around[data-v-e9d2e64b] { justify-content: space-around; } .justify-content-space-evenly[data-v-e9d2e64b] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-e9d2e64b] { align-items: flex-start; } .align-items-flex-end[data-v-e9d2e64b] { align-items: flex-end; } .align-items-stretch[data-v-e9d2e64b] { align-items: stretch; } .align-items-baseline[data-v-e9d2e64b] { align-items: baseline; } .align-items-center[data-v-e9d2e64b] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-e9d2e64b] { align-content: flex-start; } .align-content-flex-end[data-v-e9d2e64b] { align-content: flex-end; } .align-content-center[data-v-e9d2e64b] { align-content: center; } .align-content-stretch[data-v-e9d2e64b] { align-content: stretch; } .align-content-space-between[data-v-e9d2e64b] { align-content: space-between; } .align-content-space-around[data-v-e9d2e64b] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-e9d2e64b] { align-self: flex-start; } .align-self-flex-end[data-v-e9d2e64b] { align-self: flex-end; } .align-self-stretch[data-v-e9d2e64b] { align-self: stretch; } .align-self-flex-baseline[data-v-e9d2e64b] { align-self: baseline; } .align-self-center[data-v-e9d2e64b] { align-self: center; } .align-self-auto[data-v-e9d2e64b] { align-self: auto; } .flex-gap-1[data-v-e9d2e64b] { gap: 4px; } .flex-gap-2[data-v-e9d2e64b] { gap: 8px; } .flex-gap-3[data-v-e9d2e64b] { gap: 12px; } .flex-gap-4[data-v-e9d2e64b] { gap: 16px; } .flex-gap-5[data-v-e9d2e64b] { gap: 20px; } .flex-gap-6[data-v-e9d2e64b] { gap: 24px; } .flex-gap-7[data-v-e9d2e64b] { gap: 28px; } .flex-gap-8[data-v-e9d2e64b] { gap: 32px; } .flex-gap-10[data-v-e9d2e64b] { gap: 40px; } .flex-gap-12[data-v-e9d2e64b] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-e9d2e64b] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-e9d2e64b] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-e9d2e64b] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-e9d2e64b] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-e9d2e64b] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-e9d2e64b] { display: none !important; } } .col-none[data-v-e9d2e64b] { display: none; } .col-auto[data-v-e9d2e64b] { grid-column: auto; } .col-1[data-v-e9d2e64b] { grid-column: span 1; } .col-2[data-v-e9d2e64b] { grid-column: span 2; } .col-3[data-v-e9d2e64b] { grid-column: span 3; } .col-4[data-v-e9d2e64b] { grid-column: span 4; } .col-5[data-v-e9d2e64b] { grid-column: span 5; } .col-6[data-v-e9d2e64b] { grid-column: span 6; } .col-7[data-v-e9d2e64b] { grid-column: span 7; } .col-8[data-v-e9d2e64b] { grid-column: span 8; } .col-9[data-v-e9d2e64b] { grid-column: span 9; } .col-10[data-v-e9d2e64b] { grid-column: span 10; } .col-12[data-v-e9d2e64b] { grid-column: span 12; } .col-13[data-v-e9d2e64b] { grid-column: span 13; } .col-14[data-v-e9d2e64b] { grid-column: span 14; } .col-15[data-v-e9d2e64b] { grid-column: span 15; } .col-16[data-v-e9d2e64b] { grid-column: span 16; } .col-18[data-v-e9d2e64b] { grid-column: span 18; } .col-20[data-v-e9d2e64b] { grid-column: span 20; } .col-22[data-v-e9d2e64b] { grid-column: span 22; } .col-24[data-v-e9d2e64b] { grid-column: span 24; } .col-26[data-v-e9d2e64b] { grid-column: span 26; } .col-27[data-v-e9d2e64b] { grid-column: span 27; } .col-28[data-v-e9d2e64b] { grid-column: span 28; } .col-30[data-v-e9d2e64b] { grid-column: span 30; } .col-36[data-v-e9d2e64b] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-e9d2e64b] { display: none; } .col-md-36[data-v-e9d2e64b] { grid-column: span 36; } .col-md-28[data-v-e9d2e64b] { grid-column: span 28; } .col-md-27[data-v-e9d2e64b] { grid-column: span 27; } .col-md-24[data-v-e9d2e64b] { grid-column: span 24; } .col-md-22[data-v-e9d2e64b] { grid-column: span 22; } .col-md-20[data-v-e9d2e64b] { grid-column: span 20; } .col-md-19[data-v-e9d2e64b] { grid-column: span 19; } .col-md-18[data-v-e9d2e64b] { grid-column: span 18; } .col-md-17[data-v-e9d2e64b] { grid-column: span 17; } .col-md-16[data-v-e9d2e64b] { grid-column: span 16; } .col-md-15[data-v-e9d2e64b] { grid-column: span 15; } .col-md-14[data-v-e9d2e64b] { grid-column: span 14; } .col-md-13[data-v-e9d2e64b] { grid-column: span 13; } .col-md-12[data-v-e9d2e64b] { grid-column: span 12; } .col-md-10[data-v-e9d2e64b] { grid-column: span 10; } .col-md-9[data-v-e9d2e64b] { grid-column: span 9; } .col-md-8[data-v-e9d2e64b] { grid-column: span 8; } .col-md-6[data-v-e9d2e64b] { grid-column: span 6; } .col-md-5[data-v-e9d2e64b] { grid-column: span 5; } .col-md-4[data-v-e9d2e64b] { grid-column: span 4; } .col-md-3[data-v-e9d2e64b] { grid-column: span 3; } .col-md-2[data-v-e9d2e64b] { grid-column: span 2; } .col-md-1[data-v-e9d2e64b] { grid-column: span 1; } .col-md-auto[data-v-e9d2e64b] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-e9d2e64b] { display: none; } .col-sm-36[data-v-e9d2e64b] { grid-column: span 36; } .col-sm-32[data-v-e9d2e64b] { grid-column: span 32; } .col-sm-28[data-v-e9d2e64b] { grid-column: span 28; } .col-sm-27[data-v-e9d2e64b] { grid-column: span 27; } .col-sm-24[data-v-e9d2e64b] { grid-column: span 24; } .col-sm-22[data-v-e9d2e64b] { grid-column: span 22; } .col-sm-20[data-v-e9d2e64b] { grid-column: span 20; } .col-sm-18[data-v-e9d2e64b] { grid-column: span 18; } .col-sm-16[data-v-e9d2e64b] { grid-column: span 16; } .col-sm-15[data-v-e9d2e64b] { grid-column: span 15; } .col-sm-14[data-v-e9d2e64b] { grid-column: span 14; } .col-sm-13[data-v-e9d2e64b] { grid-column: span 12; } .col-sm-12[data-v-e9d2e64b] { grid-column: span 12; } .col-sm-10[data-v-e9d2e64b] { grid-column: span 10; } .col-sm-9[data-v-e9d2e64b] { grid-column: span 8; } .col-sm-8[data-v-e9d2e64b] { grid-column: span 8; } .col-sm-6[data-v-e9d2e64b] { grid-column: span 6; } .col-sm-4[data-v-e9d2e64b] { grid-column: span 4; } .col-sm-auto[data-v-e9d2e64b] { grid-column: auto; } } .fade-enter-active[data-v-e9d2e64b] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-e9d2e64b] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-e9d2e64b], .fade-leave-to[data-v-e9d2e64b] { opacity: 0; } .admin-topics__item[data-v-e9d2e64b] { cursor: pointer; } .admin-topics__item[data-v-e9d2e64b]:hover { background: rgba(var(--primary-500-rgb), 0.08); } .admin-topics__mobile-card[data-v-e9d2e64b] { margin: 4px 0; } .admin-topics__info[data-v-e9d2e64b] { display: flex; align-items: center; gap: 10px; } .admin-topics__thumb[data-v-e9d2e64b] { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-subtle); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-d76bb8d0]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-d76bb8d0] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-d76bb8d0] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-d76bb8d0]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-d76bb8d0], .theme-mode-light[data-v-d76bb8d0] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-d76bb8d0], .theme-mode-dark[data-v-d76bb8d0] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-d76bb8d0]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-d76bb8d0]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-d76bb8d0] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-d76bb8d0] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-d76bb8d0]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-d76bb8d0], input[disabled][data-v-d76bb8d0] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-d76bb8d0] { opacity: 0.9; } input[readonly][data-v-d76bb8d0] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-d76bb8d0] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-d76bb8d0]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-d76bb8d0]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-d76bb8d0]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-d76bb8d0] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-d76bb8d0]:nth-child(odd), .list-card-desktop__wrapper[data-v-d76bb8d0]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-d76bb8d0]:nth-child(even), .list-card-desktop__wrapper[data-v-d76bb8d0]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-d76bb8d0]:nth-child(odd), .listCardDesktopWrapper[data-v-d76bb8d0]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-d76bb8d0]:nth-child(even), .listCardDesktopWrapper[data-v-d76bb8d0]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-d76bb8d0] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-d76bb8d0] { cursor: pointer; } .card-layout--selectionnable[data-v-d76bb8d0]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-d76bb8d0] { cursor: auto; } .card-layout--drawer[data-v-d76bb8d0] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-d76bb8d0] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-d76bb8d0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-d76bb8d0] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-d76bb8d0] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-d76bb8d0] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-d76bb8d0]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-d76bb8d0] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-d76bb8d0] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-d76bb8d0] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-d76bb8d0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-d76bb8d0] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-d76bb8d0] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-d76bb8d0] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-d76bb8d0] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-d76bb8d0] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-d76bb8d0] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-d76bb8d0] { background-color: #eb1515; } .color-chip--dossiers[data-v-d76bb8d0] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-d76bb8d0] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-d76bb8d0] { background-color: #00a79b; } .color-chip--virements[data-v-d76bb8d0] { background-color: var(--secondary-400); } .color-chip--factures[data-v-d76bb8d0] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-d76bb8d0] { background-color: #eb1515; } .color-recherche-dossiers[data-v-d76bb8d0] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-d76bb8d0] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-d76bb8d0] { background-color: #00a79b; } .color-recherche-virements[data-v-d76bb8d0] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-d76bb8d0] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-d76bb8d0] { color: #00a79b; cursor: pointer; } .scrollable[data-v-d76bb8d0] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-d76bb8d0] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-d76bb8d0] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-d76bb8d0] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-d76bb8d0] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-d76bb8d0] { font-weight: 800; } .grid-cell--column[data-v-d76bb8d0] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-d76bb8d0] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-d76bb8d0] { fill: #00a79b; } .grid-cell--disabled[data-v-d76bb8d0] { color: #cccccc; } .grid-cell--disabled svg[data-v-d76bb8d0] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-d76bb8d0] { white-space: nowrap; } .grid-cell--danger svg[data-v-d76bb8d0] { fill: #eb1515; } .grid-cell--span-1[data-v-d76bb8d0] { grid-column: span 1; } .grid-cell--span-2[data-v-d76bb8d0] { grid-column: span 2; } .grid-cell--span-3[data-v-d76bb8d0] { grid-column: span 3; } .grid-cell--span-4[data-v-d76bb8d0] { grid-column: span 4; } .grid-cell--span-5[data-v-d76bb8d0] { grid-column: span 5; } .grid-cell--span-6[data-v-d76bb8d0] { grid-column: span 6; } .grid-cell--span-7[data-v-d76bb8d0] { grid-column: span 7; } .grid-cell--span-8[data-v-d76bb8d0] { grid-column: span 8; } .grid-cell--span-9[data-v-d76bb8d0] { grid-column: span 9; } .grid-cell--span-10[data-v-d76bb8d0] { grid-column: span 10; } .grid-cell--span-12[data-v-d76bb8d0] { grid-column: span 12; } .grid-cell--span-13[data-v-d76bb8d0] { grid-column: span 13; } .grid-cell--span-14[data-v-d76bb8d0] { grid-column: span 14; } .grid-cell--span-16[data-v-d76bb8d0] { grid-column: span 16; } .grid-cell--span-18[data-v-d76bb8d0] { grid-column: span 18; } .grid-cell--span-20[data-v-d76bb8d0] { grid-column: span 20; } .grid-cell--span-32[data-v-d76bb8d0] { grid-column: span 32; } .grid-cell--span-36[data-v-d76bb8d0] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-d76bb8d0] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-d76bb8d0] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-d76bb8d0] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-d76bb8d0] { justify-content: center !important; } .elem--bold span[data-v-d76bb8d0] { font-weight: 800; } .elem--column[data-v-d76bb8d0] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-d76bb8d0] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-d76bb8d0] { fill: #00a79b; } .elem--clickable[data-v-d76bb8d0]:hover { cursor: pointer; } .elem--disabled[data-v-d76bb8d0] { color: #cccccc; } .elem--disabled svg[data-v-d76bb8d0] { fill: #cccccc; } .elem--nowrap span[data-v-d76bb8d0] { white-space: nowrap; } .elem--danger svg[data-v-d76bb8d0] { fill: #eb1515; } .elem--span-1[data-v-d76bb8d0] { grid-column: span 1; } .elem--span-2[data-v-d76bb8d0] { grid-column: span 2; } .elem--span-3[data-v-d76bb8d0] { grid-column: span 3; } .elem--span-4[data-v-d76bb8d0] { grid-column: span 4; } .elem--span-5[data-v-d76bb8d0] { grid-column: span 5; } .elem--span-6[data-v-d76bb8d0] { grid-column: span 6; } .elem--span-7[data-v-d76bb8d0] { grid-column: span 7; } .elem--span-8[data-v-d76bb8d0] { grid-column: span 8; } .elem--span-9[data-v-d76bb8d0] { grid-column: span 9; } .elem--span-10[data-v-d76bb8d0] { grid-column: span 10; } .elem--span-12[data-v-d76bb8d0] { grid-column: span 12; } .elem--span-13[data-v-d76bb8d0] { grid-column: span 13; } .elem--span-14[data-v-d76bb8d0] { grid-column: span 14; } .elem--span-16[data-v-d76bb8d0] { grid-column: span 16; } .elem--span-18[data-v-d76bb8d0] { grid-column: span 18; } .elem--span-20[data-v-d76bb8d0] { grid-column: span 20; } .elem--span-32[data-v-d76bb8d0] { grid-column: span 32; } .elem--span-36[data-v-d76bb8d0] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-d76bb8d0] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-d76bb8d0] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-d76bb8d0]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-d76bb8d0] { display: flex; } /* flex-direction */ .flex-column[data-v-d76bb8d0] { flex-direction: column; } .flex-row[data-v-d76bb8d0] { flex-direction: row; } /* flex */ .flex-1[data-v-d76bb8d0] { flex: 1 !important; } .flex-2[data-v-d76bb8d0] { flex: 2; } .flex-3[data-v-d76bb8d0] { flex: 3; } .flex-3[data-v-d76bb8d0] { flex: 4; } .flex-5[data-v-d76bb8d0] { flex: 5; } .flex-auto[data-v-d76bb8d0] { flex: auto; } .flex-none[data-v-d76bb8d0] { flex: none; } .flex-content[data-v-d76bb8d0] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-d76bb8d0] { flex-wrap: wrap; } .flex-nowrap[data-v-d76bb8d0] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-d76bb8d0] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-d76bb8d0] { justify-content: flex-start; } .justify-content-end[data-v-d76bb8d0] { justify-content: flex-end; } .justify-content-baseline[data-v-d76bb8d0] { justify-content: baseline; } .justify-content-center[data-v-d76bb8d0] { justify-content: center; } .justify-content-space-between[data-v-d76bb8d0] { justify-content: space-between; } .justify-content-space-around[data-v-d76bb8d0] { justify-content: space-around; } .justify-content-space-evenly[data-v-d76bb8d0] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-d76bb8d0] { align-items: flex-start; } .align-items-flex-end[data-v-d76bb8d0] { align-items: flex-end; } .align-items-stretch[data-v-d76bb8d0] { align-items: stretch; } .align-items-baseline[data-v-d76bb8d0] { align-items: baseline; } .align-items-center[data-v-d76bb8d0] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-d76bb8d0] { align-content: flex-start; } .align-content-flex-end[data-v-d76bb8d0] { align-content: flex-end; } .align-content-center[data-v-d76bb8d0] { align-content: center; } .align-content-stretch[data-v-d76bb8d0] { align-content: stretch; } .align-content-space-between[data-v-d76bb8d0] { align-content: space-between; } .align-content-space-around[data-v-d76bb8d0] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-d76bb8d0] { align-self: flex-start; } .align-self-flex-end[data-v-d76bb8d0] { align-self: flex-end; } .align-self-stretch[data-v-d76bb8d0] { align-self: stretch; } .align-self-flex-baseline[data-v-d76bb8d0] { align-self: baseline; } .align-self-center[data-v-d76bb8d0] { align-self: center; } .align-self-auto[data-v-d76bb8d0] { align-self: auto; } .flex-gap-1[data-v-d76bb8d0] { gap: 4px; } .flex-gap-2[data-v-d76bb8d0] { gap: 8px; } .flex-gap-3[data-v-d76bb8d0] { gap: 12px; } .flex-gap-4[data-v-d76bb8d0] { gap: 16px; } .flex-gap-5[data-v-d76bb8d0] { gap: 20px; } .flex-gap-6[data-v-d76bb8d0] { gap: 24px; } .flex-gap-7[data-v-d76bb8d0] { gap: 28px; } .flex-gap-8[data-v-d76bb8d0] { gap: 32px; } .flex-gap-10[data-v-d76bb8d0] { gap: 40px; } .flex-gap-12[data-v-d76bb8d0] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-d76bb8d0] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-d76bb8d0] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-d76bb8d0] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-d76bb8d0] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-d76bb8d0] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-d76bb8d0] { display: none !important; } } .col-none[data-v-d76bb8d0] { display: none; } .col-auto[data-v-d76bb8d0] { grid-column: auto; } .col-1[data-v-d76bb8d0] { grid-column: span 1; } .col-2[data-v-d76bb8d0] { grid-column: span 2; } .col-3[data-v-d76bb8d0] { grid-column: span 3; } .col-4[data-v-d76bb8d0] { grid-column: span 4; } .col-5[data-v-d76bb8d0] { grid-column: span 5; } .col-6[data-v-d76bb8d0] { grid-column: span 6; } .col-7[data-v-d76bb8d0] { grid-column: span 7; } .col-8[data-v-d76bb8d0] { grid-column: span 8; } .col-9[data-v-d76bb8d0] { grid-column: span 9; } .col-10[data-v-d76bb8d0] { grid-column: span 10; } .col-12[data-v-d76bb8d0] { grid-column: span 12; } .col-13[data-v-d76bb8d0] { grid-column: span 13; } .col-14[data-v-d76bb8d0] { grid-column: span 14; } .col-15[data-v-d76bb8d0] { grid-column: span 15; } .col-16[data-v-d76bb8d0] { grid-column: span 16; } .col-18[data-v-d76bb8d0] { grid-column: span 18; } .col-20[data-v-d76bb8d0] { grid-column: span 20; } .col-22[data-v-d76bb8d0] { grid-column: span 22; } .col-24[data-v-d76bb8d0] { grid-column: span 24; } .col-26[data-v-d76bb8d0] { grid-column: span 26; } .col-27[data-v-d76bb8d0] { grid-column: span 27; } .col-28[data-v-d76bb8d0] { grid-column: span 28; } .col-30[data-v-d76bb8d0] { grid-column: span 30; } .col-36[data-v-d76bb8d0] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-d76bb8d0] { display: none; } .col-md-36[data-v-d76bb8d0] { grid-column: span 36; } .col-md-28[data-v-d76bb8d0] { grid-column: span 28; } .col-md-27[data-v-d76bb8d0] { grid-column: span 27; } .col-md-24[data-v-d76bb8d0] { grid-column: span 24; } .col-md-22[data-v-d76bb8d0] { grid-column: span 22; } .col-md-20[data-v-d76bb8d0] { grid-column: span 20; } .col-md-19[data-v-d76bb8d0] { grid-column: span 19; } .col-md-18[data-v-d76bb8d0] { grid-column: span 18; } .col-md-17[data-v-d76bb8d0] { grid-column: span 17; } .col-md-16[data-v-d76bb8d0] { grid-column: span 16; } .col-md-15[data-v-d76bb8d0] { grid-column: span 15; } .col-md-14[data-v-d76bb8d0] { grid-column: span 14; } .col-md-13[data-v-d76bb8d0] { grid-column: span 13; } .col-md-12[data-v-d76bb8d0] { grid-column: span 12; } .col-md-10[data-v-d76bb8d0] { grid-column: span 10; } .col-md-9[data-v-d76bb8d0] { grid-column: span 9; } .col-md-8[data-v-d76bb8d0] { grid-column: span 8; } .col-md-6[data-v-d76bb8d0] { grid-column: span 6; } .col-md-5[data-v-d76bb8d0] { grid-column: span 5; } .col-md-4[data-v-d76bb8d0] { grid-column: span 4; } .col-md-3[data-v-d76bb8d0] { grid-column: span 3; } .col-md-2[data-v-d76bb8d0] { grid-column: span 2; } .col-md-1[data-v-d76bb8d0] { grid-column: span 1; } .col-md-auto[data-v-d76bb8d0] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-d76bb8d0] { display: none; } .col-sm-36[data-v-d76bb8d0] { grid-column: span 36; } .col-sm-32[data-v-d76bb8d0] { grid-column: span 32; } .col-sm-28[data-v-d76bb8d0] { grid-column: span 28; } .col-sm-27[data-v-d76bb8d0] { grid-column: span 27; } .col-sm-24[data-v-d76bb8d0] { grid-column: span 24; } .col-sm-22[data-v-d76bb8d0] { grid-column: span 22; } .col-sm-20[data-v-d76bb8d0] { grid-column: span 20; } .col-sm-18[data-v-d76bb8d0] { grid-column: span 18; } .col-sm-16[data-v-d76bb8d0] { grid-column: span 16; } .col-sm-15[data-v-d76bb8d0] { grid-column: span 15; } .col-sm-14[data-v-d76bb8d0] { grid-column: span 14; } .col-sm-13[data-v-d76bb8d0] { grid-column: span 12; } .col-sm-12[data-v-d76bb8d0] { grid-column: span 12; } .col-sm-10[data-v-d76bb8d0] { grid-column: span 10; } .col-sm-9[data-v-d76bb8d0] { grid-column: span 8; } .col-sm-8[data-v-d76bb8d0] { grid-column: span 8; } .col-sm-6[data-v-d76bb8d0] { grid-column: span 6; } .col-sm-4[data-v-d76bb8d0] { grid-column: span 4; } .col-sm-auto[data-v-d76bb8d0] { grid-column: auto; } } .fade-enter-active[data-v-d76bb8d0] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-d76bb8d0] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-d76bb8d0], .fade-leave-to[data-v-d76bb8d0] { opacity: 0; } .mobile-card[data-v-d76bb8d0] { padding: 16px; border-radius: 12px; background: var(--bg-subtle); display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-default); transition: background 0.2s ease, transform 0.2s ease; cursor: pointer; } .mobile-card[data-v-d76bb8d0]:hover { background: rgba(var(--primary-500-rgb), 0.08); border-color: var(--primary-300); } .mobile-card[data-v-d76bb8d0]:active { background: var(--bg-subtle); } .row[data-v-d76bb8d0] { display: flex; justify-content: space-between; align-items: center; } .user-info[data-v-d76bb8d0] { display: flex; flex-direction: column; gap: 2px; } .user-name-row[data-v-d76bb8d0] { display: flex; align-items: center; gap: 6px; } .actions[data-v-d76bb8d0] { display: flex; align-items: center; gap: 12px; } .separator[data-v-d76bb8d0] { width: 1px; height: 16px; background: var(--border-default); } .action-btn[data-v-d76bb8d0] { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s ease; margin: -12px -8px -12px 0; } .action-btn[data-v-d76bb8d0]:active { background: rgba(239, 68, 68, 0.1); } .action-btn svg[data-v-d76bb8d0] { opacity: 0.7; transition: opacity 0.2s ease; } .action-btn:hover svg[data-v-d76bb8d0] { opacity: 1; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-7b6d37a4]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-7b6d37a4] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-7b6d37a4] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-7b6d37a4]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-7b6d37a4], .theme-mode-light[data-v-7b6d37a4] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-7b6d37a4], .theme-mode-dark[data-v-7b6d37a4] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-7b6d37a4]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-7b6d37a4]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-7b6d37a4] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-7b6d37a4] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-7b6d37a4]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-7b6d37a4], input[disabled][data-v-7b6d37a4] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-7b6d37a4] { opacity: 0.9; } input[readonly][data-v-7b6d37a4] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-7b6d37a4] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-7b6d37a4]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-7b6d37a4]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-7b6d37a4]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-7b6d37a4] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-7b6d37a4]:nth-child(odd), .list-card-desktop__wrapper[data-v-7b6d37a4]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-7b6d37a4]:nth-child(even), .list-card-desktop__wrapper[data-v-7b6d37a4]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-7b6d37a4]:nth-child(odd), .listCardDesktopWrapper[data-v-7b6d37a4]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-7b6d37a4]:nth-child(even), .listCardDesktopWrapper[data-v-7b6d37a4]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-7b6d37a4] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-7b6d37a4] { cursor: pointer; } .card-layout--selectionnable[data-v-7b6d37a4]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-7b6d37a4] { cursor: auto; } .card-layout--drawer[data-v-7b6d37a4] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-7b6d37a4] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-7b6d37a4] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-7b6d37a4] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-7b6d37a4] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-7b6d37a4] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-7b6d37a4]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-7b6d37a4] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-7b6d37a4] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-7b6d37a4] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-7b6d37a4] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-7b6d37a4] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-7b6d37a4] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-7b6d37a4] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-7b6d37a4] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-7b6d37a4] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-7b6d37a4] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-7b6d37a4] { background-color: #eb1515; } .color-chip--dossiers[data-v-7b6d37a4] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-7b6d37a4] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-7b6d37a4] { background-color: #00a79b; } .color-chip--virements[data-v-7b6d37a4] { background-color: var(--secondary-400); } .color-chip--factures[data-v-7b6d37a4] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-7b6d37a4] { background-color: #eb1515; } .color-recherche-dossiers[data-v-7b6d37a4] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-7b6d37a4] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-7b6d37a4] { background-color: #00a79b; } .color-recherche-virements[data-v-7b6d37a4] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-7b6d37a4] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-7b6d37a4] { color: #00a79b; cursor: pointer; } .scrollable[data-v-7b6d37a4] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-7b6d37a4] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-7b6d37a4] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-7b6d37a4] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-7b6d37a4] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-7b6d37a4] { font-weight: 800; } .grid-cell--column[data-v-7b6d37a4] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-7b6d37a4] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-7b6d37a4] { fill: #00a79b; } .grid-cell--disabled[data-v-7b6d37a4] { color: #cccccc; } .grid-cell--disabled svg[data-v-7b6d37a4] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-7b6d37a4] { white-space: nowrap; } .grid-cell--danger svg[data-v-7b6d37a4] { fill: #eb1515; } .grid-cell--span-1[data-v-7b6d37a4] { grid-column: span 1; } .grid-cell--span-2[data-v-7b6d37a4] { grid-column: span 2; } .grid-cell--span-3[data-v-7b6d37a4] { grid-column: span 3; } .grid-cell--span-4[data-v-7b6d37a4] { grid-column: span 4; } .grid-cell--span-5[data-v-7b6d37a4] { grid-column: span 5; } .grid-cell--span-6[data-v-7b6d37a4] { grid-column: span 6; } .grid-cell--span-7[data-v-7b6d37a4] { grid-column: span 7; } .grid-cell--span-8[data-v-7b6d37a4] { grid-column: span 8; } .grid-cell--span-9[data-v-7b6d37a4] { grid-column: span 9; } .grid-cell--span-10[data-v-7b6d37a4] { grid-column: span 10; } .grid-cell--span-12[data-v-7b6d37a4] { grid-column: span 12; } .grid-cell--span-13[data-v-7b6d37a4] { grid-column: span 13; } .grid-cell--span-14[data-v-7b6d37a4] { grid-column: span 14; } .grid-cell--span-16[data-v-7b6d37a4] { grid-column: span 16; } .grid-cell--span-18[data-v-7b6d37a4] { grid-column: span 18; } .grid-cell--span-20[data-v-7b6d37a4] { grid-column: span 20; } .grid-cell--span-32[data-v-7b6d37a4] { grid-column: span 32; } .grid-cell--span-36[data-v-7b6d37a4] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-7b6d37a4] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-7b6d37a4] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-7b6d37a4] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-7b6d37a4] { justify-content: center !important; } .elem--bold span[data-v-7b6d37a4] { font-weight: 800; } .elem--column[data-v-7b6d37a4] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-7b6d37a4] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-7b6d37a4] { fill: #00a79b; } .elem--clickable[data-v-7b6d37a4]:hover { cursor: pointer; } .elem--disabled[data-v-7b6d37a4] { color: #cccccc; } .elem--disabled svg[data-v-7b6d37a4] { fill: #cccccc; } .elem--nowrap span[data-v-7b6d37a4] { white-space: nowrap; } .elem--danger svg[data-v-7b6d37a4] { fill: #eb1515; } .elem--span-1[data-v-7b6d37a4] { grid-column: span 1; } .elem--span-2[data-v-7b6d37a4] { grid-column: span 2; } .elem--span-3[data-v-7b6d37a4] { grid-column: span 3; } .elem--span-4[data-v-7b6d37a4] { grid-column: span 4; } .elem--span-5[data-v-7b6d37a4] { grid-column: span 5; } .elem--span-6[data-v-7b6d37a4] { grid-column: span 6; } .elem--span-7[data-v-7b6d37a4] { grid-column: span 7; } .elem--span-8[data-v-7b6d37a4] { grid-column: span 8; } .elem--span-9[data-v-7b6d37a4] { grid-column: span 9; } .elem--span-10[data-v-7b6d37a4] { grid-column: span 10; } .elem--span-12[data-v-7b6d37a4] { grid-column: span 12; } .elem--span-13[data-v-7b6d37a4] { grid-column: span 13; } .elem--span-14[data-v-7b6d37a4] { grid-column: span 14; } .elem--span-16[data-v-7b6d37a4] { grid-column: span 16; } .elem--span-18[data-v-7b6d37a4] { grid-column: span 18; } .elem--span-20[data-v-7b6d37a4] { grid-column: span 20; } .elem--span-32[data-v-7b6d37a4] { grid-column: span 32; } .elem--span-36[data-v-7b6d37a4] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-7b6d37a4] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-7b6d37a4] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-7b6d37a4]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-7b6d37a4] { display: flex; } /* flex-direction */ .flex-column[data-v-7b6d37a4] { flex-direction: column; } .flex-row[data-v-7b6d37a4] { flex-direction: row; } /* flex */ .flex-1[data-v-7b6d37a4] { flex: 1 !important; } .flex-2[data-v-7b6d37a4] { flex: 2; } .flex-3[data-v-7b6d37a4] { flex: 3; } .flex-3[data-v-7b6d37a4] { flex: 4; } .flex-5[data-v-7b6d37a4] { flex: 5; } .flex-auto[data-v-7b6d37a4] { flex: auto; } .flex-none[data-v-7b6d37a4] { flex: none; } .flex-content[data-v-7b6d37a4] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-7b6d37a4] { flex-wrap: wrap; } .flex-nowrap[data-v-7b6d37a4] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-7b6d37a4] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-7b6d37a4] { justify-content: flex-start; } .justify-content-end[data-v-7b6d37a4] { justify-content: flex-end; } .justify-content-baseline[data-v-7b6d37a4] { justify-content: baseline; } .justify-content-center[data-v-7b6d37a4] { justify-content: center; } .justify-content-space-between[data-v-7b6d37a4] { justify-content: space-between; } .justify-content-space-around[data-v-7b6d37a4] { justify-content: space-around; } .justify-content-space-evenly[data-v-7b6d37a4] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-7b6d37a4] { align-items: flex-start; } .align-items-flex-end[data-v-7b6d37a4] { align-items: flex-end; } .align-items-stretch[data-v-7b6d37a4] { align-items: stretch; } .align-items-baseline[data-v-7b6d37a4] { align-items: baseline; } .align-items-center[data-v-7b6d37a4] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-7b6d37a4] { align-content: flex-start; } .align-content-flex-end[data-v-7b6d37a4] { align-content: flex-end; } .align-content-center[data-v-7b6d37a4] { align-content: center; } .align-content-stretch[data-v-7b6d37a4] { align-content: stretch; } .align-content-space-between[data-v-7b6d37a4] { align-content: space-between; } .align-content-space-around[data-v-7b6d37a4] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-7b6d37a4] { align-self: flex-start; } .align-self-flex-end[data-v-7b6d37a4] { align-self: flex-end; } .align-self-stretch[data-v-7b6d37a4] { align-self: stretch; } .align-self-flex-baseline[data-v-7b6d37a4] { align-self: baseline; } .align-self-center[data-v-7b6d37a4] { align-self: center; } .align-self-auto[data-v-7b6d37a4] { align-self: auto; } .flex-gap-1[data-v-7b6d37a4] { gap: 4px; } .flex-gap-2[data-v-7b6d37a4] { gap: 8px; } .flex-gap-3[data-v-7b6d37a4] { gap: 12px; } .flex-gap-4[data-v-7b6d37a4] { gap: 16px; } .flex-gap-5[data-v-7b6d37a4] { gap: 20px; } .flex-gap-6[data-v-7b6d37a4] { gap: 24px; } .flex-gap-7[data-v-7b6d37a4] { gap: 28px; } .flex-gap-8[data-v-7b6d37a4] { gap: 32px; } .flex-gap-10[data-v-7b6d37a4] { gap: 40px; } .flex-gap-12[data-v-7b6d37a4] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-7b6d37a4] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-7b6d37a4] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-7b6d37a4] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-7b6d37a4] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-7b6d37a4] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-7b6d37a4] { display: none !important; } } .col-none[data-v-7b6d37a4] { display: none; } .col-auto[data-v-7b6d37a4] { grid-column: auto; } .col-1[data-v-7b6d37a4] { grid-column: span 1; } .col-2[data-v-7b6d37a4] { grid-column: span 2; } .col-3[data-v-7b6d37a4] { grid-column: span 3; } .col-4[data-v-7b6d37a4] { grid-column: span 4; } .col-5[data-v-7b6d37a4] { grid-column: span 5; } .col-6[data-v-7b6d37a4] { grid-column: span 6; } .col-7[data-v-7b6d37a4] { grid-column: span 7; } .col-8[data-v-7b6d37a4] { grid-column: span 8; } .col-9[data-v-7b6d37a4] { grid-column: span 9; } .col-10[data-v-7b6d37a4] { grid-column: span 10; } .col-12[data-v-7b6d37a4] { grid-column: span 12; } .col-13[data-v-7b6d37a4] { grid-column: span 13; } .col-14[data-v-7b6d37a4] { grid-column: span 14; } .col-15[data-v-7b6d37a4] { grid-column: span 15; } .col-16[data-v-7b6d37a4] { grid-column: span 16; } .col-18[data-v-7b6d37a4] { grid-column: span 18; } .col-20[data-v-7b6d37a4] { grid-column: span 20; } .col-22[data-v-7b6d37a4] { grid-column: span 22; } .col-24[data-v-7b6d37a4] { grid-column: span 24; } .col-26[data-v-7b6d37a4] { grid-column: span 26; } .col-27[data-v-7b6d37a4] { grid-column: span 27; } .col-28[data-v-7b6d37a4] { grid-column: span 28; } .col-30[data-v-7b6d37a4] { grid-column: span 30; } .col-36[data-v-7b6d37a4] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-7b6d37a4] { display: none; } .col-md-36[data-v-7b6d37a4] { grid-column: span 36; } .col-md-28[data-v-7b6d37a4] { grid-column: span 28; } .col-md-27[data-v-7b6d37a4] { grid-column: span 27; } .col-md-24[data-v-7b6d37a4] { grid-column: span 24; } .col-md-22[data-v-7b6d37a4] { grid-column: span 22; } .col-md-20[data-v-7b6d37a4] { grid-column: span 20; } .col-md-19[data-v-7b6d37a4] { grid-column: span 19; } .col-md-18[data-v-7b6d37a4] { grid-column: span 18; } .col-md-17[data-v-7b6d37a4] { grid-column: span 17; } .col-md-16[data-v-7b6d37a4] { grid-column: span 16; } .col-md-15[data-v-7b6d37a4] { grid-column: span 15; } .col-md-14[data-v-7b6d37a4] { grid-column: span 14; } .col-md-13[data-v-7b6d37a4] { grid-column: span 13; } .col-md-12[data-v-7b6d37a4] { grid-column: span 12; } .col-md-10[data-v-7b6d37a4] { grid-column: span 10; } .col-md-9[data-v-7b6d37a4] { grid-column: span 9; } .col-md-8[data-v-7b6d37a4] { grid-column: span 8; } .col-md-6[data-v-7b6d37a4] { grid-column: span 6; } .col-md-5[data-v-7b6d37a4] { grid-column: span 5; } .col-md-4[data-v-7b6d37a4] { grid-column: span 4; } .col-md-3[data-v-7b6d37a4] { grid-column: span 3; } .col-md-2[data-v-7b6d37a4] { grid-column: span 2; } .col-md-1[data-v-7b6d37a4] { grid-column: span 1; } .col-md-auto[data-v-7b6d37a4] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-7b6d37a4] { display: none; } .col-sm-36[data-v-7b6d37a4] { grid-column: span 36; } .col-sm-32[data-v-7b6d37a4] { grid-column: span 32; } .col-sm-28[data-v-7b6d37a4] { grid-column: span 28; } .col-sm-27[data-v-7b6d37a4] { grid-column: span 27; } .col-sm-24[data-v-7b6d37a4] { grid-column: span 24; } .col-sm-22[data-v-7b6d37a4] { grid-column: span 22; } .col-sm-20[data-v-7b6d37a4] { grid-column: span 20; } .col-sm-18[data-v-7b6d37a4] { grid-column: span 18; } .col-sm-16[data-v-7b6d37a4] { grid-column: span 16; } .col-sm-15[data-v-7b6d37a4] { grid-column: span 15; } .col-sm-14[data-v-7b6d37a4] { grid-column: span 14; } .col-sm-13[data-v-7b6d37a4] { grid-column: span 12; } .col-sm-12[data-v-7b6d37a4] { grid-column: span 12; } .col-sm-10[data-v-7b6d37a4] { grid-column: span 10; } .col-sm-9[data-v-7b6d37a4] { grid-column: span 8; } .col-sm-8[data-v-7b6d37a4] { grid-column: span 8; } .col-sm-6[data-v-7b6d37a4] { grid-column: span 6; } .col-sm-4[data-v-7b6d37a4] { grid-column: span 4; } .col-sm-auto[data-v-7b6d37a4] { grid-column: auto; } } .fade-enter-active[data-v-7b6d37a4] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-7b6d37a4] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-7b6d37a4], .fade-leave-to[data-v-7b6d37a4] { opacity: 0; } .user-detail[data-v-7b6d37a4] { display: flex; flex-direction: column; gap: 24px; padding: 16px; overflow-x: hidden; } .info-card[data-v-7b6d37a4] { position: relative; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); padding: 24px; border-radius: 16px; border: 1px solid #e2e7ef; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .info-card[data-v-7b6d37a4]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--primary-300)); border-radius: 16px 16px 0 0; opacity: 0; transition: opacity 0.3s; } .info-card[data-v-7b6d37a4]:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06); border-color: var(--primary-300); background: #ffffff; } .info-card[data-v-7b6d37a4]:hover::before { opacity: 1; } .info-card .card-header[data-v-7b6d37a4] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #edf1f5; } .info-card .card-header.border-none[data-v-7b6d37a4] { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; } .info-grid[data-v-7b6d37a4] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .info-grid .info-item[data-v-7b6d37a4] { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #f8f9fb; border-radius: 8px; transition: all 0.2s; } .info-grid .info-item[data-v-7b6d37a4]:hover { background: rgba(var(--primary-500-rgb), 0.03); } .info-grid .info-item .label[data-v-7b6d37a4] { font-size: 11px; color: var(--primary-600); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; } .info-grid .info-item .value[data-v-7b6d37a4] { font-size: 14px; color: #2b303a; font-weight: 500; } .orders-table-wrapper[data-v-7b6d37a4] { border: 2px solid #e2e7ef; border-radius: 12px; overflow: hidden; margin-top: 16px; background: #ffffff; } .orders-table[data-v-7b6d37a4] { width: 100%; border-collapse: collapse; font-size: 13px; } .orders-table th[data-v-7b6d37a4] { background: linear-gradient(135deg, var(--secondary-900) 0%, var(--secondary-800) 100%); text-align: left; padding: 12px 16px; color: #ffffff; font-weight: 700; border-bottom: 1px solid #e2e7ef; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; } .orders-table td[data-v-7b6d37a4] { padding: 14px 16px; border-bottom: 1px solid #edf1f5; color: #3c414c; transition: background 0.2s; } .orders-table td[data-v-7b6d37a4]:last-child { border-bottom: none; } .orders-table tr:hover td[data-v-7b6d37a4] { background: rgba(var(--primary-500-rgb), 0.02); } .empty-orders[data-v-7b6d37a4] { padding: 20px; text-align: center; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.03) 0%, rgba(var(--primary-300-rgb), 0.05) 100%); border-radius: 12px; border: 2px dashed var(--primary-200); color: #647184; margin-top: 16px; } .info-card[data-v-7b6d37a4] { animation: fadeInUp-7b6d37a4 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .info-card[data-v-7b6d37a4]:nth-child(1) { animation-delay: 0.05s; } .info-card[data-v-7b6d37a4]:nth-child(2) { animation-delay: 0.1s; } .info-card[data-v-7b6d37a4]:nth-child(3) { animation-delay: 0.15s; } @keyframes fadeInUp-7b6d37a4 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { .user-detail[data-v-7b6d37a4] { gap: 20px; padding: 4px; } .info-card[data-v-7b6d37a4] { padding: 18px; } .info-grid[data-v-7b6d37a4] { grid-template-columns: 1fr; gap: 12px; } .orders-table[data-v-7b6d37a4] { font-size: 11px; } .orders-table th[data-v-7b6d37a4], .orders-table td[data-v-7b6d37a4] { padding: 10px 12px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-26198ef0]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-26198ef0] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-26198ef0] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-26198ef0]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-26198ef0], .theme-mode-light[data-v-26198ef0] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-26198ef0], .theme-mode-dark[data-v-26198ef0] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-26198ef0]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-26198ef0]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-26198ef0] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-26198ef0] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-26198ef0]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-26198ef0], input[disabled][data-v-26198ef0] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-26198ef0] { opacity: 0.9; } input[readonly][data-v-26198ef0] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-26198ef0] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-26198ef0]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-26198ef0]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-26198ef0]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-26198ef0] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-26198ef0]:nth-child(odd), .list-card-desktop__wrapper[data-v-26198ef0]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-26198ef0]:nth-child(even), .list-card-desktop__wrapper[data-v-26198ef0]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-26198ef0]:nth-child(odd), .listCardDesktopWrapper[data-v-26198ef0]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-26198ef0]:nth-child(even), .listCardDesktopWrapper[data-v-26198ef0]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-26198ef0] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-26198ef0] { cursor: pointer; } .card-layout--selectionnable[data-v-26198ef0]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-26198ef0] { cursor: auto; } .card-layout--drawer[data-v-26198ef0] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-26198ef0] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-26198ef0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-26198ef0] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-26198ef0] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-26198ef0] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-26198ef0]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-26198ef0] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-26198ef0] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-26198ef0] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-26198ef0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-26198ef0] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-26198ef0] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-26198ef0] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-26198ef0] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-26198ef0] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-26198ef0] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-26198ef0] { background-color: #eb1515; } .color-chip--dossiers[data-v-26198ef0] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-26198ef0] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-26198ef0] { background-color: #00a79b; } .color-chip--virements[data-v-26198ef0] { background-color: var(--secondary-400); } .color-chip--factures[data-v-26198ef0] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-26198ef0] { background-color: #eb1515; } .color-recherche-dossiers[data-v-26198ef0] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-26198ef0] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-26198ef0] { background-color: #00a79b; } .color-recherche-virements[data-v-26198ef0] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-26198ef0] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-26198ef0] { color: #00a79b; cursor: pointer; } .scrollable[data-v-26198ef0] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-26198ef0] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-26198ef0] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-26198ef0] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-26198ef0] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-26198ef0] { font-weight: 800; } .grid-cell--column[data-v-26198ef0] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-26198ef0] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-26198ef0] { fill: #00a79b; } .grid-cell--disabled[data-v-26198ef0] { color: #cccccc; } .grid-cell--disabled svg[data-v-26198ef0] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-26198ef0] { white-space: nowrap; } .grid-cell--danger svg[data-v-26198ef0] { fill: #eb1515; } .grid-cell--span-1[data-v-26198ef0] { grid-column: span 1; } .grid-cell--span-2[data-v-26198ef0] { grid-column: span 2; } .grid-cell--span-3[data-v-26198ef0] { grid-column: span 3; } .grid-cell--span-4[data-v-26198ef0] { grid-column: span 4; } .grid-cell--span-5[data-v-26198ef0] { grid-column: span 5; } .grid-cell--span-6[data-v-26198ef0] { grid-column: span 6; } .grid-cell--span-7[data-v-26198ef0] { grid-column: span 7; } .grid-cell--span-8[data-v-26198ef0] { grid-column: span 8; } .grid-cell--span-9[data-v-26198ef0] { grid-column: span 9; } .grid-cell--span-10[data-v-26198ef0] { grid-column: span 10; } .grid-cell--span-12[data-v-26198ef0] { grid-column: span 12; } .grid-cell--span-13[data-v-26198ef0] { grid-column: span 13; } .grid-cell--span-14[data-v-26198ef0] { grid-column: span 14; } .grid-cell--span-16[data-v-26198ef0] { grid-column: span 16; } .grid-cell--span-18[data-v-26198ef0] { grid-column: span 18; } .grid-cell--span-20[data-v-26198ef0] { grid-column: span 20; } .grid-cell--span-32[data-v-26198ef0] { grid-column: span 32; } .grid-cell--span-36[data-v-26198ef0] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-26198ef0] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-26198ef0] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-26198ef0] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-26198ef0] { justify-content: center !important; } .elem--bold span[data-v-26198ef0] { font-weight: 800; } .elem--column[data-v-26198ef0] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-26198ef0] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-26198ef0] { fill: #00a79b; } .elem--clickable[data-v-26198ef0]:hover { cursor: pointer; } .elem--disabled[data-v-26198ef0] { color: #cccccc; } .elem--disabled svg[data-v-26198ef0] { fill: #cccccc; } .elem--nowrap span[data-v-26198ef0] { white-space: nowrap; } .elem--danger svg[data-v-26198ef0] { fill: #eb1515; } .elem--span-1[data-v-26198ef0] { grid-column: span 1; } .elem--span-2[data-v-26198ef0] { grid-column: span 2; } .elem--span-3[data-v-26198ef0] { grid-column: span 3; } .elem--span-4[data-v-26198ef0] { grid-column: span 4; } .elem--span-5[data-v-26198ef0] { grid-column: span 5; } .elem--span-6[data-v-26198ef0] { grid-column: span 6; } .elem--span-7[data-v-26198ef0] { grid-column: span 7; } .elem--span-8[data-v-26198ef0] { grid-column: span 8; } .elem--span-9[data-v-26198ef0] { grid-column: span 9; } .elem--span-10[data-v-26198ef0] { grid-column: span 10; } .elem--span-12[data-v-26198ef0] { grid-column: span 12; } .elem--span-13[data-v-26198ef0] { grid-column: span 13; } .elem--span-14[data-v-26198ef0] { grid-column: span 14; } .elem--span-16[data-v-26198ef0] { grid-column: span 16; } .elem--span-18[data-v-26198ef0] { grid-column: span 18; } .elem--span-20[data-v-26198ef0] { grid-column: span 20; } .elem--span-32[data-v-26198ef0] { grid-column: span 32; } .elem--span-36[data-v-26198ef0] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-26198ef0] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-26198ef0] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-26198ef0]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-26198ef0] { display: flex; } /* flex-direction */ .flex-column[data-v-26198ef0] { flex-direction: column; } .flex-row[data-v-26198ef0] { flex-direction: row; } /* flex */ .flex-1[data-v-26198ef0] { flex: 1 !important; } .flex-2[data-v-26198ef0] { flex: 2; } .flex-3[data-v-26198ef0] { flex: 3; } .flex-3[data-v-26198ef0] { flex: 4; } .flex-5[data-v-26198ef0] { flex: 5; } .flex-auto[data-v-26198ef0] { flex: auto; } .flex-none[data-v-26198ef0] { flex: none; } .flex-content[data-v-26198ef0] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-26198ef0] { flex-wrap: wrap; } .flex-nowrap[data-v-26198ef0] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-26198ef0] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-26198ef0] { justify-content: flex-start; } .justify-content-end[data-v-26198ef0] { justify-content: flex-end; } .justify-content-baseline[data-v-26198ef0] { justify-content: baseline; } .justify-content-center[data-v-26198ef0] { justify-content: center; } .justify-content-space-between[data-v-26198ef0] { justify-content: space-between; } .justify-content-space-around[data-v-26198ef0] { justify-content: space-around; } .justify-content-space-evenly[data-v-26198ef0] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-26198ef0] { align-items: flex-start; } .align-items-flex-end[data-v-26198ef0] { align-items: flex-end; } .align-items-stretch[data-v-26198ef0] { align-items: stretch; } .align-items-baseline[data-v-26198ef0] { align-items: baseline; } .align-items-center[data-v-26198ef0] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-26198ef0] { align-content: flex-start; } .align-content-flex-end[data-v-26198ef0] { align-content: flex-end; } .align-content-center[data-v-26198ef0] { align-content: center; } .align-content-stretch[data-v-26198ef0] { align-content: stretch; } .align-content-space-between[data-v-26198ef0] { align-content: space-between; } .align-content-space-around[data-v-26198ef0] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-26198ef0] { align-self: flex-start; } .align-self-flex-end[data-v-26198ef0] { align-self: flex-end; } .align-self-stretch[data-v-26198ef0] { align-self: stretch; } .align-self-flex-baseline[data-v-26198ef0] { align-self: baseline; } .align-self-center[data-v-26198ef0] { align-self: center; } .align-self-auto[data-v-26198ef0] { align-self: auto; } .flex-gap-1[data-v-26198ef0] { gap: 4px; } .flex-gap-2[data-v-26198ef0] { gap: 8px; } .flex-gap-3[data-v-26198ef0] { gap: 12px; } .flex-gap-4[data-v-26198ef0] { gap: 16px; } .flex-gap-5[data-v-26198ef0] { gap: 20px; } .flex-gap-6[data-v-26198ef0] { gap: 24px; } .flex-gap-7[data-v-26198ef0] { gap: 28px; } .flex-gap-8[data-v-26198ef0] { gap: 32px; } .flex-gap-10[data-v-26198ef0] { gap: 40px; } .flex-gap-12[data-v-26198ef0] { gap: 48px; } .col-none[data-v-26198ef0] { display: none; } .col-auto[data-v-26198ef0] { grid-column: auto; } .col-1[data-v-26198ef0] { grid-column: span 1; } .col-2[data-v-26198ef0] { grid-column: span 2; } .col-3[data-v-26198ef0] { grid-column: span 3; } .col-4[data-v-26198ef0] { grid-column: span 4; } .col-5[data-v-26198ef0] { grid-column: span 5; } .col-6[data-v-26198ef0] { grid-column: span 6; } .col-7[data-v-26198ef0] { grid-column: span 7; } .col-8[data-v-26198ef0] { grid-column: span 8; } .col-9[data-v-26198ef0] { grid-column: span 9; } .col-10[data-v-26198ef0] { grid-column: span 10; } .col-12[data-v-26198ef0] { grid-column: span 12; } .col-13[data-v-26198ef0] { grid-column: span 13; } .col-14[data-v-26198ef0] { grid-column: span 14; } .col-15[data-v-26198ef0] { grid-column: span 15; } .col-16[data-v-26198ef0] { grid-column: span 16; } .col-18[data-v-26198ef0] { grid-column: span 18; } .col-20[data-v-26198ef0] { grid-column: span 20; } .col-22[data-v-26198ef0] { grid-column: span 22; } .col-24[data-v-26198ef0] { grid-column: span 24; } .col-26[data-v-26198ef0] { grid-column: span 26; } .col-27[data-v-26198ef0] { grid-column: span 27; } .col-28[data-v-26198ef0] { grid-column: span 28; } .col-30[data-v-26198ef0] { grid-column: span 30; } .col-36[data-v-26198ef0] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-26198ef0] { display: none; } .col-md-36[data-v-26198ef0] { grid-column: span 36; } .col-md-28[data-v-26198ef0] { grid-column: span 28; } .col-md-27[data-v-26198ef0] { grid-column: span 27; } .col-md-24[data-v-26198ef0] { grid-column: span 24; } .col-md-22[data-v-26198ef0] { grid-column: span 22; } .col-md-20[data-v-26198ef0] { grid-column: span 20; } .col-md-19[data-v-26198ef0] { grid-column: span 19; } .col-md-18[data-v-26198ef0] { grid-column: span 18; } .col-md-17[data-v-26198ef0] { grid-column: span 17; } .col-md-16[data-v-26198ef0] { grid-column: span 16; } .col-md-15[data-v-26198ef0] { grid-column: span 15; } .col-md-14[data-v-26198ef0] { grid-column: span 14; } .col-md-13[data-v-26198ef0] { grid-column: span 13; } .col-md-12[data-v-26198ef0] { grid-column: span 12; } .col-md-10[data-v-26198ef0] { grid-column: span 10; } .col-md-9[data-v-26198ef0] { grid-column: span 9; } .col-md-8[data-v-26198ef0] { grid-column: span 8; } .col-md-6[data-v-26198ef0] { grid-column: span 6; } .col-md-5[data-v-26198ef0] { grid-column: span 5; } .col-md-4[data-v-26198ef0] { grid-column: span 4; } .col-md-3[data-v-26198ef0] { grid-column: span 3; } .col-md-2[data-v-26198ef0] { grid-column: span 2; } .col-md-1[data-v-26198ef0] { grid-column: span 1; } .col-md-auto[data-v-26198ef0] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-26198ef0] { display: none; } .col-sm-36[data-v-26198ef0] { grid-column: span 36; } .col-sm-32[data-v-26198ef0] { grid-column: span 32; } .col-sm-28[data-v-26198ef0] { grid-column: span 28; } .col-sm-27[data-v-26198ef0] { grid-column: span 27; } .col-sm-24[data-v-26198ef0] { grid-column: span 24; } .col-sm-22[data-v-26198ef0] { grid-column: span 22; } .col-sm-20[data-v-26198ef0] { grid-column: span 20; } .col-sm-18[data-v-26198ef0] { grid-column: span 18; } .col-sm-16[data-v-26198ef0] { grid-column: span 16; } .col-sm-15[data-v-26198ef0] { grid-column: span 15; } .col-sm-14[data-v-26198ef0] { grid-column: span 14; } .col-sm-13[data-v-26198ef0] { grid-column: span 12; } .col-sm-12[data-v-26198ef0] { grid-column: span 12; } .col-sm-10[data-v-26198ef0] { grid-column: span 10; } .col-sm-9[data-v-26198ef0] { grid-column: span 8; } .col-sm-8[data-v-26198ef0] { grid-column: span 8; } .col-sm-6[data-v-26198ef0] { grid-column: span 6; } .col-sm-4[data-v-26198ef0] { grid-column: span 4; } .col-sm-auto[data-v-26198ef0] { grid-column: auto; } } .fade-enter-active[data-v-26198ef0] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-26198ef0] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-26198ef0], .fade-leave-to[data-v-26198ef0] { opacity: 0; } @media (max-width: 720px) { .hide-mobile[data-v-26198ef0] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-26198ef0] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-26198ef0] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-26198ef0] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-26198ef0] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-26198ef0] { display: none !important; } } .admin-users__filters[data-v-26198ef0] { display: flex; gap: 8px; margin-left: 16px; } @media (max-width: 1160px) { .admin-users__filters[data-v-26198ef0] { margin-left: 0; gap: 6px; } } @media (max-width: 720px) { .admin-users__filters[data-v-26198ef0] { margin-left: 0; gap: 4px; flex-wrap: nowrap; } .admin-users__filters[data-v-26198ef0] .PremiumButton { padding: 6px 10px; font-size: 12px; flex-shrink: 0; } } .admin-users__item[data-v-26198ef0] { cursor: pointer; transition: background-color 0.15s ease; } .admin-users__item[data-v-26198ef0]:hover { background: rgba(var(--primary-500-rgb), 0.08); } .admin-users__mobile-card[data-v-26198ef0] { margin: 4px 0; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-fad902bb]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-fad902bb] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-fad902bb] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-fad902bb]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-fad902bb], .theme-mode-light[data-v-fad902bb] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-fad902bb], .theme-mode-dark[data-v-fad902bb] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-fad902bb]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-fad902bb]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-fad902bb] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-fad902bb] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-fad902bb]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-fad902bb], input[disabled][data-v-fad902bb] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-fad902bb] { opacity: 0.9; } input[readonly][data-v-fad902bb] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-fad902bb] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-fad902bb]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-fad902bb]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-fad902bb]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-fad902bb] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-fad902bb]:nth-child(odd), .list-card-desktop__wrapper[data-v-fad902bb]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-fad902bb]:nth-child(even), .list-card-desktop__wrapper[data-v-fad902bb]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-fad902bb]:nth-child(odd), .listCardDesktopWrapper[data-v-fad902bb]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-fad902bb]:nth-child(even), .listCardDesktopWrapper[data-v-fad902bb]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-fad902bb] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-fad902bb] { cursor: pointer; } .card-layout--selectionnable[data-v-fad902bb]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-fad902bb] { cursor: auto; } .card-layout--drawer[data-v-fad902bb] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-fad902bb] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-fad902bb] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-fad902bb] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-fad902bb] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-fad902bb] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-fad902bb]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-fad902bb] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-fad902bb] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-fad902bb] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-fad902bb] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-fad902bb] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-fad902bb] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-fad902bb] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-fad902bb] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-fad902bb] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-fad902bb] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-fad902bb] { background-color: #eb1515; } .color-chip--dossiers[data-v-fad902bb] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-fad902bb] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-fad902bb] { background-color: #00a79b; } .color-chip--virements[data-v-fad902bb] { background-color: var(--secondary-400); } .color-chip--factures[data-v-fad902bb] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-fad902bb] { background-color: #eb1515; } .color-recherche-dossiers[data-v-fad902bb] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-fad902bb] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-fad902bb] { background-color: #00a79b; } .color-recherche-virements[data-v-fad902bb] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-fad902bb] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-fad902bb] { color: #00a79b; cursor: pointer; } .scrollable[data-v-fad902bb] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-fad902bb] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-fad902bb] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-fad902bb] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-fad902bb] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-fad902bb] { font-weight: 800; } .grid-cell--column[data-v-fad902bb] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-fad902bb] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-fad902bb] { fill: #00a79b; } .grid-cell--disabled[data-v-fad902bb] { color: #cccccc; } .grid-cell--disabled svg[data-v-fad902bb] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-fad902bb] { white-space: nowrap; } .grid-cell--danger svg[data-v-fad902bb] { fill: #eb1515; } .grid-cell--span-1[data-v-fad902bb] { grid-column: span 1; } .grid-cell--span-2[data-v-fad902bb] { grid-column: span 2; } .grid-cell--span-3[data-v-fad902bb] { grid-column: span 3; } .grid-cell--span-4[data-v-fad902bb] { grid-column: span 4; } .grid-cell--span-5[data-v-fad902bb] { grid-column: span 5; } .grid-cell--span-6[data-v-fad902bb] { grid-column: span 6; } .grid-cell--span-7[data-v-fad902bb] { grid-column: span 7; } .grid-cell--span-8[data-v-fad902bb] { grid-column: span 8; } .grid-cell--span-9[data-v-fad902bb] { grid-column: span 9; } .grid-cell--span-10[data-v-fad902bb] { grid-column: span 10; } .grid-cell--span-12[data-v-fad902bb] { grid-column: span 12; } .grid-cell--span-13[data-v-fad902bb] { grid-column: span 13; } .grid-cell--span-14[data-v-fad902bb] { grid-column: span 14; } .grid-cell--span-16[data-v-fad902bb] { grid-column: span 16; } .grid-cell--span-18[data-v-fad902bb] { grid-column: span 18; } .grid-cell--span-20[data-v-fad902bb] { grid-column: span 20; } .grid-cell--span-32[data-v-fad902bb] { grid-column: span 32; } .grid-cell--span-36[data-v-fad902bb] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-fad902bb] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-fad902bb] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-fad902bb] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-fad902bb] { justify-content: center !important; } .elem--bold span[data-v-fad902bb] { font-weight: 800; } .elem--column[data-v-fad902bb] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-fad902bb] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-fad902bb] { fill: #00a79b; } .elem--clickable[data-v-fad902bb]:hover { cursor: pointer; } .elem--disabled[data-v-fad902bb] { color: #cccccc; } .elem--disabled svg[data-v-fad902bb] { fill: #cccccc; } .elem--nowrap span[data-v-fad902bb] { white-space: nowrap; } .elem--danger svg[data-v-fad902bb] { fill: #eb1515; } .elem--span-1[data-v-fad902bb] { grid-column: span 1; } .elem--span-2[data-v-fad902bb] { grid-column: span 2; } .elem--span-3[data-v-fad902bb] { grid-column: span 3; } .elem--span-4[data-v-fad902bb] { grid-column: span 4; } .elem--span-5[data-v-fad902bb] { grid-column: span 5; } .elem--span-6[data-v-fad902bb] { grid-column: span 6; } .elem--span-7[data-v-fad902bb] { grid-column: span 7; } .elem--span-8[data-v-fad902bb] { grid-column: span 8; } .elem--span-9[data-v-fad902bb] { grid-column: span 9; } .elem--span-10[data-v-fad902bb] { grid-column: span 10; } .elem--span-12[data-v-fad902bb] { grid-column: span 12; } .elem--span-13[data-v-fad902bb] { grid-column: span 13; } .elem--span-14[data-v-fad902bb] { grid-column: span 14; } .elem--span-16[data-v-fad902bb] { grid-column: span 16; } .elem--span-18[data-v-fad902bb] { grid-column: span 18; } .elem--span-20[data-v-fad902bb] { grid-column: span 20; } .elem--span-32[data-v-fad902bb] { grid-column: span 32; } .elem--span-36[data-v-fad902bb] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-fad902bb] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-fad902bb] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-fad902bb]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-fad902bb] { display: flex; } /* flex-direction */ .flex-column[data-v-fad902bb] { flex-direction: column; } .flex-row[data-v-fad902bb] { flex-direction: row; } /* flex */ .flex-1[data-v-fad902bb] { flex: 1 !important; } .flex-2[data-v-fad902bb] { flex: 2; } .flex-3[data-v-fad902bb] { flex: 3; } .flex-3[data-v-fad902bb] { flex: 4; } .flex-5[data-v-fad902bb] { flex: 5; } .flex-auto[data-v-fad902bb] { flex: auto; } .flex-none[data-v-fad902bb] { flex: none; } .flex-content[data-v-fad902bb] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-fad902bb] { flex-wrap: wrap; } .flex-nowrap[data-v-fad902bb] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-fad902bb] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-fad902bb] { justify-content: flex-start; } .justify-content-end[data-v-fad902bb] { justify-content: flex-end; } .justify-content-baseline[data-v-fad902bb] { justify-content: baseline; } .justify-content-center[data-v-fad902bb] { justify-content: center; } .justify-content-space-between[data-v-fad902bb] { justify-content: space-between; } .justify-content-space-around[data-v-fad902bb] { justify-content: space-around; } .justify-content-space-evenly[data-v-fad902bb] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-fad902bb] { align-items: flex-start; } .align-items-flex-end[data-v-fad902bb] { align-items: flex-end; } .align-items-stretch[data-v-fad902bb] { align-items: stretch; } .align-items-baseline[data-v-fad902bb] { align-items: baseline; } .align-items-center[data-v-fad902bb] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-fad902bb] { align-content: flex-start; } .align-content-flex-end[data-v-fad902bb] { align-content: flex-end; } .align-content-center[data-v-fad902bb] { align-content: center; } .align-content-stretch[data-v-fad902bb] { align-content: stretch; } .align-content-space-between[data-v-fad902bb] { align-content: space-between; } .align-content-space-around[data-v-fad902bb] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-fad902bb] { align-self: flex-start; } .align-self-flex-end[data-v-fad902bb] { align-self: flex-end; } .align-self-stretch[data-v-fad902bb] { align-self: stretch; } .align-self-flex-baseline[data-v-fad902bb] { align-self: baseline; } .align-self-center[data-v-fad902bb] { align-self: center; } .align-self-auto[data-v-fad902bb] { align-self: auto; } .flex-gap-1[data-v-fad902bb] { gap: 4px; } .flex-gap-2[data-v-fad902bb] { gap: 8px; } .flex-gap-3[data-v-fad902bb] { gap: 12px; } .flex-gap-4[data-v-fad902bb] { gap: 16px; } .flex-gap-5[data-v-fad902bb] { gap: 20px; } .flex-gap-6[data-v-fad902bb] { gap: 24px; } .flex-gap-7[data-v-fad902bb] { gap: 28px; } .flex-gap-8[data-v-fad902bb] { gap: 32px; } .flex-gap-10[data-v-fad902bb] { gap: 40px; } .flex-gap-12[data-v-fad902bb] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-fad902bb] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-fad902bb] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-fad902bb] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-fad902bb] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-fad902bb] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-fad902bb] { display: none !important; } } .col-none[data-v-fad902bb] { display: none; } .col-auto[data-v-fad902bb] { grid-column: auto; } .col-1[data-v-fad902bb] { grid-column: span 1; } .col-2[data-v-fad902bb] { grid-column: span 2; } .col-3[data-v-fad902bb] { grid-column: span 3; } .col-4[data-v-fad902bb] { grid-column: span 4; } .col-5[data-v-fad902bb] { grid-column: span 5; } .col-6[data-v-fad902bb] { grid-column: span 6; } .col-7[data-v-fad902bb] { grid-column: span 7; } .col-8[data-v-fad902bb] { grid-column: span 8; } .col-9[data-v-fad902bb] { grid-column: span 9; } .col-10[data-v-fad902bb] { grid-column: span 10; } .col-12[data-v-fad902bb] { grid-column: span 12; } .col-13[data-v-fad902bb] { grid-column: span 13; } .col-14[data-v-fad902bb] { grid-column: span 14; } .col-15[data-v-fad902bb] { grid-column: span 15; } .col-16[data-v-fad902bb] { grid-column: span 16; } .col-18[data-v-fad902bb] { grid-column: span 18; } .col-20[data-v-fad902bb] { grid-column: span 20; } .col-22[data-v-fad902bb] { grid-column: span 22; } .col-24[data-v-fad902bb] { grid-column: span 24; } .col-26[data-v-fad902bb] { grid-column: span 26; } .col-27[data-v-fad902bb] { grid-column: span 27; } .col-28[data-v-fad902bb] { grid-column: span 28; } .col-30[data-v-fad902bb] { grid-column: span 30; } .col-36[data-v-fad902bb] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-fad902bb] { display: none; } .col-md-36[data-v-fad902bb] { grid-column: span 36; } .col-md-28[data-v-fad902bb] { grid-column: span 28; } .col-md-27[data-v-fad902bb] { grid-column: span 27; } .col-md-24[data-v-fad902bb] { grid-column: span 24; } .col-md-22[data-v-fad902bb] { grid-column: span 22; } .col-md-20[data-v-fad902bb] { grid-column: span 20; } .col-md-19[data-v-fad902bb] { grid-column: span 19; } .col-md-18[data-v-fad902bb] { grid-column: span 18; } .col-md-17[data-v-fad902bb] { grid-column: span 17; } .col-md-16[data-v-fad902bb] { grid-column: span 16; } .col-md-15[data-v-fad902bb] { grid-column: span 15; } .col-md-14[data-v-fad902bb] { grid-column: span 14; } .col-md-13[data-v-fad902bb] { grid-column: span 13; } .col-md-12[data-v-fad902bb] { grid-column: span 12; } .col-md-10[data-v-fad902bb] { grid-column: span 10; } .col-md-9[data-v-fad902bb] { grid-column: span 9; } .col-md-8[data-v-fad902bb] { grid-column: span 8; } .col-md-6[data-v-fad902bb] { grid-column: span 6; } .col-md-5[data-v-fad902bb] { grid-column: span 5; } .col-md-4[data-v-fad902bb] { grid-column: span 4; } .col-md-3[data-v-fad902bb] { grid-column: span 3; } .col-md-2[data-v-fad902bb] { grid-column: span 2; } .col-md-1[data-v-fad902bb] { grid-column: span 1; } .col-md-auto[data-v-fad902bb] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-fad902bb] { display: none; } .col-sm-36[data-v-fad902bb] { grid-column: span 36; } .col-sm-32[data-v-fad902bb] { grid-column: span 32; } .col-sm-28[data-v-fad902bb] { grid-column: span 28; } .col-sm-27[data-v-fad902bb] { grid-column: span 27; } .col-sm-24[data-v-fad902bb] { grid-column: span 24; } .col-sm-22[data-v-fad902bb] { grid-column: span 22; } .col-sm-20[data-v-fad902bb] { grid-column: span 20; } .col-sm-18[data-v-fad902bb] { grid-column: span 18; } .col-sm-16[data-v-fad902bb] { grid-column: span 16; } .col-sm-15[data-v-fad902bb] { grid-column: span 15; } .col-sm-14[data-v-fad902bb] { grid-column: span 14; } .col-sm-13[data-v-fad902bb] { grid-column: span 12; } .col-sm-12[data-v-fad902bb] { grid-column: span 12; } .col-sm-10[data-v-fad902bb] { grid-column: span 10; } .col-sm-9[data-v-fad902bb] { grid-column: span 8; } .col-sm-8[data-v-fad902bb] { grid-column: span 8; } .col-sm-6[data-v-fad902bb] { grid-column: span 6; } .col-sm-4[data-v-fad902bb] { grid-column: span 4; } .col-sm-auto[data-v-fad902bb] { grid-column: auto; } } .fade-enter-active[data-v-fad902bb] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-fad902bb] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-fad902bb], .fade-leave-to[data-v-fad902bb] { opacity: 0; } /* =========================================== LAYOUT PRINCIPAL =========================================== */ .auth-layout[data-v-fad902bb] { display: grid; grid-template-columns: 45% 1fr; align-items: center; width: 100%; height: 100vh; overflow: hidden; background: var(--bg-page); } /* =========================================== PANNEAU VISUEL (DESKTOP) =========================================== */ .auth-visual[data-v-fad902bb] { height: 100%; position: relative; background-color: var(--secondary-900); display: flex; align-items: center; justify-content: center; overflow: hidden; } .auth-visual__bg[data-v-fad902bb] { position: absolute; inset: 0; opacity: 0.3; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 30px 30px; z-index: 0; } .auth-visual__glow[data-v-fad902bb] { position: absolute; top: -30%; left: -30%; width: 160%; height: 160%; background: radial-gradient(circle at 50% 50%, rgba(var(--primary-500-rgb), 0.15), transparent 70%); z-index: 1; animation: pulseGlow-fad902bb 10s ease-in-out infinite alternate; } .auth-visual__footer[data-v-fad902bb] { position: absolute; bottom: 30px; left: 40px; right: 40px; z-index: 10; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); text-align: center; } .brand-badge[data-v-fad902bb] { position: absolute; top: 40px; left: 40px; z-index: 10; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; } .brand-badge .logo-img[data-v-fad902bb] { color: white; transition: transform 0.25s ease; } .brand-badge:hover .logo-img[data-v-fad902bb] { transform: rotate(5deg); } .logo-text-container[data-v-fad902bb] { display: flex; align-items: center; gap: 4px; line-height: 1; font-size: 24px; } .brand-fast[data-v-fad902bb] { font-weight: 900; font-style: italic; letter-spacing: -0.5px; color: white; } .brand-peptides[data-v-fad902bb] { color: var(--primary-400); font-weight: 600; letter-spacing: 0.5px; } .visual-content[data-v-fad902bb] { position: relative; z-index: 5; width: 100%; max-width: 540px; padding: 20px; } .glass-card[data-v-fad902bb] { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border-radius: 28px; padding: 48px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .hero-title[data-v-fad902bb] { font-size: 2.2rem; font-weight: 800; line-height: 1.1; margin-bottom: 16px; color: white; } .hero-title .text-gradient[data-v-fad902bb] { background: linear-gradient(135deg, #ffffff 0%, var(--primary-400) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle[data-v-fad902bb] { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin-bottom: 30px; } .illustration-wrapper[data-v-fad902bb] { width: 100%; height: 200px; border-radius: 16px; overflow: hidden; position: relative; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.05); } .illustration-wrapper[data-v-fad902bb]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(var(--secondary-900-rgb), 0.6)); } .illustration-wrapper .illustration-img[data-v-fad902bb] { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* =========================================== PANNEAU FORMULAIRE =========================================== */ .auth-main[data-v-fad902bb] { height: 100%; display: flex; flex-direction: column; position: relative; padding: 20px; overflow: hidden; background-color: var(--bg-page); background-image: radial-gradient(var(--border-default) 1px, transparent 1px); background-size: 24px 24px; } /* =========================================== HEADER NAVIGATION (Bloc en haut) =========================================== */ .auth-header[data-v-fad902bb] { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 10px 0; flex-shrink: 0; } .auth-header__left[data-v-fad902bb], .auth-header__right[data-v-fad902bb] { min-width: 0; } .auth-header[data-v-fad902bb] .pbtn:hover { transform: none !important; } /* =========================================== FORM WRAPPER (Centré dans l'espace restant) =========================================== */ .form-wrapper[data-v-fad902bb] { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0 20vh; } /* =========================================== ANIMATIONS =========================================== */ @keyframes pulseGlow-fad902bb { 0% { opacity: 0.6; } 100% { opacity: 0.9; } } .fade-slide-enter-active[data-v-fad902bb], .fade-slide-leave-active[data-v-fad902bb] { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .fade-slide-enter-from[data-v-fad902bb] { opacity: 0; transform: translateY(10px) scale(0.98); } .fade-slide-leave-to[data-v-fad902bb] { opacity: 0; transform: translateY(-10px) scale(0.98); } /* =========================================== RESPONSIVE TABLET / MOBILE =========================================== */ @media (max-width: 1160px) { .auth-layout[data-v-fad902bb] { display: flex; grid-template-columns: none; height: 100dvh; } .auth-main[data-v-fad902bb] { flex: 1; height: 100dvh; padding: 0 12px 12px; padding-bottom: env(safe-area-inset-bottom, 0px); background-image: none; } .auth-header[data-v-fad902bb] { padding: calc(8px + env(safe-area-inset-top, 0px)) 4px 0; display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .form-wrapper[data-v-fad902bb] { flex: 1; min-height: 0; justify-content: center; padding: 0 16px; width: 100%; box-sizing: border-box; overflow-y: auto; } } @media (max-width: 1160px) and (max-width: 320px) { .auth-header[data-v-fad902bb] .pbtn__label { display: none; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-84e8d99e]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-84e8d99e] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-84e8d99e] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-84e8d99e]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-84e8d99e], .theme-mode-light[data-v-84e8d99e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-84e8d99e], .theme-mode-dark[data-v-84e8d99e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-84e8d99e]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-84e8d99e]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-84e8d99e] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-84e8d99e] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-84e8d99e]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-84e8d99e], input[disabled][data-v-84e8d99e] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-84e8d99e] { opacity: 0.9; } input[readonly][data-v-84e8d99e] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-84e8d99e] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-84e8d99e]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-84e8d99e]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-84e8d99e]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-84e8d99e] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-84e8d99e]:nth-child(odd), .list-card-desktop__wrapper[data-v-84e8d99e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-84e8d99e]:nth-child(even), .list-card-desktop__wrapper[data-v-84e8d99e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-84e8d99e]:nth-child(odd), .listCardDesktopWrapper[data-v-84e8d99e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-84e8d99e]:nth-child(even), .listCardDesktopWrapper[data-v-84e8d99e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-84e8d99e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-84e8d99e] { cursor: pointer; } .card-layout--selectionnable[data-v-84e8d99e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-84e8d99e] { cursor: auto; } .card-layout--drawer[data-v-84e8d99e] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-84e8d99e] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-84e8d99e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-84e8d99e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-84e8d99e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-84e8d99e] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-84e8d99e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-84e8d99e] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-84e8d99e] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-84e8d99e] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-84e8d99e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-84e8d99e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-84e8d99e] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-84e8d99e] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-84e8d99e] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-84e8d99e] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-84e8d99e] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-84e8d99e] { background-color: #eb1515; } .color-chip--dossiers[data-v-84e8d99e] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-84e8d99e] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-84e8d99e] { background-color: #00a79b; } .color-chip--virements[data-v-84e8d99e] { background-color: var(--secondary-400); } .color-chip--factures[data-v-84e8d99e] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-84e8d99e] { background-color: #eb1515; } .color-recherche-dossiers[data-v-84e8d99e] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-84e8d99e] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-84e8d99e] { background-color: #00a79b; } .color-recherche-virements[data-v-84e8d99e] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-84e8d99e] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-84e8d99e] { color: #00a79b; cursor: pointer; } .scrollable[data-v-84e8d99e] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-84e8d99e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-84e8d99e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-84e8d99e] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-84e8d99e] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-84e8d99e] { font-weight: 800; } .grid-cell--column[data-v-84e8d99e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-84e8d99e] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-84e8d99e] { fill: #00a79b; } .grid-cell--disabled[data-v-84e8d99e] { color: #cccccc; } .grid-cell--disabled svg[data-v-84e8d99e] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-84e8d99e] { white-space: nowrap; } .grid-cell--danger svg[data-v-84e8d99e] { fill: #eb1515; } .grid-cell--span-1[data-v-84e8d99e] { grid-column: span 1; } .grid-cell--span-2[data-v-84e8d99e] { grid-column: span 2; } .grid-cell--span-3[data-v-84e8d99e] { grid-column: span 3; } .grid-cell--span-4[data-v-84e8d99e] { grid-column: span 4; } .grid-cell--span-5[data-v-84e8d99e] { grid-column: span 5; } .grid-cell--span-6[data-v-84e8d99e] { grid-column: span 6; } .grid-cell--span-7[data-v-84e8d99e] { grid-column: span 7; } .grid-cell--span-8[data-v-84e8d99e] { grid-column: span 8; } .grid-cell--span-9[data-v-84e8d99e] { grid-column: span 9; } .grid-cell--span-10[data-v-84e8d99e] { grid-column: span 10; } .grid-cell--span-12[data-v-84e8d99e] { grid-column: span 12; } .grid-cell--span-13[data-v-84e8d99e] { grid-column: span 13; } .grid-cell--span-14[data-v-84e8d99e] { grid-column: span 14; } .grid-cell--span-16[data-v-84e8d99e] { grid-column: span 16; } .grid-cell--span-18[data-v-84e8d99e] { grid-column: span 18; } .grid-cell--span-20[data-v-84e8d99e] { grid-column: span 20; } .grid-cell--span-32[data-v-84e8d99e] { grid-column: span 32; } .grid-cell--span-36[data-v-84e8d99e] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-84e8d99e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-84e8d99e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-84e8d99e] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-84e8d99e] { justify-content: center !important; } .elem--bold span[data-v-84e8d99e] { font-weight: 800; } .elem--column[data-v-84e8d99e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-84e8d99e] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-84e8d99e] { fill: #00a79b; } .elem--clickable[data-v-84e8d99e]:hover { cursor: pointer; } .elem--disabled[data-v-84e8d99e] { color: #cccccc; } .elem--disabled svg[data-v-84e8d99e] { fill: #cccccc; } .elem--nowrap span[data-v-84e8d99e] { white-space: nowrap; } .elem--danger svg[data-v-84e8d99e] { fill: #eb1515; } .elem--span-1[data-v-84e8d99e] { grid-column: span 1; } .elem--span-2[data-v-84e8d99e] { grid-column: span 2; } .elem--span-3[data-v-84e8d99e] { grid-column: span 3; } .elem--span-4[data-v-84e8d99e] { grid-column: span 4; } .elem--span-5[data-v-84e8d99e] { grid-column: span 5; } .elem--span-6[data-v-84e8d99e] { grid-column: span 6; } .elem--span-7[data-v-84e8d99e] { grid-column: span 7; } .elem--span-8[data-v-84e8d99e] { grid-column: span 8; } .elem--span-9[data-v-84e8d99e] { grid-column: span 9; } .elem--span-10[data-v-84e8d99e] { grid-column: span 10; } .elem--span-12[data-v-84e8d99e] { grid-column: span 12; } .elem--span-13[data-v-84e8d99e] { grid-column: span 13; } .elem--span-14[data-v-84e8d99e] { grid-column: span 14; } .elem--span-16[data-v-84e8d99e] { grid-column: span 16; } .elem--span-18[data-v-84e8d99e] { grid-column: span 18; } .elem--span-20[data-v-84e8d99e] { grid-column: span 20; } .elem--span-32[data-v-84e8d99e] { grid-column: span 32; } .elem--span-36[data-v-84e8d99e] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-84e8d99e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-84e8d99e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-84e8d99e]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-84e8d99e] { display: flex; } /* flex-direction */ .flex-column[data-v-84e8d99e] { flex-direction: column; } .flex-row[data-v-84e8d99e] { flex-direction: row; } /* flex */ .flex-1[data-v-84e8d99e] { flex: 1 !important; } .flex-2[data-v-84e8d99e] { flex: 2; } .flex-3[data-v-84e8d99e] { flex: 3; } .flex-3[data-v-84e8d99e] { flex: 4; } .flex-5[data-v-84e8d99e] { flex: 5; } .flex-auto[data-v-84e8d99e] { flex: auto; } .flex-none[data-v-84e8d99e] { flex: none; } .flex-content[data-v-84e8d99e] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-84e8d99e] { flex-wrap: wrap; } .flex-nowrap[data-v-84e8d99e] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-84e8d99e] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-84e8d99e] { justify-content: flex-start; } .justify-content-end[data-v-84e8d99e] { justify-content: flex-end; } .justify-content-baseline[data-v-84e8d99e] { justify-content: baseline; } .justify-content-center[data-v-84e8d99e] { justify-content: center; } .justify-content-space-between[data-v-84e8d99e] { justify-content: space-between; } .justify-content-space-around[data-v-84e8d99e] { justify-content: space-around; } .justify-content-space-evenly[data-v-84e8d99e] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-84e8d99e] { align-items: flex-start; } .align-items-flex-end[data-v-84e8d99e] { align-items: flex-end; } .align-items-stretch[data-v-84e8d99e] { align-items: stretch; } .align-items-baseline[data-v-84e8d99e] { align-items: baseline; } .align-items-center[data-v-84e8d99e] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-84e8d99e] { align-content: flex-start; } .align-content-flex-end[data-v-84e8d99e] { align-content: flex-end; } .align-content-center[data-v-84e8d99e] { align-content: center; } .align-content-stretch[data-v-84e8d99e] { align-content: stretch; } .align-content-space-between[data-v-84e8d99e] { align-content: space-between; } .align-content-space-around[data-v-84e8d99e] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-84e8d99e] { align-self: flex-start; } .align-self-flex-end[data-v-84e8d99e] { align-self: flex-end; } .align-self-stretch[data-v-84e8d99e] { align-self: stretch; } .align-self-flex-baseline[data-v-84e8d99e] { align-self: baseline; } .align-self-center[data-v-84e8d99e] { align-self: center; } .align-self-auto[data-v-84e8d99e] { align-self: auto; } .flex-gap-1[data-v-84e8d99e] { gap: 4px; } .flex-gap-2[data-v-84e8d99e] { gap: 8px; } .flex-gap-3[data-v-84e8d99e] { gap: 12px; } .flex-gap-4[data-v-84e8d99e] { gap: 16px; } .flex-gap-5[data-v-84e8d99e] { gap: 20px; } .flex-gap-6[data-v-84e8d99e] { gap: 24px; } .flex-gap-7[data-v-84e8d99e] { gap: 28px; } .flex-gap-8[data-v-84e8d99e] { gap: 32px; } .flex-gap-10[data-v-84e8d99e] { gap: 40px; } .flex-gap-12[data-v-84e8d99e] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-84e8d99e] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-84e8d99e] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-84e8d99e] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-84e8d99e] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-84e8d99e] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-84e8d99e] { display: none !important; } } .col-none[data-v-84e8d99e] { display: none; } .col-auto[data-v-84e8d99e] { grid-column: auto; } .col-1[data-v-84e8d99e] { grid-column: span 1; } .col-2[data-v-84e8d99e] { grid-column: span 2; } .col-3[data-v-84e8d99e] { grid-column: span 3; } .col-4[data-v-84e8d99e] { grid-column: span 4; } .col-5[data-v-84e8d99e] { grid-column: span 5; } .col-6[data-v-84e8d99e] { grid-column: span 6; } .col-7[data-v-84e8d99e] { grid-column: span 7; } .col-8[data-v-84e8d99e] { grid-column: span 8; } .col-9[data-v-84e8d99e] { grid-column: span 9; } .col-10[data-v-84e8d99e] { grid-column: span 10; } .col-12[data-v-84e8d99e] { grid-column: span 12; } .col-13[data-v-84e8d99e] { grid-column: span 13; } .col-14[data-v-84e8d99e] { grid-column: span 14; } .col-15[data-v-84e8d99e] { grid-column: span 15; } .col-16[data-v-84e8d99e] { grid-column: span 16; } .col-18[data-v-84e8d99e] { grid-column: span 18; } .col-20[data-v-84e8d99e] { grid-column: span 20; } .col-22[data-v-84e8d99e] { grid-column: span 22; } .col-24[data-v-84e8d99e] { grid-column: span 24; } .col-26[data-v-84e8d99e] { grid-column: span 26; } .col-27[data-v-84e8d99e] { grid-column: span 27; } .col-28[data-v-84e8d99e] { grid-column: span 28; } .col-30[data-v-84e8d99e] { grid-column: span 30; } .col-36[data-v-84e8d99e] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-84e8d99e] { display: none; } .col-md-36[data-v-84e8d99e] { grid-column: span 36; } .col-md-28[data-v-84e8d99e] { grid-column: span 28; } .col-md-27[data-v-84e8d99e] { grid-column: span 27; } .col-md-24[data-v-84e8d99e] { grid-column: span 24; } .col-md-22[data-v-84e8d99e] { grid-column: span 22; } .col-md-20[data-v-84e8d99e] { grid-column: span 20; } .col-md-19[data-v-84e8d99e] { grid-column: span 19; } .col-md-18[data-v-84e8d99e] { grid-column: span 18; } .col-md-17[data-v-84e8d99e] { grid-column: span 17; } .col-md-16[data-v-84e8d99e] { grid-column: span 16; } .col-md-15[data-v-84e8d99e] { grid-column: span 15; } .col-md-14[data-v-84e8d99e] { grid-column: span 14; } .col-md-13[data-v-84e8d99e] { grid-column: span 13; } .col-md-12[data-v-84e8d99e] { grid-column: span 12; } .col-md-10[data-v-84e8d99e] { grid-column: span 10; } .col-md-9[data-v-84e8d99e] { grid-column: span 9; } .col-md-8[data-v-84e8d99e] { grid-column: span 8; } .col-md-6[data-v-84e8d99e] { grid-column: span 6; } .col-md-5[data-v-84e8d99e] { grid-column: span 5; } .col-md-4[data-v-84e8d99e] { grid-column: span 4; } .col-md-3[data-v-84e8d99e] { grid-column: span 3; } .col-md-2[data-v-84e8d99e] { grid-column: span 2; } .col-md-1[data-v-84e8d99e] { grid-column: span 1; } .col-md-auto[data-v-84e8d99e] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-84e8d99e] { display: none; } .col-sm-36[data-v-84e8d99e] { grid-column: span 36; } .col-sm-32[data-v-84e8d99e] { grid-column: span 32; } .col-sm-28[data-v-84e8d99e] { grid-column: span 28; } .col-sm-27[data-v-84e8d99e] { grid-column: span 27; } .col-sm-24[data-v-84e8d99e] { grid-column: span 24; } .col-sm-22[data-v-84e8d99e] { grid-column: span 22; } .col-sm-20[data-v-84e8d99e] { grid-column: span 20; } .col-sm-18[data-v-84e8d99e] { grid-column: span 18; } .col-sm-16[data-v-84e8d99e] { grid-column: span 16; } .col-sm-15[data-v-84e8d99e] { grid-column: span 15; } .col-sm-14[data-v-84e8d99e] { grid-column: span 14; } .col-sm-13[data-v-84e8d99e] { grid-column: span 12; } .col-sm-12[data-v-84e8d99e] { grid-column: span 12; } .col-sm-10[data-v-84e8d99e] { grid-column: span 10; } .col-sm-9[data-v-84e8d99e] { grid-column: span 8; } .col-sm-8[data-v-84e8d99e] { grid-column: span 8; } .col-sm-6[data-v-84e8d99e] { grid-column: span 6; } .col-sm-4[data-v-84e8d99e] { grid-column: span 4; } .col-sm-auto[data-v-84e8d99e] { grid-column: auto; } } .fade-enter-active[data-v-84e8d99e] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-84e8d99e] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-84e8d99e], .fade-leave-to[data-v-84e8d99e] { opacity: 0; } .chat-input[data-v-84e8d99e] { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 20px; background: linear-gradient(to top, var(--admin-bg-surface, white) 0%, var(--admin-bg-subtle, #f8f9fb) 100%); border-top: 1px solid var(--admin-border-subtle, #edf1f5); position: relative; } .chat-input[data-v-84e8d99e]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--admin-border-subtle, #e2e7ef) 30%, var(--admin-border-subtle, #e2e7ef) 70%, transparent 100%); } .chat-input__container[data-v-84e8d99e] { display: flex; align-items: center; gap: 12px; background: var(--admin-bg-card, white); border-radius: 28px; padding: 8px 8px 8px 20px; box-shadow: 0 2px 8px var(--admin-shadow, color-mix(in srgb, #2b303a 5%, transparent)), 0 4px 16px var(--admin-shadow, color-mix(in srgb, #2b303a 6%, transparent)), 0 0 0 1px var(--admin-border-subtle, color-mix(in srgb, #e2e7ef 40%, transparent)); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .chat-input__container[data-v-84e8d99e]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, transparent 100%); pointer-events: none; border-radius: 28px 28px 0 0; } .chat-input__container[data-v-84e8d99e]:focus-within { box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-500) 20%, transparent), 0 8px 32px color-mix(in srgb, var(--primary-600) 12%, transparent), 0 0 0 2px color-mix(in srgb, var(--primary-400) 35%, transparent); transform: translateY(-1px); } .chat-input__field-wrapper[data-v-84e8d99e] { flex: 1; display: flex; align-items: center; position: relative; z-index: 1; } .chat-input__field[data-v-84e8d99e] { width: 100%; border: none; background: transparent; font-size: 15px; line-height: 1.5; color: var(--admin-text-primary, #3c414c); outline: none; font-weight: 500; letter-spacing: -0.01em; } .chat-input__field[data-v-84e8d99e]::placeholder { color: var(--admin-text-muted, #b4bfce); font-weight: 400; } .chat-input__actions[data-v-84e8d99e] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; } .chat-input__ai-btn[data-v-84e8d99e] { flex-shrink: 0; } .chat-input__send-btn[data-v-84e8d99e] { flex-shrink: 0; } .chat-input__error[data-v-84e8d99e] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(135deg, color-mix(in srgb, #ff4d4d 10%, var(--admin-bg-surface, white)) 0%, color-mix(in srgb, #ff6464 8%, var(--admin-bg-surface, white)) 100%); border: 1px solid color-mix(in srgb, #ff6464 30%, transparent); border-radius: 14px; font-size: 13px; color: var(--danger-700); box-shadow: 0 2px 8px color-mix(in srgb, #ff4d4d 15%, transparent); position: relative; overflow: hidden; } .chat-input__error[data-v-84e8d99e]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #ff4d4d 0%, #ff6464 100%); } .chat-input__error-icon[data-v-84e8d99e] { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: linear-gradient(135deg, #ff4d4d 0%, #ff6464 100%); border-radius: 8px; flex-shrink: 0; color: white; box-shadow: 0 2px 6px color-mix(in srgb, #ff4d4d 30%, transparent); } .chat-input__error-text[data-v-84e8d99e] { flex: 1; line-height: 1.4; font-weight: 500; } .chat-input__error-close[data-v-84e8d99e] { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: color-mix(in srgb, #ff4d4d 10%, transparent); cursor: pointer; color: #eb1515; border-radius: 8px; transition: all 0.2s ease; flex-shrink: 0; } .chat-input__error-close[data-v-84e8d99e]:hover { background: color-mix(in srgb, #ff4d4d 20%, transparent); } .chat-input__offline[data-v-84e8d99e] { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; background: linear-gradient(135deg, color-mix(in srgb, #f97316 12%, var(--admin-bg-surface, white)) 0%, color-mix(in srgb, #fb923c 10%, var(--admin-bg-surface, white)) 100%); border-radius: 10px; font-size: 12px; color: var(--warning-700); font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, #f97316 15%, transparent); } .error-slide-enter-active[data-v-84e8d99e] { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .error-slide-leave-active[data-v-84e8d99e] { transition: all 0.25s ease; } .error-slide-enter-from[data-v-84e8d99e] { opacity: 0; transform: translateY(-12px) scale(0.92); } .error-slide-leave-to[data-v-84e8d99e] { opacity: 0; transform: translateY(-6px) scale(0.95); } .offline-fade-enter-active[data-v-84e8d99e] { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .offline-fade-leave-active[data-v-84e8d99e] { transition: all 0.25s ease; } .offline-fade-enter-from[data-v-84e8d99e], .offline-fade-leave-to[data-v-84e8d99e] { opacity: 0; transform: translateY(8px) scale(0.95); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-9c60fd1a]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-9c60fd1a] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-9c60fd1a] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-9c60fd1a]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-9c60fd1a], .theme-mode-light[data-v-9c60fd1a] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-9c60fd1a], .theme-mode-dark[data-v-9c60fd1a] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-9c60fd1a]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-9c60fd1a]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-9c60fd1a] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-9c60fd1a] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-9c60fd1a]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-9c60fd1a], input[disabled][data-v-9c60fd1a] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-9c60fd1a] { opacity: 0.9; } input[readonly][data-v-9c60fd1a] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-9c60fd1a] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-9c60fd1a]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-9c60fd1a]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-9c60fd1a]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-9c60fd1a] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-9c60fd1a]:nth-child(odd), .list-card-desktop__wrapper[data-v-9c60fd1a]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-9c60fd1a]:nth-child(even), .list-card-desktop__wrapper[data-v-9c60fd1a]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-9c60fd1a]:nth-child(odd), .listCardDesktopWrapper[data-v-9c60fd1a]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-9c60fd1a]:nth-child(even), .listCardDesktopWrapper[data-v-9c60fd1a]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-9c60fd1a] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-9c60fd1a] { cursor: pointer; } .card-layout--selectionnable[data-v-9c60fd1a]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-9c60fd1a] { cursor: auto; } .card-layout--drawer[data-v-9c60fd1a] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-9c60fd1a] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-9c60fd1a] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-9c60fd1a] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-9c60fd1a] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-9c60fd1a] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-9c60fd1a]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-9c60fd1a] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-9c60fd1a] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-9c60fd1a] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-9c60fd1a] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-9c60fd1a] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-9c60fd1a] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-9c60fd1a] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-9c60fd1a] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-9c60fd1a] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-9c60fd1a] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-9c60fd1a] { background-color: #eb1515; } .color-chip--dossiers[data-v-9c60fd1a] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-9c60fd1a] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-9c60fd1a] { background-color: #00a79b; } .color-chip--virements[data-v-9c60fd1a] { background-color: var(--secondary-400); } .color-chip--factures[data-v-9c60fd1a] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-9c60fd1a] { background-color: #eb1515; } .color-recherche-dossiers[data-v-9c60fd1a] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-9c60fd1a] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-9c60fd1a] { background-color: #00a79b; } .color-recherche-virements[data-v-9c60fd1a] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-9c60fd1a] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-9c60fd1a] { color: #00a79b; cursor: pointer; } .scrollable[data-v-9c60fd1a] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-9c60fd1a] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-9c60fd1a] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-9c60fd1a] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-9c60fd1a] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-9c60fd1a] { font-weight: 800; } .grid-cell--column[data-v-9c60fd1a] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-9c60fd1a] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-9c60fd1a] { fill: #00a79b; } .grid-cell--disabled[data-v-9c60fd1a] { color: #cccccc; } .grid-cell--disabled svg[data-v-9c60fd1a] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-9c60fd1a] { white-space: nowrap; } .grid-cell--danger svg[data-v-9c60fd1a] { fill: #eb1515; } .grid-cell--span-1[data-v-9c60fd1a] { grid-column: span 1; } .grid-cell--span-2[data-v-9c60fd1a] { grid-column: span 2; } .grid-cell--span-3[data-v-9c60fd1a] { grid-column: span 3; } .grid-cell--span-4[data-v-9c60fd1a] { grid-column: span 4; } .grid-cell--span-5[data-v-9c60fd1a] { grid-column: span 5; } .grid-cell--span-6[data-v-9c60fd1a] { grid-column: span 6; } .grid-cell--span-7[data-v-9c60fd1a] { grid-column: span 7; } .grid-cell--span-8[data-v-9c60fd1a] { grid-column: span 8; } .grid-cell--span-9[data-v-9c60fd1a] { grid-column: span 9; } .grid-cell--span-10[data-v-9c60fd1a] { grid-column: span 10; } .grid-cell--span-12[data-v-9c60fd1a] { grid-column: span 12; } .grid-cell--span-13[data-v-9c60fd1a] { grid-column: span 13; } .grid-cell--span-14[data-v-9c60fd1a] { grid-column: span 14; } .grid-cell--span-16[data-v-9c60fd1a] { grid-column: span 16; } .grid-cell--span-18[data-v-9c60fd1a] { grid-column: span 18; } .grid-cell--span-20[data-v-9c60fd1a] { grid-column: span 20; } .grid-cell--span-32[data-v-9c60fd1a] { grid-column: span 32; } .grid-cell--span-36[data-v-9c60fd1a] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-9c60fd1a] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-9c60fd1a] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-9c60fd1a] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-9c60fd1a] { justify-content: center !important; } .elem--bold span[data-v-9c60fd1a] { font-weight: 800; } .elem--column[data-v-9c60fd1a] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-9c60fd1a] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-9c60fd1a] { fill: #00a79b; } .elem--clickable[data-v-9c60fd1a]:hover { cursor: pointer; } .elem--disabled[data-v-9c60fd1a] { color: #cccccc; } .elem--disabled svg[data-v-9c60fd1a] { fill: #cccccc; } .elem--nowrap span[data-v-9c60fd1a] { white-space: nowrap; } .elem--danger svg[data-v-9c60fd1a] { fill: #eb1515; } .elem--span-1[data-v-9c60fd1a] { grid-column: span 1; } .elem--span-2[data-v-9c60fd1a] { grid-column: span 2; } .elem--span-3[data-v-9c60fd1a] { grid-column: span 3; } .elem--span-4[data-v-9c60fd1a] { grid-column: span 4; } .elem--span-5[data-v-9c60fd1a] { grid-column: span 5; } .elem--span-6[data-v-9c60fd1a] { grid-column: span 6; } .elem--span-7[data-v-9c60fd1a] { grid-column: span 7; } .elem--span-8[data-v-9c60fd1a] { grid-column: span 8; } .elem--span-9[data-v-9c60fd1a] { grid-column: span 9; } .elem--span-10[data-v-9c60fd1a] { grid-column: span 10; } .elem--span-12[data-v-9c60fd1a] { grid-column: span 12; } .elem--span-13[data-v-9c60fd1a] { grid-column: span 13; } .elem--span-14[data-v-9c60fd1a] { grid-column: span 14; } .elem--span-16[data-v-9c60fd1a] { grid-column: span 16; } .elem--span-18[data-v-9c60fd1a] { grid-column: span 18; } .elem--span-20[data-v-9c60fd1a] { grid-column: span 20; } .elem--span-32[data-v-9c60fd1a] { grid-column: span 32; } .elem--span-36[data-v-9c60fd1a] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-9c60fd1a] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-9c60fd1a] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-9c60fd1a]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-9c60fd1a] { display: flex; } /* flex-direction */ .flex-column[data-v-9c60fd1a] { flex-direction: column; } .flex-row[data-v-9c60fd1a] { flex-direction: row; } /* flex */ .flex-1[data-v-9c60fd1a] { flex: 1 !important; } .flex-2[data-v-9c60fd1a] { flex: 2; } .flex-3[data-v-9c60fd1a] { flex: 3; } .flex-3[data-v-9c60fd1a] { flex: 4; } .flex-5[data-v-9c60fd1a] { flex: 5; } .flex-auto[data-v-9c60fd1a] { flex: auto; } .flex-none[data-v-9c60fd1a] { flex: none; } .flex-content[data-v-9c60fd1a] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-9c60fd1a] { flex-wrap: wrap; } .flex-nowrap[data-v-9c60fd1a] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-9c60fd1a] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-9c60fd1a] { justify-content: flex-start; } .justify-content-end[data-v-9c60fd1a] { justify-content: flex-end; } .justify-content-baseline[data-v-9c60fd1a] { justify-content: baseline; } .justify-content-center[data-v-9c60fd1a] { justify-content: center; } .justify-content-space-between[data-v-9c60fd1a] { justify-content: space-between; } .justify-content-space-around[data-v-9c60fd1a] { justify-content: space-around; } .justify-content-space-evenly[data-v-9c60fd1a] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-9c60fd1a] { align-items: flex-start; } .align-items-flex-end[data-v-9c60fd1a] { align-items: flex-end; } .align-items-stretch[data-v-9c60fd1a] { align-items: stretch; } .align-items-baseline[data-v-9c60fd1a] { align-items: baseline; } .align-items-center[data-v-9c60fd1a] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-9c60fd1a] { align-content: flex-start; } .align-content-flex-end[data-v-9c60fd1a] { align-content: flex-end; } .align-content-center[data-v-9c60fd1a] { align-content: center; } .align-content-stretch[data-v-9c60fd1a] { align-content: stretch; } .align-content-space-between[data-v-9c60fd1a] { align-content: space-between; } .align-content-space-around[data-v-9c60fd1a] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-9c60fd1a] { align-self: flex-start; } .align-self-flex-end[data-v-9c60fd1a] { align-self: flex-end; } .align-self-stretch[data-v-9c60fd1a] { align-self: stretch; } .align-self-flex-baseline[data-v-9c60fd1a] { align-self: baseline; } .align-self-center[data-v-9c60fd1a] { align-self: center; } .align-self-auto[data-v-9c60fd1a] { align-self: auto; } .flex-gap-1[data-v-9c60fd1a] { gap: 4px; } .flex-gap-2[data-v-9c60fd1a] { gap: 8px; } .flex-gap-3[data-v-9c60fd1a] { gap: 12px; } .flex-gap-4[data-v-9c60fd1a] { gap: 16px; } .flex-gap-5[data-v-9c60fd1a] { gap: 20px; } .flex-gap-6[data-v-9c60fd1a] { gap: 24px; } .flex-gap-7[data-v-9c60fd1a] { gap: 28px; } .flex-gap-8[data-v-9c60fd1a] { gap: 32px; } .flex-gap-10[data-v-9c60fd1a] { gap: 40px; } .flex-gap-12[data-v-9c60fd1a] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-9c60fd1a] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-9c60fd1a] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-9c60fd1a] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-9c60fd1a] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-9c60fd1a] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-9c60fd1a] { display: none !important; } } .col-none[data-v-9c60fd1a] { display: none; } .col-auto[data-v-9c60fd1a] { grid-column: auto; } .col-1[data-v-9c60fd1a] { grid-column: span 1; } .col-2[data-v-9c60fd1a] { grid-column: span 2; } .col-3[data-v-9c60fd1a] { grid-column: span 3; } .col-4[data-v-9c60fd1a] { grid-column: span 4; } .col-5[data-v-9c60fd1a] { grid-column: span 5; } .col-6[data-v-9c60fd1a] { grid-column: span 6; } .col-7[data-v-9c60fd1a] { grid-column: span 7; } .col-8[data-v-9c60fd1a] { grid-column: span 8; } .col-9[data-v-9c60fd1a] { grid-column: span 9; } .col-10[data-v-9c60fd1a] { grid-column: span 10; } .col-12[data-v-9c60fd1a] { grid-column: span 12; } .col-13[data-v-9c60fd1a] { grid-column: span 13; } .col-14[data-v-9c60fd1a] { grid-column: span 14; } .col-15[data-v-9c60fd1a] { grid-column: span 15; } .col-16[data-v-9c60fd1a] { grid-column: span 16; } .col-18[data-v-9c60fd1a] { grid-column: span 18; } .col-20[data-v-9c60fd1a] { grid-column: span 20; } .col-22[data-v-9c60fd1a] { grid-column: span 22; } .col-24[data-v-9c60fd1a] { grid-column: span 24; } .col-26[data-v-9c60fd1a] { grid-column: span 26; } .col-27[data-v-9c60fd1a] { grid-column: span 27; } .col-28[data-v-9c60fd1a] { grid-column: span 28; } .col-30[data-v-9c60fd1a] { grid-column: span 30; } .col-36[data-v-9c60fd1a] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-9c60fd1a] { display: none; } .col-md-36[data-v-9c60fd1a] { grid-column: span 36; } .col-md-28[data-v-9c60fd1a] { grid-column: span 28; } .col-md-27[data-v-9c60fd1a] { grid-column: span 27; } .col-md-24[data-v-9c60fd1a] { grid-column: span 24; } .col-md-22[data-v-9c60fd1a] { grid-column: span 22; } .col-md-20[data-v-9c60fd1a] { grid-column: span 20; } .col-md-19[data-v-9c60fd1a] { grid-column: span 19; } .col-md-18[data-v-9c60fd1a] { grid-column: span 18; } .col-md-17[data-v-9c60fd1a] { grid-column: span 17; } .col-md-16[data-v-9c60fd1a] { grid-column: span 16; } .col-md-15[data-v-9c60fd1a] { grid-column: span 15; } .col-md-14[data-v-9c60fd1a] { grid-column: span 14; } .col-md-13[data-v-9c60fd1a] { grid-column: span 13; } .col-md-12[data-v-9c60fd1a] { grid-column: span 12; } .col-md-10[data-v-9c60fd1a] { grid-column: span 10; } .col-md-9[data-v-9c60fd1a] { grid-column: span 9; } .col-md-8[data-v-9c60fd1a] { grid-column: span 8; } .col-md-6[data-v-9c60fd1a] { grid-column: span 6; } .col-md-5[data-v-9c60fd1a] { grid-column: span 5; } .col-md-4[data-v-9c60fd1a] { grid-column: span 4; } .col-md-3[data-v-9c60fd1a] { grid-column: span 3; } .col-md-2[data-v-9c60fd1a] { grid-column: span 2; } .col-md-1[data-v-9c60fd1a] { grid-column: span 1; } .col-md-auto[data-v-9c60fd1a] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-9c60fd1a] { display: none; } .col-sm-36[data-v-9c60fd1a] { grid-column: span 36; } .col-sm-32[data-v-9c60fd1a] { grid-column: span 32; } .col-sm-28[data-v-9c60fd1a] { grid-column: span 28; } .col-sm-27[data-v-9c60fd1a] { grid-column: span 27; } .col-sm-24[data-v-9c60fd1a] { grid-column: span 24; } .col-sm-22[data-v-9c60fd1a] { grid-column: span 22; } .col-sm-20[data-v-9c60fd1a] { grid-column: span 20; } .col-sm-18[data-v-9c60fd1a] { grid-column: span 18; } .col-sm-16[data-v-9c60fd1a] { grid-column: span 16; } .col-sm-15[data-v-9c60fd1a] { grid-column: span 15; } .col-sm-14[data-v-9c60fd1a] { grid-column: span 14; } .col-sm-13[data-v-9c60fd1a] { grid-column: span 12; } .col-sm-12[data-v-9c60fd1a] { grid-column: span 12; } .col-sm-10[data-v-9c60fd1a] { grid-column: span 10; } .col-sm-9[data-v-9c60fd1a] { grid-column: span 8; } .col-sm-8[data-v-9c60fd1a] { grid-column: span 8; } .col-sm-6[data-v-9c60fd1a] { grid-column: span 6; } .col-sm-4[data-v-9c60fd1a] { grid-column: span 4; } .col-sm-auto[data-v-9c60fd1a] { grid-column: auto; } } .fade-enter-active[data-v-9c60fd1a] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-9c60fd1a] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-9c60fd1a], .fade-leave-to[data-v-9c60fd1a] { opacity: 0; } .chat-message[data-v-9c60fd1a] { display: flex; align-items: flex-end; gap: 10px; padding: 3px 0; animation: message-appear-9c60fd1a 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .chat-message--mine[data-v-9c60fd1a] { flex-direction: row-reverse; } .chat-message--grouped[data-v-9c60fd1a] { padding-top: 1px; } .chat-message__avatar-wrapper[data-v-9c60fd1a] { width: 32px; flex-shrink: 0; } .chat-message__avatar[data-v-9c60fd1a] { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-600) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; } .chat-message__avatar-img[data-v-9c60fd1a] { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .chat-message__avatar[data-v-9c60fd1a]::before { content: ''; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--primary-400) 40%, transparent); opacity: 0; animation: pulse-ring-9c60fd1a 2s ease-out infinite; } .chat-message__content-wrapper[data-v-9c60fd1a] { display: flex; flex-direction: column; max-width: 68%; min-width: 90px; } .chat-message--mine .chat-message__content-wrapper[data-v-9c60fd1a] { align-items: flex-end; } .chat-message__bubble[data-v-9c60fd1a] { position: relative; padding: 12px 16px; border-radius: 20px; background: var(--admin-bg-card, white); box-shadow: 0 1px 3px var(--admin-shadow, color-mix(in srgb, #2b303a 5%, transparent)), 0 4px 12px var(--admin-shadow, color-mix(in srgb, #2b303a 6%, transparent)), 0 8px 24px var(--admin-shadow, color-mix(in srgb, #2b303a 4%, transparent)); border: 1px solid var(--admin-border-subtle, color-mix(in srgb, #e2e7ef 50%, transparent)); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } .chat-message__bubble[data-v-9c60fd1a]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 100%); border-radius: 20px 20px 0 0; pointer-events: none; } .chat-message__bubble[data-v-9c60fd1a]:hover { transform: translateY(-2px); box-shadow: 0 2px 4px var(--admin-shadow-hover, color-mix(in srgb, #2b303a 6%, transparent)), 0 8px 20px var(--admin-shadow-hover, color-mix(in srgb, #2b303a 8%, transparent)), 0 16px 32px var(--admin-shadow-hover, color-mix(in srgb, #2b303a 6%, transparent)); } .chat-message--mine .chat-message__bubble[data-v-9c60fd1a] { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); border: none; border-bottom-right-radius: 8px; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-600) 30%, transparent), 0 8px 24px color-mix(in srgb, var(--primary-700) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .chat-message--mine .chat-message__bubble[data-v-9c60fd1a]::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%); } .chat-message--mine .chat-message__bubble[data-v-9c60fd1a]:hover { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-600) 40%, transparent), 0 12px 32px color-mix(in srgb, var(--primary-700) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .chat-message--mine .chat-message__bubble--read[data-v-9c60fd1a] { background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%); } .chat-message:not(.chat-message--mine) .chat-message__bubble[data-v-9c60fd1a] { border-bottom-left-radius: 8px; } .chat-message--grouped:not(.chat-message--mine) .chat-message__bubble[data-v-9c60fd1a] { border-bottom-left-radius: 20px; border-top-left-radius: 8px; } .chat-message--grouped.chat-message--mine .chat-message__bubble[data-v-9c60fd1a] { border-bottom-right-radius: 20px; border-top-right-radius: 8px; } .chat-message__text[data-v-9c60fd1a] { margin: 0; font-size: 14px; line-height: 1.5; color: var(--admin-text-primary, #3c414c); white-space: pre-wrap; word-break: break-word; position: relative; z-index: 1; letter-spacing: -0.01em; } .chat-message--mine .chat-message__text[data-v-9c60fd1a] { color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .chat-message__meta[data-v-9c60fd1a] { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; position: relative; z-index: 1; } .chat-message__time[data-v-9c60fd1a] { font-size: 11px; color: var(--admin-text-muted, #b4bfce); font-weight: 600; letter-spacing: 0.02em; } .chat-message--mine .chat-message__time[data-v-9c60fd1a] { color: rgba(255, 255, 255, 0.75); } .chat-message__status[data-v-9c60fd1a] { display: flex; align-items: center; } .chat-message__check[data-v-9c60fd1a] { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.5); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .chat-message__check--read[data-v-9c60fd1a] { color: #4ade80; filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.6)); animation: check-pop-9c60fd1a 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .chat-message__seen[data-v-9c60fd1a] { font-size: 10px; color: var(--admin-text-muted, #b4bfce); margin-top: 4px; padding-right: 4px; font-weight: 500; display: flex; align-items: center; gap: 4px; } .chat-message__seen[data-v-9c60fd1a]::before { content: ''; width: 4px; height: 4px; background: var(--success-400); border-radius: 50%; animation: pulse-dot-9c60fd1a 2s ease-in-out infinite; } @keyframes message-appear-9c60fd1a { 0% { opacity: 0; transform: translateY(16px) scale(0.92); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulse-ring-9c60fd1a { 0% { opacity: 0.6; } 100% { opacity: 0; } } @keyframes check-pop-9c60fd1a { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes pulse-dot-9c60fd1a { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .status-pop-enter-active[data-v-9c60fd1a] { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .status-pop-leave-active[data-v-9c60fd1a] { transition: all 0.2s ease; } .status-pop-enter-from[data-v-9c60fd1a], .status-pop-leave-to[data-v-9c60fd1a] { opacity: 0; transform: scale(0.3); } .seen-fade-enter-active[data-v-9c60fd1a] { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; } .seen-fade-leave-active[data-v-9c60fd1a] { transition: all 0.2s ease; } .seen-fade-enter-from[data-v-9c60fd1a], .seen-fade-leave-to[data-v-9c60fd1a] { opacity: 0; transform: translateY(-6px); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-67d3aed6]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-67d3aed6] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-67d3aed6] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-67d3aed6]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-67d3aed6], .theme-mode-light[data-v-67d3aed6] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-67d3aed6], .theme-mode-dark[data-v-67d3aed6] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-67d3aed6]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-67d3aed6]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-67d3aed6] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-67d3aed6] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-67d3aed6]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-67d3aed6], input[disabled][data-v-67d3aed6] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-67d3aed6] { opacity: 0.9; } input[readonly][data-v-67d3aed6] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-67d3aed6] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-67d3aed6]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-67d3aed6]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-67d3aed6]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-67d3aed6] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-67d3aed6]:nth-child(odd), .list-card-desktop__wrapper[data-v-67d3aed6]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-67d3aed6]:nth-child(even), .list-card-desktop__wrapper[data-v-67d3aed6]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-67d3aed6]:nth-child(odd), .listCardDesktopWrapper[data-v-67d3aed6]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-67d3aed6]:nth-child(even), .listCardDesktopWrapper[data-v-67d3aed6]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-67d3aed6] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-67d3aed6] { cursor: pointer; } .card-layout--selectionnable[data-v-67d3aed6]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-67d3aed6] { cursor: auto; } .card-layout--drawer[data-v-67d3aed6] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-67d3aed6] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-67d3aed6] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-67d3aed6] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-67d3aed6] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-67d3aed6] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-67d3aed6]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-67d3aed6] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-67d3aed6] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-67d3aed6] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-67d3aed6] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-67d3aed6] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-67d3aed6] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-67d3aed6] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-67d3aed6] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-67d3aed6] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-67d3aed6] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-67d3aed6] { background-color: #eb1515; } .color-chip--dossiers[data-v-67d3aed6] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-67d3aed6] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-67d3aed6] { background-color: #00a79b; } .color-chip--virements[data-v-67d3aed6] { background-color: var(--secondary-400); } .color-chip--factures[data-v-67d3aed6] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-67d3aed6] { background-color: #eb1515; } .color-recherche-dossiers[data-v-67d3aed6] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-67d3aed6] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-67d3aed6] { background-color: #00a79b; } .color-recherche-virements[data-v-67d3aed6] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-67d3aed6] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-67d3aed6] { color: #00a79b; cursor: pointer; } .scrollable[data-v-67d3aed6] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-67d3aed6] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-67d3aed6] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-67d3aed6] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-67d3aed6] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-67d3aed6] { font-weight: 800; } .grid-cell--column[data-v-67d3aed6] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-67d3aed6] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-67d3aed6] { fill: #00a79b; } .grid-cell--disabled[data-v-67d3aed6] { color: #cccccc; } .grid-cell--disabled svg[data-v-67d3aed6] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-67d3aed6] { white-space: nowrap; } .grid-cell--danger svg[data-v-67d3aed6] { fill: #eb1515; } .grid-cell--span-1[data-v-67d3aed6] { grid-column: span 1; } .grid-cell--span-2[data-v-67d3aed6] { grid-column: span 2; } .grid-cell--span-3[data-v-67d3aed6] { grid-column: span 3; } .grid-cell--span-4[data-v-67d3aed6] { grid-column: span 4; } .grid-cell--span-5[data-v-67d3aed6] { grid-column: span 5; } .grid-cell--span-6[data-v-67d3aed6] { grid-column: span 6; } .grid-cell--span-7[data-v-67d3aed6] { grid-column: span 7; } .grid-cell--span-8[data-v-67d3aed6] { grid-column: span 8; } .grid-cell--span-9[data-v-67d3aed6] { grid-column: span 9; } .grid-cell--span-10[data-v-67d3aed6] { grid-column: span 10; } .grid-cell--span-12[data-v-67d3aed6] { grid-column: span 12; } .grid-cell--span-13[data-v-67d3aed6] { grid-column: span 13; } .grid-cell--span-14[data-v-67d3aed6] { grid-column: span 14; } .grid-cell--span-16[data-v-67d3aed6] { grid-column: span 16; } .grid-cell--span-18[data-v-67d3aed6] { grid-column: span 18; } .grid-cell--span-20[data-v-67d3aed6] { grid-column: span 20; } .grid-cell--span-32[data-v-67d3aed6] { grid-column: span 32; } .grid-cell--span-36[data-v-67d3aed6] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-67d3aed6] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-67d3aed6] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-67d3aed6] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-67d3aed6] { justify-content: center !important; } .elem--bold span[data-v-67d3aed6] { font-weight: 800; } .elem--column[data-v-67d3aed6] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-67d3aed6] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-67d3aed6] { fill: #00a79b; } .elem--clickable[data-v-67d3aed6]:hover { cursor: pointer; } .elem--disabled[data-v-67d3aed6] { color: #cccccc; } .elem--disabled svg[data-v-67d3aed6] { fill: #cccccc; } .elem--nowrap span[data-v-67d3aed6] { white-space: nowrap; } .elem--danger svg[data-v-67d3aed6] { fill: #eb1515; } .elem--span-1[data-v-67d3aed6] { grid-column: span 1; } .elem--span-2[data-v-67d3aed6] { grid-column: span 2; } .elem--span-3[data-v-67d3aed6] { grid-column: span 3; } .elem--span-4[data-v-67d3aed6] { grid-column: span 4; } .elem--span-5[data-v-67d3aed6] { grid-column: span 5; } .elem--span-6[data-v-67d3aed6] { grid-column: span 6; } .elem--span-7[data-v-67d3aed6] { grid-column: span 7; } .elem--span-8[data-v-67d3aed6] { grid-column: span 8; } .elem--span-9[data-v-67d3aed6] { grid-column: span 9; } .elem--span-10[data-v-67d3aed6] { grid-column: span 10; } .elem--span-12[data-v-67d3aed6] { grid-column: span 12; } .elem--span-13[data-v-67d3aed6] { grid-column: span 13; } .elem--span-14[data-v-67d3aed6] { grid-column: span 14; } .elem--span-16[data-v-67d3aed6] { grid-column: span 16; } .elem--span-18[data-v-67d3aed6] { grid-column: span 18; } .elem--span-20[data-v-67d3aed6] { grid-column: span 20; } .elem--span-32[data-v-67d3aed6] { grid-column: span 32; } .elem--span-36[data-v-67d3aed6] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-67d3aed6] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-67d3aed6] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-67d3aed6]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-67d3aed6] { display: flex; } /* flex-direction */ .flex-column[data-v-67d3aed6] { flex-direction: column; } .flex-row[data-v-67d3aed6] { flex-direction: row; } /* flex */ .flex-1[data-v-67d3aed6] { flex: 1 !important; } .flex-2[data-v-67d3aed6] { flex: 2; } .flex-3[data-v-67d3aed6] { flex: 3; } .flex-3[data-v-67d3aed6] { flex: 4; } .flex-5[data-v-67d3aed6] { flex: 5; } .flex-auto[data-v-67d3aed6] { flex: auto; } .flex-none[data-v-67d3aed6] { flex: none; } .flex-content[data-v-67d3aed6] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-67d3aed6] { flex-wrap: wrap; } .flex-nowrap[data-v-67d3aed6] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-67d3aed6] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-67d3aed6] { justify-content: flex-start; } .justify-content-end[data-v-67d3aed6] { justify-content: flex-end; } .justify-content-baseline[data-v-67d3aed6] { justify-content: baseline; } .justify-content-center[data-v-67d3aed6] { justify-content: center; } .justify-content-space-between[data-v-67d3aed6] { justify-content: space-between; } .justify-content-space-around[data-v-67d3aed6] { justify-content: space-around; } .justify-content-space-evenly[data-v-67d3aed6] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-67d3aed6] { align-items: flex-start; } .align-items-flex-end[data-v-67d3aed6] { align-items: flex-end; } .align-items-stretch[data-v-67d3aed6] { align-items: stretch; } .align-items-baseline[data-v-67d3aed6] { align-items: baseline; } .align-items-center[data-v-67d3aed6] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-67d3aed6] { align-content: flex-start; } .align-content-flex-end[data-v-67d3aed6] { align-content: flex-end; } .align-content-center[data-v-67d3aed6] { align-content: center; } .align-content-stretch[data-v-67d3aed6] { align-content: stretch; } .align-content-space-between[data-v-67d3aed6] { align-content: space-between; } .align-content-space-around[data-v-67d3aed6] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-67d3aed6] { align-self: flex-start; } .align-self-flex-end[data-v-67d3aed6] { align-self: flex-end; } .align-self-stretch[data-v-67d3aed6] { align-self: stretch; } .align-self-flex-baseline[data-v-67d3aed6] { align-self: baseline; } .align-self-center[data-v-67d3aed6] { align-self: center; } .align-self-auto[data-v-67d3aed6] { align-self: auto; } .flex-gap-1[data-v-67d3aed6] { gap: 4px; } .flex-gap-2[data-v-67d3aed6] { gap: 8px; } .flex-gap-3[data-v-67d3aed6] { gap: 12px; } .flex-gap-4[data-v-67d3aed6] { gap: 16px; } .flex-gap-5[data-v-67d3aed6] { gap: 20px; } .flex-gap-6[data-v-67d3aed6] { gap: 24px; } .flex-gap-7[data-v-67d3aed6] { gap: 28px; } .flex-gap-8[data-v-67d3aed6] { gap: 32px; } .flex-gap-10[data-v-67d3aed6] { gap: 40px; } .flex-gap-12[data-v-67d3aed6] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-67d3aed6] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-67d3aed6] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-67d3aed6] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-67d3aed6] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-67d3aed6] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-67d3aed6] { display: none !important; } } .col-none[data-v-67d3aed6] { display: none; } .col-auto[data-v-67d3aed6] { grid-column: auto; } .col-1[data-v-67d3aed6] { grid-column: span 1; } .col-2[data-v-67d3aed6] { grid-column: span 2; } .col-3[data-v-67d3aed6] { grid-column: span 3; } .col-4[data-v-67d3aed6] { grid-column: span 4; } .col-5[data-v-67d3aed6] { grid-column: span 5; } .col-6[data-v-67d3aed6] { grid-column: span 6; } .col-7[data-v-67d3aed6] { grid-column: span 7; } .col-8[data-v-67d3aed6] { grid-column: span 8; } .col-9[data-v-67d3aed6] { grid-column: span 9; } .col-10[data-v-67d3aed6] { grid-column: span 10; } .col-12[data-v-67d3aed6] { grid-column: span 12; } .col-13[data-v-67d3aed6] { grid-column: span 13; } .col-14[data-v-67d3aed6] { grid-column: span 14; } .col-15[data-v-67d3aed6] { grid-column: span 15; } .col-16[data-v-67d3aed6] { grid-column: span 16; } .col-18[data-v-67d3aed6] { grid-column: span 18; } .col-20[data-v-67d3aed6] { grid-column: span 20; } .col-22[data-v-67d3aed6] { grid-column: span 22; } .col-24[data-v-67d3aed6] { grid-column: span 24; } .col-26[data-v-67d3aed6] { grid-column: span 26; } .col-27[data-v-67d3aed6] { grid-column: span 27; } .col-28[data-v-67d3aed6] { grid-column: span 28; } .col-30[data-v-67d3aed6] { grid-column: span 30; } .col-36[data-v-67d3aed6] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-67d3aed6] { display: none; } .col-md-36[data-v-67d3aed6] { grid-column: span 36; } .col-md-28[data-v-67d3aed6] { grid-column: span 28; } .col-md-27[data-v-67d3aed6] { grid-column: span 27; } .col-md-24[data-v-67d3aed6] { grid-column: span 24; } .col-md-22[data-v-67d3aed6] { grid-column: span 22; } .col-md-20[data-v-67d3aed6] { grid-column: span 20; } .col-md-19[data-v-67d3aed6] { grid-column: span 19; } .col-md-18[data-v-67d3aed6] { grid-column: span 18; } .col-md-17[data-v-67d3aed6] { grid-column: span 17; } .col-md-16[data-v-67d3aed6] { grid-column: span 16; } .col-md-15[data-v-67d3aed6] { grid-column: span 15; } .col-md-14[data-v-67d3aed6] { grid-column: span 14; } .col-md-13[data-v-67d3aed6] { grid-column: span 13; } .col-md-12[data-v-67d3aed6] { grid-column: span 12; } .col-md-10[data-v-67d3aed6] { grid-column: span 10; } .col-md-9[data-v-67d3aed6] { grid-column: span 9; } .col-md-8[data-v-67d3aed6] { grid-column: span 8; } .col-md-6[data-v-67d3aed6] { grid-column: span 6; } .col-md-5[data-v-67d3aed6] { grid-column: span 5; } .col-md-4[data-v-67d3aed6] { grid-column: span 4; } .col-md-3[data-v-67d3aed6] { grid-column: span 3; } .col-md-2[data-v-67d3aed6] { grid-column: span 2; } .col-md-1[data-v-67d3aed6] { grid-column: span 1; } .col-md-auto[data-v-67d3aed6] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-67d3aed6] { display: none; } .col-sm-36[data-v-67d3aed6] { grid-column: span 36; } .col-sm-32[data-v-67d3aed6] { grid-column: span 32; } .col-sm-28[data-v-67d3aed6] { grid-column: span 28; } .col-sm-27[data-v-67d3aed6] { grid-column: span 27; } .col-sm-24[data-v-67d3aed6] { grid-column: span 24; } .col-sm-22[data-v-67d3aed6] { grid-column: span 22; } .col-sm-20[data-v-67d3aed6] { grid-column: span 20; } .col-sm-18[data-v-67d3aed6] { grid-column: span 18; } .col-sm-16[data-v-67d3aed6] { grid-column: span 16; } .col-sm-15[data-v-67d3aed6] { grid-column: span 15; } .col-sm-14[data-v-67d3aed6] { grid-column: span 14; } .col-sm-13[data-v-67d3aed6] { grid-column: span 12; } .col-sm-12[data-v-67d3aed6] { grid-column: span 12; } .col-sm-10[data-v-67d3aed6] { grid-column: span 10; } .col-sm-9[data-v-67d3aed6] { grid-column: span 8; } .col-sm-8[data-v-67d3aed6] { grid-column: span 8; } .col-sm-6[data-v-67d3aed6] { grid-column: span 6; } .col-sm-4[data-v-67d3aed6] { grid-column: span 4; } .col-sm-auto[data-v-67d3aed6] { grid-column: auto; } } .fade-enter-active[data-v-67d3aed6] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-67d3aed6] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-67d3aed6], .fade-leave-to[data-v-67d3aed6] { opacity: 0; } .typing-indicator[data-v-67d3aed6] { display: flex; align-items: flex-end; gap: 8px; padding: 4px 0; } .typing-indicator__avatar[data-v-67d3aed6] { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-600) 30%, transparent); animation: avatar-pulse-67d3aed6 2s ease-in-out infinite; } .typing-indicator__bubble[data-v-67d3aed6] { background: var(--admin-bg-card, white); border-radius: 18px; border-bottom-left-radius: 6px; padding: 12px 16px; box-shadow: 0 1px 2px var(--admin-shadow, color-mix(in srgb, #2b303a 6%, transparent)), 0 2px 8px var(--admin-shadow, color-mix(in srgb, #2b303a 4%, transparent)); border: 1px solid var(--admin-border-subtle, color-mix(in srgb, #e2e7ef 60%, transparent)); } .typing-indicator__dots[data-v-67d3aed6] { display: flex; align-items: center; gap: 4px; height: 16px; } .typing-indicator__dot[data-v-67d3aed6] { width: 8px; height: 8px; background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%); border-radius: 50%; animation: dot-bounce-67d3aed6 1.4s ease-in-out infinite; } .typing-indicator__dot[data-v-67d3aed6]:nth-child(1) { animation-delay: 0s; } .typing-indicator__dot[data-v-67d3aed6]:nth-child(2) { animation-delay: 0.2s; } .typing-indicator__dot[data-v-67d3aed6]:nth-child(3) { animation-delay: 0.4s; } @keyframes dot-bounce-67d3aed6 { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } } @keyframes avatar-pulse-67d3aed6 { 0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-600) 30%, transparent); } 50% { box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-600) 30%, transparent), 0 0 0 4px color-mix(in srgb, var(--primary-400) 20%, transparent); } } .typing-slide-enter-active[data-v-67d3aed6] { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .typing-slide-leave-active[data-v-67d3aed6] { transition: all 0.2s ease; } .typing-slide-enter-from[data-v-67d3aed6] { opacity: 0; transform: translateX(-20px) scale(0.9); } .typing-slide-leave-to[data-v-67d3aed6] { opacity: 0; transform: translateY(10px) scale(0.9); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-7d7550a8]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-7d7550a8] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-7d7550a8] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-7d7550a8]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-7d7550a8], .theme-mode-light[data-v-7d7550a8] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-7d7550a8], .theme-mode-dark[data-v-7d7550a8] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-7d7550a8]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-7d7550a8]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-7d7550a8] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-7d7550a8] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-7d7550a8]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-7d7550a8], input[disabled][data-v-7d7550a8] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-7d7550a8] { opacity: 0.9; } input[readonly][data-v-7d7550a8] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-7d7550a8] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-7d7550a8]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-7d7550a8]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-7d7550a8]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-7d7550a8] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-7d7550a8]:nth-child(odd), .list-card-desktop__wrapper[data-v-7d7550a8]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-7d7550a8]:nth-child(even), .list-card-desktop__wrapper[data-v-7d7550a8]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-7d7550a8]:nth-child(odd), .listCardDesktopWrapper[data-v-7d7550a8]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-7d7550a8]:nth-child(even), .listCardDesktopWrapper[data-v-7d7550a8]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-7d7550a8] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-7d7550a8] { cursor: pointer; } .card-layout--selectionnable[data-v-7d7550a8]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-7d7550a8] { cursor: auto; } .card-layout--drawer[data-v-7d7550a8] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-7d7550a8] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-7d7550a8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-7d7550a8] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-7d7550a8] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-7d7550a8] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-7d7550a8]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-7d7550a8] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-7d7550a8] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-7d7550a8] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-7d7550a8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-7d7550a8] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-7d7550a8] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-7d7550a8] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-7d7550a8] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-7d7550a8] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-7d7550a8] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-7d7550a8] { background-color: #eb1515; } .color-chip--dossiers[data-v-7d7550a8] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-7d7550a8] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-7d7550a8] { background-color: #00a79b; } .color-chip--virements[data-v-7d7550a8] { background-color: var(--secondary-400); } .color-chip--factures[data-v-7d7550a8] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-7d7550a8] { background-color: #eb1515; } .color-recherche-dossiers[data-v-7d7550a8] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-7d7550a8] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-7d7550a8] { background-color: #00a79b; } .color-recherche-virements[data-v-7d7550a8] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-7d7550a8] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-7d7550a8] { color: #00a79b; cursor: pointer; } .scrollable[data-v-7d7550a8] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-7d7550a8] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-7d7550a8] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-7d7550a8] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-7d7550a8] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-7d7550a8] { font-weight: 800; } .grid-cell--column[data-v-7d7550a8] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-7d7550a8] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-7d7550a8] { fill: #00a79b; } .grid-cell--disabled[data-v-7d7550a8] { color: #cccccc; } .grid-cell--disabled svg[data-v-7d7550a8] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-7d7550a8] { white-space: nowrap; } .grid-cell--danger svg[data-v-7d7550a8] { fill: #eb1515; } .grid-cell--span-1[data-v-7d7550a8] { grid-column: span 1; } .grid-cell--span-2[data-v-7d7550a8] { grid-column: span 2; } .grid-cell--span-3[data-v-7d7550a8] { grid-column: span 3; } .grid-cell--span-4[data-v-7d7550a8] { grid-column: span 4; } .grid-cell--span-5[data-v-7d7550a8] { grid-column: span 5; } .grid-cell--span-6[data-v-7d7550a8] { grid-column: span 6; } .grid-cell--span-7[data-v-7d7550a8] { grid-column: span 7; } .grid-cell--span-8[data-v-7d7550a8] { grid-column: span 8; } .grid-cell--span-9[data-v-7d7550a8] { grid-column: span 9; } .grid-cell--span-10[data-v-7d7550a8] { grid-column: span 10; } .grid-cell--span-12[data-v-7d7550a8] { grid-column: span 12; } .grid-cell--span-13[data-v-7d7550a8] { grid-column: span 13; } .grid-cell--span-14[data-v-7d7550a8] { grid-column: span 14; } .grid-cell--span-16[data-v-7d7550a8] { grid-column: span 16; } .grid-cell--span-18[data-v-7d7550a8] { grid-column: span 18; } .grid-cell--span-20[data-v-7d7550a8] { grid-column: span 20; } .grid-cell--span-32[data-v-7d7550a8] { grid-column: span 32; } .grid-cell--span-36[data-v-7d7550a8] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-7d7550a8] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-7d7550a8] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-7d7550a8] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-7d7550a8] { justify-content: center !important; } .elem--bold span[data-v-7d7550a8] { font-weight: 800; } .elem--column[data-v-7d7550a8] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-7d7550a8] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-7d7550a8] { fill: #00a79b; } .elem--clickable[data-v-7d7550a8]:hover { cursor: pointer; } .elem--disabled[data-v-7d7550a8] { color: #cccccc; } .elem--disabled svg[data-v-7d7550a8] { fill: #cccccc; } .elem--nowrap span[data-v-7d7550a8] { white-space: nowrap; } .elem--danger svg[data-v-7d7550a8] { fill: #eb1515; } .elem--span-1[data-v-7d7550a8] { grid-column: span 1; } .elem--span-2[data-v-7d7550a8] { grid-column: span 2; } .elem--span-3[data-v-7d7550a8] { grid-column: span 3; } .elem--span-4[data-v-7d7550a8] { grid-column: span 4; } .elem--span-5[data-v-7d7550a8] { grid-column: span 5; } .elem--span-6[data-v-7d7550a8] { grid-column: span 6; } .elem--span-7[data-v-7d7550a8] { grid-column: span 7; } .elem--span-8[data-v-7d7550a8] { grid-column: span 8; } .elem--span-9[data-v-7d7550a8] { grid-column: span 9; } .elem--span-10[data-v-7d7550a8] { grid-column: span 10; } .elem--span-12[data-v-7d7550a8] { grid-column: span 12; } .elem--span-13[data-v-7d7550a8] { grid-column: span 13; } .elem--span-14[data-v-7d7550a8] { grid-column: span 14; } .elem--span-16[data-v-7d7550a8] { grid-column: span 16; } .elem--span-18[data-v-7d7550a8] { grid-column: span 18; } .elem--span-20[data-v-7d7550a8] { grid-column: span 20; } .elem--span-32[data-v-7d7550a8] { grid-column: span 32; } .elem--span-36[data-v-7d7550a8] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-7d7550a8] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-7d7550a8] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-7d7550a8]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-7d7550a8] { display: flex; } /* flex-direction */ .flex-column[data-v-7d7550a8] { flex-direction: column; } .flex-row[data-v-7d7550a8] { flex-direction: row; } /* flex */ .flex-1[data-v-7d7550a8] { flex: 1 !important; } .flex-2[data-v-7d7550a8] { flex: 2; } .flex-3[data-v-7d7550a8] { flex: 3; } .flex-3[data-v-7d7550a8] { flex: 4; } .flex-5[data-v-7d7550a8] { flex: 5; } .flex-auto[data-v-7d7550a8] { flex: auto; } .flex-none[data-v-7d7550a8] { flex: none; } .flex-content[data-v-7d7550a8] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-7d7550a8] { flex-wrap: wrap; } .flex-nowrap[data-v-7d7550a8] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-7d7550a8] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-7d7550a8] { justify-content: flex-start; } .justify-content-end[data-v-7d7550a8] { justify-content: flex-end; } .justify-content-baseline[data-v-7d7550a8] { justify-content: baseline; } .justify-content-center[data-v-7d7550a8] { justify-content: center; } .justify-content-space-between[data-v-7d7550a8] { justify-content: space-between; } .justify-content-space-around[data-v-7d7550a8] { justify-content: space-around; } .justify-content-space-evenly[data-v-7d7550a8] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-7d7550a8] { align-items: flex-start; } .align-items-flex-end[data-v-7d7550a8] { align-items: flex-end; } .align-items-stretch[data-v-7d7550a8] { align-items: stretch; } .align-items-baseline[data-v-7d7550a8] { align-items: baseline; } .align-items-center[data-v-7d7550a8] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-7d7550a8] { align-content: flex-start; } .align-content-flex-end[data-v-7d7550a8] { align-content: flex-end; } .align-content-center[data-v-7d7550a8] { align-content: center; } .align-content-stretch[data-v-7d7550a8] { align-content: stretch; } .align-content-space-between[data-v-7d7550a8] { align-content: space-between; } .align-content-space-around[data-v-7d7550a8] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-7d7550a8] { align-self: flex-start; } .align-self-flex-end[data-v-7d7550a8] { align-self: flex-end; } .align-self-stretch[data-v-7d7550a8] { align-self: stretch; } .align-self-flex-baseline[data-v-7d7550a8] { align-self: baseline; } .align-self-center[data-v-7d7550a8] { align-self: center; } .align-self-auto[data-v-7d7550a8] { align-self: auto; } .flex-gap-1[data-v-7d7550a8] { gap: 4px; } .flex-gap-2[data-v-7d7550a8] { gap: 8px; } .flex-gap-3[data-v-7d7550a8] { gap: 12px; } .flex-gap-4[data-v-7d7550a8] { gap: 16px; } .flex-gap-5[data-v-7d7550a8] { gap: 20px; } .flex-gap-6[data-v-7d7550a8] { gap: 24px; } .flex-gap-7[data-v-7d7550a8] { gap: 28px; } .flex-gap-8[data-v-7d7550a8] { gap: 32px; } .flex-gap-10[data-v-7d7550a8] { gap: 40px; } .flex-gap-12[data-v-7d7550a8] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-7d7550a8] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-7d7550a8] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-7d7550a8] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-7d7550a8] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-7d7550a8] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-7d7550a8] { display: none !important; } } .col-none[data-v-7d7550a8] { display: none; } .col-auto[data-v-7d7550a8] { grid-column: auto; } .col-1[data-v-7d7550a8] { grid-column: span 1; } .col-2[data-v-7d7550a8] { grid-column: span 2; } .col-3[data-v-7d7550a8] { grid-column: span 3; } .col-4[data-v-7d7550a8] { grid-column: span 4; } .col-5[data-v-7d7550a8] { grid-column: span 5; } .col-6[data-v-7d7550a8] { grid-column: span 6; } .col-7[data-v-7d7550a8] { grid-column: span 7; } .col-8[data-v-7d7550a8] { grid-column: span 8; } .col-9[data-v-7d7550a8] { grid-column: span 9; } .col-10[data-v-7d7550a8] { grid-column: span 10; } .col-12[data-v-7d7550a8] { grid-column: span 12; } .col-13[data-v-7d7550a8] { grid-column: span 13; } .col-14[data-v-7d7550a8] { grid-column: span 14; } .col-15[data-v-7d7550a8] { grid-column: span 15; } .col-16[data-v-7d7550a8] { grid-column: span 16; } .col-18[data-v-7d7550a8] { grid-column: span 18; } .col-20[data-v-7d7550a8] { grid-column: span 20; } .col-22[data-v-7d7550a8] { grid-column: span 22; } .col-24[data-v-7d7550a8] { grid-column: span 24; } .col-26[data-v-7d7550a8] { grid-column: span 26; } .col-27[data-v-7d7550a8] { grid-column: span 27; } .col-28[data-v-7d7550a8] { grid-column: span 28; } .col-30[data-v-7d7550a8] { grid-column: span 30; } .col-36[data-v-7d7550a8] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-7d7550a8] { display: none; } .col-md-36[data-v-7d7550a8] { grid-column: span 36; } .col-md-28[data-v-7d7550a8] { grid-column: span 28; } .col-md-27[data-v-7d7550a8] { grid-column: span 27; } .col-md-24[data-v-7d7550a8] { grid-column: span 24; } .col-md-22[data-v-7d7550a8] { grid-column: span 22; } .col-md-20[data-v-7d7550a8] { grid-column: span 20; } .col-md-19[data-v-7d7550a8] { grid-column: span 19; } .col-md-18[data-v-7d7550a8] { grid-column: span 18; } .col-md-17[data-v-7d7550a8] { grid-column: span 17; } .col-md-16[data-v-7d7550a8] { grid-column: span 16; } .col-md-15[data-v-7d7550a8] { grid-column: span 15; } .col-md-14[data-v-7d7550a8] { grid-column: span 14; } .col-md-13[data-v-7d7550a8] { grid-column: span 13; } .col-md-12[data-v-7d7550a8] { grid-column: span 12; } .col-md-10[data-v-7d7550a8] { grid-column: span 10; } .col-md-9[data-v-7d7550a8] { grid-column: span 9; } .col-md-8[data-v-7d7550a8] { grid-column: span 8; } .col-md-6[data-v-7d7550a8] { grid-column: span 6; } .col-md-5[data-v-7d7550a8] { grid-column: span 5; } .col-md-4[data-v-7d7550a8] { grid-column: span 4; } .col-md-3[data-v-7d7550a8] { grid-column: span 3; } .col-md-2[data-v-7d7550a8] { grid-column: span 2; } .col-md-1[data-v-7d7550a8] { grid-column: span 1; } .col-md-auto[data-v-7d7550a8] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-7d7550a8] { display: none; } .col-sm-36[data-v-7d7550a8] { grid-column: span 36; } .col-sm-32[data-v-7d7550a8] { grid-column: span 32; } .col-sm-28[data-v-7d7550a8] { grid-column: span 28; } .col-sm-27[data-v-7d7550a8] { grid-column: span 27; } .col-sm-24[data-v-7d7550a8] { grid-column: span 24; } .col-sm-22[data-v-7d7550a8] { grid-column: span 22; } .col-sm-20[data-v-7d7550a8] { grid-column: span 20; } .col-sm-18[data-v-7d7550a8] { grid-column: span 18; } .col-sm-16[data-v-7d7550a8] { grid-column: span 16; } .col-sm-15[data-v-7d7550a8] { grid-column: span 15; } .col-sm-14[data-v-7d7550a8] { grid-column: span 14; } .col-sm-13[data-v-7d7550a8] { grid-column: span 12; } .col-sm-12[data-v-7d7550a8] { grid-column: span 12; } .col-sm-10[data-v-7d7550a8] { grid-column: span 10; } .col-sm-9[data-v-7d7550a8] { grid-column: span 8; } .col-sm-8[data-v-7d7550a8] { grid-column: span 8; } .col-sm-6[data-v-7d7550a8] { grid-column: span 6; } .col-sm-4[data-v-7d7550a8] { grid-column: span 4; } .col-sm-auto[data-v-7d7550a8] { grid-column: auto; } } .fade-enter-active[data-v-7d7550a8] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-7d7550a8] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-7d7550a8], .fade-leave-to[data-v-7d7550a8] { opacity: 0; } .ai-suggestion-card[data-v-7d7550a8] { position: absolute; bottom: 76px; left: 20px; right: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); border-radius: 20px; box-shadow: 0 8px 32px color-mix(in srgb, #8b5cf6 25%, transparent), 0 16px 64px color-mix(in srgb, #6366f1 20%, transparent), 0 0 0 1px color-mix(in srgb, #8b5cf6 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 20; overflow: hidden; max-width: 680px; margin: 0 auto; animation: float-subtle-7d7550a8 4s ease-in-out infinite; } .ai-suggestion-card[data-v-7d7550a8]::before { content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4f46e5 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.3; pointer-events: none; } .ai-suggestion-card__header[data-v-7d7550a8] { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, #8b5cf6 10%, transparent); background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 8%, white) 0%, color-mix(in srgb, #6366f1 5%, white) 100%); position: relative; } .ai-suggestion-card__icon[data-v-7d7550a8] { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4f46e5 100%); border-radius: 12px; flex-shrink: 0; box-shadow: 0 4px 12px color-mix(in srgb, #8b5cf6 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); animation: icon-pulse-7d7550a8 2s ease-in-out infinite; } .ai-suggestion-card__title[data-v-7d7550a8] { flex: 1; display: flex; flex-direction: column; gap: 2px; } .ai-suggestion-card__title-text[data-v-7d7550a8] { font-size: 15px; font-weight: 700; color: #3c414c; letter-spacing: -0.02em; } .ai-suggestion-card__subtitle[data-v-7d7550a8] { font-size: 12px; font-weight: 500; color: #94a2b8; letter-spacing: -0.01em; } .ai-suggestion-card__close[data-v-7d7550a8] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: color-mix(in srgb, #2b303a 5%, transparent); color: #647184; border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; } .ai-suggestion-card__close[data-v-7d7550a8]:hover { background: color-mix(in srgb, #2b303a 10%, transparent); color: #3c414c; } .ai-suggestion-card__close[data-v-7d7550a8]:active { transform: scale(0.95); } .ai-suggestion-card__content[data-v-7d7550a8] { padding: 20px 24px; max-height: 300px; overflow-y: auto; position: relative; } .ai-suggestion-card__content[data-v-7d7550a8]::-webkit-scrollbar { width: 6px; } .ai-suggestion-card__content[data-v-7d7550a8]::-webkit-scrollbar-track { background: transparent; margin: 8px 0; } .ai-suggestion-card__content[data-v-7d7550a8]::-webkit-scrollbar-thumb { background: linear-gradient(180deg, color-mix(in srgb, #8b5cf6 40%, transparent) 0%, color-mix(in srgb, #6366f1 40%, transparent) 100%); border-radius: 6px; transition: all 0.2s ease; } .ai-suggestion-card__content[data-v-7d7550a8]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8b5cf6 0%, #6366f1 100%); } .ai-suggestion-card__text[data-v-7d7550a8] { margin: 0; font-size: 14px; line-height: 1.7; color: #4d5462; font-weight: 500; white-space: pre-wrap; word-break: break-word; letter-spacing: -0.01em; } .ai-suggestion-card__actions[data-v-7d7550a8] { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid color-mix(in srgb, #8b5cf6 10%, transparent); background: linear-gradient(to top, color-mix(in srgb, #8b5cf6 3%, white) 0%, transparent 100%); } .ai-suggestion-card__action-btn[data-v-7d7550a8] { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .ai-suggestion-card__action-btn--primary[data-v-7d7550a8] { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4f46e5 100%); box-shadow: 0 4px 12px color-mix(in srgb, #8b5cf6 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .ai-suggestion-card__action-btn--primary[data-v-7d7550a8]:hover { transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, #8b5cf6 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .ai-suggestion-card__action-btn[data-v-7d7550a8]:hover { transform: translateY(-1px); } .ai-suggestion-card__action-btn[data-v-7d7550a8]:active { transform: translateY(0); } .ai-suggestion-card__badge[data-v-7d7550a8] { position: absolute; top: 12px; right: 56px; display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); border-radius: 8px; font-size: 10px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 2px 8px color-mix(in srgb, #8b5cf6 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); z-index: 1; } .ai-suggestion-card__badge-icon[data-v-7d7550a8] { display: flex; align-items: center; justify-content: center; animation: zap-pulse-7d7550a8 1.5s ease-in-out infinite; } .ai-suggestion-card__shimmer[data-v-7d7550a8] { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.4) 55%, transparent 80%); transform: rotate(30deg); animation: shimmer-sweep-7d7550a8 8s ease-in-out infinite; pointer-events: none; } @media (max-width: 720px) { .ai-suggestion-card[data-v-7d7550a8] { left: 12px; right: 12px; bottom: 68px; border-radius: 16px; } .ai-suggestion-card__header[data-v-7d7550a8] { padding: 14px 16px; } .ai-suggestion-card__icon[data-v-7d7550a8] { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; } .ai-suggestion-card__content[data-v-7d7550a8] { padding: 16px 18px; max-height: 200px; } .ai-suggestion-card__text[data-v-7d7550a8] { font-size: 14px; line-height: 1.6; } .ai-suggestion-card__actions[data-v-7d7550a8] { padding: 12px 16px; flex-wrap: wrap; gap: 8px; } .ai-suggestion-card__action-btn[data-v-7d7550a8] { flex: 1; min-width: calc(50% - 4px); min-height: 44px; } .ai-suggestion-card__action-btn[data-v-7d7550a8]:last-child { flex-basis: 100%; } .ai-suggestion-card__close[data-v-7d7550a8] { width: 44px; height: 44px; min-width: 44px; } .ai-suggestion-card__badge[data-v-7d7550a8] { top: 10px; right: 56px; padding: 4px 10px; font-size: 10px; } } @keyframes float-subtle-7d7550a8 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes icon-pulse-7d7550a8 { 0%, 100% { box-shadow: 0 4px 12px color-mix(in srgb, #8b5cf6 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0 6px 20px color-mix(in srgb, #8b5cf6 60%, transparent), 0 12px 32px color-mix(in srgb, #6366f1 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); } } @keyframes zap-pulse-7d7550a8 { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes shimmer-sweep-7d7550a8 { 0% { transform: translateX(-100%) translateY(-100%) rotate(30deg); } 100% { transform: translateX(100%) translateY(100%) rotate(30deg); } } .card-slide-enter-active[data-v-7d7550a8] { transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .card-slide-leave-active[data-v-7d7550a8] { transition: all 0.35s cubic-bezier(0.4, 0, 0.6, 1); } .card-slide-enter-from[data-v-7d7550a8] { opacity: 0; transform: translateY(40px) scale(0.9); filter: blur(10px); } .card-slide-leave-to[data-v-7d7550a8] { opacity: 0; transform: translateY(20px) scale(0.95); filter: blur(5px); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-bd56ab74]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-bd56ab74] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-bd56ab74] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-bd56ab74]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-bd56ab74], .theme-mode-light[data-v-bd56ab74] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-bd56ab74], .theme-mode-dark[data-v-bd56ab74] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-bd56ab74]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-bd56ab74]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-bd56ab74] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-bd56ab74] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-bd56ab74]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-bd56ab74], input[disabled][data-v-bd56ab74] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-bd56ab74] { opacity: 0.9; } input[readonly][data-v-bd56ab74] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-bd56ab74] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-bd56ab74]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-bd56ab74]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-bd56ab74]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-bd56ab74] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-bd56ab74]:nth-child(odd), .list-card-desktop__wrapper[data-v-bd56ab74]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-bd56ab74]:nth-child(even), .list-card-desktop__wrapper[data-v-bd56ab74]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-bd56ab74]:nth-child(odd), .listCardDesktopWrapper[data-v-bd56ab74]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-bd56ab74]:nth-child(even), .listCardDesktopWrapper[data-v-bd56ab74]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-bd56ab74] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-bd56ab74] { cursor: pointer; } .card-layout--selectionnable[data-v-bd56ab74]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-bd56ab74] { cursor: auto; } .card-layout--drawer[data-v-bd56ab74] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-bd56ab74] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-bd56ab74] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-bd56ab74] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-bd56ab74] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-bd56ab74] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-bd56ab74]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-bd56ab74] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-bd56ab74] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-bd56ab74] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-bd56ab74] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-bd56ab74] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-bd56ab74] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-bd56ab74] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-bd56ab74] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-bd56ab74] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-bd56ab74] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-bd56ab74] { background-color: #eb1515; } .color-chip--dossiers[data-v-bd56ab74] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-bd56ab74] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-bd56ab74] { background-color: #00a79b; } .color-chip--virements[data-v-bd56ab74] { background-color: var(--secondary-400); } .color-chip--factures[data-v-bd56ab74] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-bd56ab74] { background-color: #eb1515; } .color-recherche-dossiers[data-v-bd56ab74] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-bd56ab74] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-bd56ab74] { background-color: #00a79b; } .color-recherche-virements[data-v-bd56ab74] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-bd56ab74] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-bd56ab74] { color: #00a79b; cursor: pointer; } .scrollable[data-v-bd56ab74] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-bd56ab74] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-bd56ab74] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-bd56ab74] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-bd56ab74] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-bd56ab74] { font-weight: 800; } .grid-cell--column[data-v-bd56ab74] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-bd56ab74] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-bd56ab74] { fill: #00a79b; } .grid-cell--disabled[data-v-bd56ab74] { color: #cccccc; } .grid-cell--disabled svg[data-v-bd56ab74] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-bd56ab74] { white-space: nowrap; } .grid-cell--danger svg[data-v-bd56ab74] { fill: #eb1515; } .grid-cell--span-1[data-v-bd56ab74] { grid-column: span 1; } .grid-cell--span-2[data-v-bd56ab74] { grid-column: span 2; } .grid-cell--span-3[data-v-bd56ab74] { grid-column: span 3; } .grid-cell--span-4[data-v-bd56ab74] { grid-column: span 4; } .grid-cell--span-5[data-v-bd56ab74] { grid-column: span 5; } .grid-cell--span-6[data-v-bd56ab74] { grid-column: span 6; } .grid-cell--span-7[data-v-bd56ab74] { grid-column: span 7; } .grid-cell--span-8[data-v-bd56ab74] { grid-column: span 8; } .grid-cell--span-9[data-v-bd56ab74] { grid-column: span 9; } .grid-cell--span-10[data-v-bd56ab74] { grid-column: span 10; } .grid-cell--span-12[data-v-bd56ab74] { grid-column: span 12; } .grid-cell--span-13[data-v-bd56ab74] { grid-column: span 13; } .grid-cell--span-14[data-v-bd56ab74] { grid-column: span 14; } .grid-cell--span-16[data-v-bd56ab74] { grid-column: span 16; } .grid-cell--span-18[data-v-bd56ab74] { grid-column: span 18; } .grid-cell--span-20[data-v-bd56ab74] { grid-column: span 20; } .grid-cell--span-32[data-v-bd56ab74] { grid-column: span 32; } .grid-cell--span-36[data-v-bd56ab74] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-bd56ab74] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-bd56ab74] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-bd56ab74] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-bd56ab74] { justify-content: center !important; } .elem--bold span[data-v-bd56ab74] { font-weight: 800; } .elem--column[data-v-bd56ab74] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-bd56ab74] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-bd56ab74] { fill: #00a79b; } .elem--clickable[data-v-bd56ab74]:hover { cursor: pointer; } .elem--disabled[data-v-bd56ab74] { color: #cccccc; } .elem--disabled svg[data-v-bd56ab74] { fill: #cccccc; } .elem--nowrap span[data-v-bd56ab74] { white-space: nowrap; } .elem--danger svg[data-v-bd56ab74] { fill: #eb1515; } .elem--span-1[data-v-bd56ab74] { grid-column: span 1; } .elem--span-2[data-v-bd56ab74] { grid-column: span 2; } .elem--span-3[data-v-bd56ab74] { grid-column: span 3; } .elem--span-4[data-v-bd56ab74] { grid-column: span 4; } .elem--span-5[data-v-bd56ab74] { grid-column: span 5; } .elem--span-6[data-v-bd56ab74] { grid-column: span 6; } .elem--span-7[data-v-bd56ab74] { grid-column: span 7; } .elem--span-8[data-v-bd56ab74] { grid-column: span 8; } .elem--span-9[data-v-bd56ab74] { grid-column: span 9; } .elem--span-10[data-v-bd56ab74] { grid-column: span 10; } .elem--span-12[data-v-bd56ab74] { grid-column: span 12; } .elem--span-13[data-v-bd56ab74] { grid-column: span 13; } .elem--span-14[data-v-bd56ab74] { grid-column: span 14; } .elem--span-16[data-v-bd56ab74] { grid-column: span 16; } .elem--span-18[data-v-bd56ab74] { grid-column: span 18; } .elem--span-20[data-v-bd56ab74] { grid-column: span 20; } .elem--span-32[data-v-bd56ab74] { grid-column: span 32; } .elem--span-36[data-v-bd56ab74] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-bd56ab74] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-bd56ab74] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-bd56ab74]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-bd56ab74] { display: flex; } /* flex-direction */ .flex-column[data-v-bd56ab74] { flex-direction: column; } .flex-row[data-v-bd56ab74] { flex-direction: row; } /* flex */ .flex-1[data-v-bd56ab74] { flex: 1 !important; } .flex-2[data-v-bd56ab74] { flex: 2; } .flex-3[data-v-bd56ab74] { flex: 3; } .flex-3[data-v-bd56ab74] { flex: 4; } .flex-5[data-v-bd56ab74] { flex: 5; } .flex-auto[data-v-bd56ab74] { flex: auto; } .flex-none[data-v-bd56ab74] { flex: none; } .flex-content[data-v-bd56ab74] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-bd56ab74] { flex-wrap: wrap; } .flex-nowrap[data-v-bd56ab74] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-bd56ab74] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-bd56ab74] { justify-content: flex-start; } .justify-content-end[data-v-bd56ab74] { justify-content: flex-end; } .justify-content-baseline[data-v-bd56ab74] { justify-content: baseline; } .justify-content-center[data-v-bd56ab74] { justify-content: center; } .justify-content-space-between[data-v-bd56ab74] { justify-content: space-between; } .justify-content-space-around[data-v-bd56ab74] { justify-content: space-around; } .justify-content-space-evenly[data-v-bd56ab74] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-bd56ab74] { align-items: flex-start; } .align-items-flex-end[data-v-bd56ab74] { align-items: flex-end; } .align-items-stretch[data-v-bd56ab74] { align-items: stretch; } .align-items-baseline[data-v-bd56ab74] { align-items: baseline; } .align-items-center[data-v-bd56ab74] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-bd56ab74] { align-content: flex-start; } .align-content-flex-end[data-v-bd56ab74] { align-content: flex-end; } .align-content-center[data-v-bd56ab74] { align-content: center; } .align-content-stretch[data-v-bd56ab74] { align-content: stretch; } .align-content-space-between[data-v-bd56ab74] { align-content: space-between; } .align-content-space-around[data-v-bd56ab74] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-bd56ab74] { align-self: flex-start; } .align-self-flex-end[data-v-bd56ab74] { align-self: flex-end; } .align-self-stretch[data-v-bd56ab74] { align-self: stretch; } .align-self-flex-baseline[data-v-bd56ab74] { align-self: baseline; } .align-self-center[data-v-bd56ab74] { align-self: center; } .align-self-auto[data-v-bd56ab74] { align-self: auto; } .flex-gap-1[data-v-bd56ab74] { gap: 4px; } .flex-gap-2[data-v-bd56ab74] { gap: 8px; } .flex-gap-3[data-v-bd56ab74] { gap: 12px; } .flex-gap-4[data-v-bd56ab74] { gap: 16px; } .flex-gap-5[data-v-bd56ab74] { gap: 20px; } .flex-gap-6[data-v-bd56ab74] { gap: 24px; } .flex-gap-7[data-v-bd56ab74] { gap: 28px; } .flex-gap-8[data-v-bd56ab74] { gap: 32px; } .flex-gap-10[data-v-bd56ab74] { gap: 40px; } .flex-gap-12[data-v-bd56ab74] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-bd56ab74] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-bd56ab74] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-bd56ab74] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-bd56ab74] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-bd56ab74] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-bd56ab74] { display: none !important; } } .col-none[data-v-bd56ab74] { display: none; } .col-auto[data-v-bd56ab74] { grid-column: auto; } .col-1[data-v-bd56ab74] { grid-column: span 1; } .col-2[data-v-bd56ab74] { grid-column: span 2; } .col-3[data-v-bd56ab74] { grid-column: span 3; } .col-4[data-v-bd56ab74] { grid-column: span 4; } .col-5[data-v-bd56ab74] { grid-column: span 5; } .col-6[data-v-bd56ab74] { grid-column: span 6; } .col-7[data-v-bd56ab74] { grid-column: span 7; } .col-8[data-v-bd56ab74] { grid-column: span 8; } .col-9[data-v-bd56ab74] { grid-column: span 9; } .col-10[data-v-bd56ab74] { grid-column: span 10; } .col-12[data-v-bd56ab74] { grid-column: span 12; } .col-13[data-v-bd56ab74] { grid-column: span 13; } .col-14[data-v-bd56ab74] { grid-column: span 14; } .col-15[data-v-bd56ab74] { grid-column: span 15; } .col-16[data-v-bd56ab74] { grid-column: span 16; } .col-18[data-v-bd56ab74] { grid-column: span 18; } .col-20[data-v-bd56ab74] { grid-column: span 20; } .col-22[data-v-bd56ab74] { grid-column: span 22; } .col-24[data-v-bd56ab74] { grid-column: span 24; } .col-26[data-v-bd56ab74] { grid-column: span 26; } .col-27[data-v-bd56ab74] { grid-column: span 27; } .col-28[data-v-bd56ab74] { grid-column: span 28; } .col-30[data-v-bd56ab74] { grid-column: span 30; } .col-36[data-v-bd56ab74] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-bd56ab74] { display: none; } .col-md-36[data-v-bd56ab74] { grid-column: span 36; } .col-md-28[data-v-bd56ab74] { grid-column: span 28; } .col-md-27[data-v-bd56ab74] { grid-column: span 27; } .col-md-24[data-v-bd56ab74] { grid-column: span 24; } .col-md-22[data-v-bd56ab74] { grid-column: span 22; } .col-md-20[data-v-bd56ab74] { grid-column: span 20; } .col-md-19[data-v-bd56ab74] { grid-column: span 19; } .col-md-18[data-v-bd56ab74] { grid-column: span 18; } .col-md-17[data-v-bd56ab74] { grid-column: span 17; } .col-md-16[data-v-bd56ab74] { grid-column: span 16; } .col-md-15[data-v-bd56ab74] { grid-column: span 15; } .col-md-14[data-v-bd56ab74] { grid-column: span 14; } .col-md-13[data-v-bd56ab74] { grid-column: span 13; } .col-md-12[data-v-bd56ab74] { grid-column: span 12; } .col-md-10[data-v-bd56ab74] { grid-column: span 10; } .col-md-9[data-v-bd56ab74] { grid-column: span 9; } .col-md-8[data-v-bd56ab74] { grid-column: span 8; } .col-md-6[data-v-bd56ab74] { grid-column: span 6; } .col-md-5[data-v-bd56ab74] { grid-column: span 5; } .col-md-4[data-v-bd56ab74] { grid-column: span 4; } .col-md-3[data-v-bd56ab74] { grid-column: span 3; } .col-md-2[data-v-bd56ab74] { grid-column: span 2; } .col-md-1[data-v-bd56ab74] { grid-column: span 1; } .col-md-auto[data-v-bd56ab74] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-bd56ab74] { display: none; } .col-sm-36[data-v-bd56ab74] { grid-column: span 36; } .col-sm-32[data-v-bd56ab74] { grid-column: span 32; } .col-sm-28[data-v-bd56ab74] { grid-column: span 28; } .col-sm-27[data-v-bd56ab74] { grid-column: span 27; } .col-sm-24[data-v-bd56ab74] { grid-column: span 24; } .col-sm-22[data-v-bd56ab74] { grid-column: span 22; } .col-sm-20[data-v-bd56ab74] { grid-column: span 20; } .col-sm-18[data-v-bd56ab74] { grid-column: span 18; } .col-sm-16[data-v-bd56ab74] { grid-column: span 16; } .col-sm-15[data-v-bd56ab74] { grid-column: span 15; } .col-sm-14[data-v-bd56ab74] { grid-column: span 14; } .col-sm-13[data-v-bd56ab74] { grid-column: span 12; } .col-sm-12[data-v-bd56ab74] { grid-column: span 12; } .col-sm-10[data-v-bd56ab74] { grid-column: span 10; } .col-sm-9[data-v-bd56ab74] { grid-column: span 8; } .col-sm-8[data-v-bd56ab74] { grid-column: span 8; } .col-sm-6[data-v-bd56ab74] { grid-column: span 6; } .col-sm-4[data-v-bd56ab74] { grid-column: span 4; } .col-sm-auto[data-v-bd56ab74] { grid-column: auto; } } .fade-enter-active[data-v-bd56ab74] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-bd56ab74] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-bd56ab74], .fade-leave-to[data-v-bd56ab74] { opacity: 0; } .chat-core[data-v-bd56ab74] { background: var(--admin-bg-surface, white); display: flex; flex-direction: column; border-radius: 0 0 16px 16px; position: relative; overflow: hidden; } .chat-core[data-v-bd56ab74]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-50) 30%, transparent) 0%, transparent 30%); pointer-events: none; z-index: 0; } .chat-core__offline-banner[data-v-bd56ab74] { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, color-mix(in srgb, #f97316 15%, var(--admin-bg-surface, white)) 0%, color-mix(in srgb, #fb923c 10%, var(--admin-bg-surface, white)) 100%); color: var(--admin-text-warning, #9a3b07); padding: 12px 20px; font-size: 13px; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, #fb923c 25%, transparent); position: relative; z-index: 2; backdrop-filter: blur(8px); } .chat-core__offline-banner[data-v-bd56ab74]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #f97316 0%, #fb923c 100%); } .chat-core__offline-icon[data-v-bd56ab74] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); border-radius: 8px; flex-shrink: 0; color: white; box-shadow: 0 2px 8px color-mix(in srgb, #f97316 30%, transparent); } .chat-core__loader[data-v-bd56ab74] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 400px; background: linear-gradient(180deg, var(--admin-bg-subtle, #f8f9fb) 0%, var(--admin-bg-surface, white) 100%); position: relative; z-index: 1; } .chat-core__loader-animation[data-v-bd56ab74] { display: flex; align-items: center; gap: 8px; padding: 16px 24px; background: var(--admin-bg-card, white); border-radius: 16px; box-shadow: 0 2px 8px var(--admin-shadow, color-mix(in srgb, #2b303a 6%, transparent)), 0 8px 24px var(--admin-shadow, color-mix(in srgb, #2b303a 8%, transparent)); } .chat-core__loader-dot[data-v-bd56ab74] { width: 12px; height: 12px; background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%); border-radius: 50%; animation: loader-bounce-bd56ab74 1.4s ease-in-out infinite; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-500) 40%, transparent); } .chat-core__loader-dot[data-v-bd56ab74]:nth-child(1) { animation-delay: 0s; } .chat-core__loader-dot[data-v-bd56ab74]:nth-child(2) { animation-delay: 0.16s; } .chat-core__loader-dot[data-v-bd56ab74]:nth-child(3) { animation-delay: 0.32s; } .chat-core__loader-text[data-v-bd56ab74] { font-size: 14px; color: var(--admin-text-muted, #94a2b8); font-weight: 600; letter-spacing: -0.01em; } .chat-core__content[data-v-bd56ab74] { display: flex; flex-direction: column; flex: 1; position: relative; min-height: 0; z-index: 1; } .chat-core__messages[data-v-bd56ab74] { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 20px 24px; background: linear-gradient(180deg, var(--admin-bg-header, #edf1f5) 0%, var(--admin-bg-subtle, #f8f9fb) 30%, var(--admin-bg-surface, white) 100%); scroll-behavior: smooth; min-height: 0; gap: 6px; padding-bottom: 28px; position: relative; } .chat-core__messages[data-v-bd56ab74]::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--admin-border-subtle, #cdd5e0) 8%, transparent) 1px, transparent 0); background-size: 20px 20px; pointer-events: none; opacity: 0.5; } .chat-core__messages[data-v-bd56ab74]::-webkit-scrollbar { width: 8px; } .chat-core__messages[data-v-bd56ab74]::-webkit-scrollbar-track { background: transparent; margin: 8px 0; } .chat-core__messages[data-v-bd56ab74]::-webkit-scrollbar-thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--admin-text-muted, #b4bfce) 60%, transparent) 0%, color-mix(in srgb, var(--admin-text-secondary, #94a2b8) 60%, transparent) 100%); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; transition: all 0.2s ease; } .chat-core__messages[data-v-bd56ab74]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--admin-text-muted, #b4bfce) 0%, var(--admin-text-secondary, #94a2b8) 100%); background-clip: padding-box; } .chat-core__empty[data-v-bd56ab74] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; text-align: center; position: relative; z-index: 1; } .chat-core__empty-icon[data-v-bd56ab74] { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 12%, var(--admin-bg-surface, white)) 0%, color-mix(in srgb, var(--primary-400) 8%, var(--admin-bg-surface, white)) 100%); border-radius: 24px; color: var(--primary-500); margin-bottom: 8px; box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-500) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8); position: relative; } .chat-core__empty-icon[data-v-bd56ab74]::before { content: ''; position: absolute; inset: -4px; border-radius: 28px; border: 2px dashed color-mix(in srgb, var(--primary-400) 25%, transparent); animation: rotate-ring-bd56ab74 20s linear infinite; } .chat-core__empty-title[data-v-bd56ab74] { margin: 0; font-size: 18px; font-weight: 700; color: var(--admin-text-primary, #3c414c); letter-spacing: -0.02em; } .chat-core__empty-text[data-v-bd56ab74] { margin: 0; font-size: 14px; color: var(--admin-text-muted, #94a2b8); max-width: 260px; line-height: 1.5; } .chat-core__new-messages-btn[data-v-bd56ab74] { position: absolute; bottom: 88px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); color: white; border: none; border-radius: 24px; padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-600) 40%, transparent), 0 2px 4px var(--admin-shadow, color-mix(in srgb, #2b303a 15%, transparent)), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; letter-spacing: -0.01em; backdrop-filter: blur(8px); } .chat-core__new-messages-btn[data-v-bd56ab74]::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .chat-core__new-messages-btn[data-v-bd56ab74]:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-600) 50%, transparent), 0 4px 8px var(--admin-shadow, color-mix(in srgb, #2b303a 15%, transparent)), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .chat-core__new-messages-btn[data-v-bd56ab74]:hover::before { opacity: 1; } .chat-core__new-messages-btn[data-v-bd56ab74]:active { transform: translateX(-50%) translateY(-1px); } @media (max-width: 720px) { .chat-core[data-v-bd56ab74] { height: auto; min-height: 50dvh; border-radius: 0; } .chat-core__messages[data-v-bd56ab74] { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .chat-core__empty-icon[data-v-bd56ab74] { width: 64px; height: 64px; border-radius: 18px; } .chat-core__new-messages-btn[data-v-bd56ab74] { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } } @keyframes loader-bounce-bd56ab74 { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } @keyframes rotate-ring-bd56ab74 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .banner-slide-enter-active[data-v-bd56ab74] { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .banner-slide-leave-active[data-v-bd56ab74] { transition: all 0.25s ease; } .banner-slide-enter-from[data-v-bd56ab74] { opacity: 0; transform: translateY(-100%); } .banner-slide-leave-to[data-v-bd56ab74] { opacity: 0; transform: translateY(-50%); } .content-fade-enter-active[data-v-bd56ab74], .content-fade-leave-active[data-v-bd56ab74] { transition: opacity 0.35s ease; } .content-fade-enter-from[data-v-bd56ab74], .content-fade-leave-to[data-v-bd56ab74] { opacity: 0; } .btn-bounce-enter-active[data-v-bd56ab74] { transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .btn-bounce-leave-active[data-v-bd56ab74] { transition: all 0.25s ease; } .btn-bounce-enter-from[data-v-bd56ab74] { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.7); } .btn-bounce-leave-to[data-v-bd56ab74] { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.85); } .empty-fade-enter-active[data-v-bd56ab74] { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; } .empty-fade-leave-active[data-v-bd56ab74] { transition: all 0.25s ease; } .empty-fade-enter-from[data-v-bd56ab74], .empty-fade-leave-to[data-v-bd56ab74] { opacity: 0; transform: translateY(16px) scale(0.95); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-472b6f4e]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-472b6f4e] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-472b6f4e] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-472b6f4e]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-472b6f4e], .theme-mode-light[data-v-472b6f4e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-472b6f4e], .theme-mode-dark[data-v-472b6f4e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-472b6f4e]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-472b6f4e]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-472b6f4e] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-472b6f4e] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-472b6f4e]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-472b6f4e], input[disabled][data-v-472b6f4e] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-472b6f4e] { opacity: 0.9; } input[readonly][data-v-472b6f4e] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-472b6f4e] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-472b6f4e]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-472b6f4e]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-472b6f4e]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-472b6f4e] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-472b6f4e]:nth-child(odd), .list-card-desktop__wrapper[data-v-472b6f4e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-472b6f4e]:nth-child(even), .list-card-desktop__wrapper[data-v-472b6f4e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-472b6f4e]:nth-child(odd), .listCardDesktopWrapper[data-v-472b6f4e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-472b6f4e]:nth-child(even), .listCardDesktopWrapper[data-v-472b6f4e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-472b6f4e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-472b6f4e] { cursor: pointer; } .card-layout--selectionnable[data-v-472b6f4e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-472b6f4e] { cursor: auto; } .card-layout--drawer[data-v-472b6f4e] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-472b6f4e] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-472b6f4e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-472b6f4e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-472b6f4e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-472b6f4e] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-472b6f4e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-472b6f4e] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-472b6f4e] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-472b6f4e] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-472b6f4e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-472b6f4e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-472b6f4e] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-472b6f4e] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-472b6f4e] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-472b6f4e] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-472b6f4e] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-472b6f4e] { background-color: #eb1515; } .color-chip--dossiers[data-v-472b6f4e] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-472b6f4e] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-472b6f4e] { background-color: #00a79b; } .color-chip--virements[data-v-472b6f4e] { background-color: var(--secondary-400); } .color-chip--factures[data-v-472b6f4e] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-472b6f4e] { background-color: #eb1515; } .color-recherche-dossiers[data-v-472b6f4e] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-472b6f4e] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-472b6f4e] { background-color: #00a79b; } .color-recherche-virements[data-v-472b6f4e] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-472b6f4e] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-472b6f4e] { color: #00a79b; cursor: pointer; } .scrollable[data-v-472b6f4e] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-472b6f4e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-472b6f4e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-472b6f4e] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-472b6f4e] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-472b6f4e] { font-weight: 800; } .grid-cell--column[data-v-472b6f4e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-472b6f4e] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-472b6f4e] { fill: #00a79b; } .grid-cell--disabled[data-v-472b6f4e] { color: #cccccc; } .grid-cell--disabled svg[data-v-472b6f4e] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-472b6f4e] { white-space: nowrap; } .grid-cell--danger svg[data-v-472b6f4e] { fill: #eb1515; } .grid-cell--span-1[data-v-472b6f4e] { grid-column: span 1; } .grid-cell--span-2[data-v-472b6f4e] { grid-column: span 2; } .grid-cell--span-3[data-v-472b6f4e] { grid-column: span 3; } .grid-cell--span-4[data-v-472b6f4e] { grid-column: span 4; } .grid-cell--span-5[data-v-472b6f4e] { grid-column: span 5; } .grid-cell--span-6[data-v-472b6f4e] { grid-column: span 6; } .grid-cell--span-7[data-v-472b6f4e] { grid-column: span 7; } .grid-cell--span-8[data-v-472b6f4e] { grid-column: span 8; } .grid-cell--span-9[data-v-472b6f4e] { grid-column: span 9; } .grid-cell--span-10[data-v-472b6f4e] { grid-column: span 10; } .grid-cell--span-12[data-v-472b6f4e] { grid-column: span 12; } .grid-cell--span-13[data-v-472b6f4e] { grid-column: span 13; } .grid-cell--span-14[data-v-472b6f4e] { grid-column: span 14; } .grid-cell--span-16[data-v-472b6f4e] { grid-column: span 16; } .grid-cell--span-18[data-v-472b6f4e] { grid-column: span 18; } .grid-cell--span-20[data-v-472b6f4e] { grid-column: span 20; } .grid-cell--span-32[data-v-472b6f4e] { grid-column: span 32; } .grid-cell--span-36[data-v-472b6f4e] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-472b6f4e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-472b6f4e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-472b6f4e] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-472b6f4e] { justify-content: center !important; } .elem--bold span[data-v-472b6f4e] { font-weight: 800; } .elem--column[data-v-472b6f4e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-472b6f4e] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-472b6f4e] { fill: #00a79b; } .elem--clickable[data-v-472b6f4e]:hover { cursor: pointer; } .elem--disabled[data-v-472b6f4e] { color: #cccccc; } .elem--disabled svg[data-v-472b6f4e] { fill: #cccccc; } .elem--nowrap span[data-v-472b6f4e] { white-space: nowrap; } .elem--danger svg[data-v-472b6f4e] { fill: #eb1515; } .elem--span-1[data-v-472b6f4e] { grid-column: span 1; } .elem--span-2[data-v-472b6f4e] { grid-column: span 2; } .elem--span-3[data-v-472b6f4e] { grid-column: span 3; } .elem--span-4[data-v-472b6f4e] { grid-column: span 4; } .elem--span-5[data-v-472b6f4e] { grid-column: span 5; } .elem--span-6[data-v-472b6f4e] { grid-column: span 6; } .elem--span-7[data-v-472b6f4e] { grid-column: span 7; } .elem--span-8[data-v-472b6f4e] { grid-column: span 8; } .elem--span-9[data-v-472b6f4e] { grid-column: span 9; } .elem--span-10[data-v-472b6f4e] { grid-column: span 10; } .elem--span-12[data-v-472b6f4e] { grid-column: span 12; } .elem--span-13[data-v-472b6f4e] { grid-column: span 13; } .elem--span-14[data-v-472b6f4e] { grid-column: span 14; } .elem--span-16[data-v-472b6f4e] { grid-column: span 16; } .elem--span-18[data-v-472b6f4e] { grid-column: span 18; } .elem--span-20[data-v-472b6f4e] { grid-column: span 20; } .elem--span-32[data-v-472b6f4e] { grid-column: span 32; } .elem--span-36[data-v-472b6f4e] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-472b6f4e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-472b6f4e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-472b6f4e]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-472b6f4e] { display: flex; } /* flex-direction */ .flex-column[data-v-472b6f4e] { flex-direction: column; } .flex-row[data-v-472b6f4e] { flex-direction: row; } /* flex */ .flex-1[data-v-472b6f4e] { flex: 1 !important; } .flex-2[data-v-472b6f4e] { flex: 2; } .flex-3[data-v-472b6f4e] { flex: 3; } .flex-3[data-v-472b6f4e] { flex: 4; } .flex-5[data-v-472b6f4e] { flex: 5; } .flex-auto[data-v-472b6f4e] { flex: auto; } .flex-none[data-v-472b6f4e] { flex: none; } .flex-content[data-v-472b6f4e] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-472b6f4e] { flex-wrap: wrap; } .flex-nowrap[data-v-472b6f4e] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-472b6f4e] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-472b6f4e] { justify-content: flex-start; } .justify-content-end[data-v-472b6f4e] { justify-content: flex-end; } .justify-content-baseline[data-v-472b6f4e] { justify-content: baseline; } .justify-content-center[data-v-472b6f4e] { justify-content: center; } .justify-content-space-between[data-v-472b6f4e] { justify-content: space-between; } .justify-content-space-around[data-v-472b6f4e] { justify-content: space-around; } .justify-content-space-evenly[data-v-472b6f4e] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-472b6f4e] { align-items: flex-start; } .align-items-flex-end[data-v-472b6f4e] { align-items: flex-end; } .align-items-stretch[data-v-472b6f4e] { align-items: stretch; } .align-items-baseline[data-v-472b6f4e] { align-items: baseline; } .align-items-center[data-v-472b6f4e] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-472b6f4e] { align-content: flex-start; } .align-content-flex-end[data-v-472b6f4e] { align-content: flex-end; } .align-content-center[data-v-472b6f4e] { align-content: center; } .align-content-stretch[data-v-472b6f4e] { align-content: stretch; } .align-content-space-between[data-v-472b6f4e] { align-content: space-between; } .align-content-space-around[data-v-472b6f4e] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-472b6f4e] { align-self: flex-start; } .align-self-flex-end[data-v-472b6f4e] { align-self: flex-end; } .align-self-stretch[data-v-472b6f4e] { align-self: stretch; } .align-self-flex-baseline[data-v-472b6f4e] { align-self: baseline; } .align-self-center[data-v-472b6f4e] { align-self: center; } .align-self-auto[data-v-472b6f4e] { align-self: auto; } .flex-gap-1[data-v-472b6f4e] { gap: 4px; } .flex-gap-2[data-v-472b6f4e] { gap: 8px; } .flex-gap-3[data-v-472b6f4e] { gap: 12px; } .flex-gap-4[data-v-472b6f4e] { gap: 16px; } .flex-gap-5[data-v-472b6f4e] { gap: 20px; } .flex-gap-6[data-v-472b6f4e] { gap: 24px; } .flex-gap-7[data-v-472b6f4e] { gap: 28px; } .flex-gap-8[data-v-472b6f4e] { gap: 32px; } .flex-gap-10[data-v-472b6f4e] { gap: 40px; } .flex-gap-12[data-v-472b6f4e] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-472b6f4e] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-472b6f4e] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-472b6f4e] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-472b6f4e] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-472b6f4e] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-472b6f4e] { display: none !important; } } .col-none[data-v-472b6f4e] { display: none; } .col-auto[data-v-472b6f4e] { grid-column: auto; } .col-1[data-v-472b6f4e] { grid-column: span 1; } .col-2[data-v-472b6f4e] { grid-column: span 2; } .col-3[data-v-472b6f4e] { grid-column: span 3; } .col-4[data-v-472b6f4e] { grid-column: span 4; } .col-5[data-v-472b6f4e] { grid-column: span 5; } .col-6[data-v-472b6f4e] { grid-column: span 6; } .col-7[data-v-472b6f4e] { grid-column: span 7; } .col-8[data-v-472b6f4e] { grid-column: span 8; } .col-9[data-v-472b6f4e] { grid-column: span 9; } .col-10[data-v-472b6f4e] { grid-column: span 10; } .col-12[data-v-472b6f4e] { grid-column: span 12; } .col-13[data-v-472b6f4e] { grid-column: span 13; } .col-14[data-v-472b6f4e] { grid-column: span 14; } .col-15[data-v-472b6f4e] { grid-column: span 15; } .col-16[data-v-472b6f4e] { grid-column: span 16; } .col-18[data-v-472b6f4e] { grid-column: span 18; } .col-20[data-v-472b6f4e] { grid-column: span 20; } .col-22[data-v-472b6f4e] { grid-column: span 22; } .col-24[data-v-472b6f4e] { grid-column: span 24; } .col-26[data-v-472b6f4e] { grid-column: span 26; } .col-27[data-v-472b6f4e] { grid-column: span 27; } .col-28[data-v-472b6f4e] { grid-column: span 28; } .col-30[data-v-472b6f4e] { grid-column: span 30; } .col-36[data-v-472b6f4e] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-472b6f4e] { display: none; } .col-md-36[data-v-472b6f4e] { grid-column: span 36; } .col-md-28[data-v-472b6f4e] { grid-column: span 28; } .col-md-27[data-v-472b6f4e] { grid-column: span 27; } .col-md-24[data-v-472b6f4e] { grid-column: span 24; } .col-md-22[data-v-472b6f4e] { grid-column: span 22; } .col-md-20[data-v-472b6f4e] { grid-column: span 20; } .col-md-19[data-v-472b6f4e] { grid-column: span 19; } .col-md-18[data-v-472b6f4e] { grid-column: span 18; } .col-md-17[data-v-472b6f4e] { grid-column: span 17; } .col-md-16[data-v-472b6f4e] { grid-column: span 16; } .col-md-15[data-v-472b6f4e] { grid-column: span 15; } .col-md-14[data-v-472b6f4e] { grid-column: span 14; } .col-md-13[data-v-472b6f4e] { grid-column: span 13; } .col-md-12[data-v-472b6f4e] { grid-column: span 12; } .col-md-10[data-v-472b6f4e] { grid-column: span 10; } .col-md-9[data-v-472b6f4e] { grid-column: span 9; } .col-md-8[data-v-472b6f4e] { grid-column: span 8; } .col-md-6[data-v-472b6f4e] { grid-column: span 6; } .col-md-5[data-v-472b6f4e] { grid-column: span 5; } .col-md-4[data-v-472b6f4e] { grid-column: span 4; } .col-md-3[data-v-472b6f4e] { grid-column: span 3; } .col-md-2[data-v-472b6f4e] { grid-column: span 2; } .col-md-1[data-v-472b6f4e] { grid-column: span 1; } .col-md-auto[data-v-472b6f4e] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-472b6f4e] { display: none; } .col-sm-36[data-v-472b6f4e] { grid-column: span 36; } .col-sm-32[data-v-472b6f4e] { grid-column: span 32; } .col-sm-28[data-v-472b6f4e] { grid-column: span 28; } .col-sm-27[data-v-472b6f4e] { grid-column: span 27; } .col-sm-24[data-v-472b6f4e] { grid-column: span 24; } .col-sm-22[data-v-472b6f4e] { grid-column: span 22; } .col-sm-20[data-v-472b6f4e] { grid-column: span 20; } .col-sm-18[data-v-472b6f4e] { grid-column: span 18; } .col-sm-16[data-v-472b6f4e] { grid-column: span 16; } .col-sm-15[data-v-472b6f4e] { grid-column: span 15; } .col-sm-14[data-v-472b6f4e] { grid-column: span 14; } .col-sm-13[data-v-472b6f4e] { grid-column: span 12; } .col-sm-12[data-v-472b6f4e] { grid-column: span 12; } .col-sm-10[data-v-472b6f4e] { grid-column: span 10; } .col-sm-9[data-v-472b6f4e] { grid-column: span 8; } .col-sm-8[data-v-472b6f4e] { grid-column: span 8; } .col-sm-6[data-v-472b6f4e] { grid-column: span 6; } .col-sm-4[data-v-472b6f4e] { grid-column: span 4; } .col-sm-auto[data-v-472b6f4e] { grid-column: auto; } } .fade-enter-active[data-v-472b6f4e] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-472b6f4e] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-472b6f4e], .fade-leave-to[data-v-472b6f4e] { opacity: 0; } @keyframes flash-472b6f4e { 0% { background: rgba(var(--primary-600-rgb), 0.35); } 50% { background: rgba(var(--primary-600-rgb), 0.1); } 100% { background: transparent; } } .conversation-item[data-v-472b6f4e] { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px; border-radius: 12px; cursor: pointer; transition: all 0.25s ease; border: 1px solid transparent; background: transparent; position: relative; /* 🌫 Séparateur */ } .conversation-item[data-v-472b6f4e]::after { content: ''; position: absolute; bottom: -3px; left: 52px; right: 10px; height: 1px; background: var(--admin-border-subtle); opacity: 0.5; transition: opacity 0.25s ease; } .conversation-item--new[data-v-472b6f4e] { animation: flash-472b6f4e 0.8s ease-out; border-color: var(--primary-600); box-shadow: 0 0 6px rgba(var(--primary-600-rgb), 0.4); } .conversation-item[data-v-472b6f4e]:last-child::after { display: none; } .conversation-item[data-v-472b6f4e]:hover { background: rgba(var(--primary-600-rgb), 0.07); border-color: rgba(var(--primary-600-rgb), 0.12); box-shadow: 0 2px 6px rgba(var(--primary-600-rgb), 0.08); transform: translateY(-1px); } .conversation-item[data-v-472b6f4e]:hover::after { opacity: 0; } .conversation-item--active[data-v-472b6f4e] { background: rgba(var(--primary-600-rgb), 0.16); border-left: 4px solid var(--primary-600); border-color: rgba(var(--primary-600-rgb), 0.25); box-shadow: inset 3px 0 0 rgba(var(--primary-600-rgb), 0.18), 0 1px 6px rgba(var(--primary-600-rgb), 0.1); transform: translateY(0); } .conversation-item--active[data-v-472b6f4e]::after { opacity: 0; } .conversation-item__avatar[data-v-472b6f4e] { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--admin-bg-surface); border: 1px solid var(--admin-border-subtle); display: flex; align-items: center; justify-content: center; color: var(--primary-600); transition: all 0.2s ease; } .conversation-item:hover .conversation-item__avatar[data-v-472b6f4e] { border-color: rgba(var(--primary-600-rgb), 0.3); color: var(--primary-700); } .conversation-item__content[data-v-472b6f4e] { flex: 1; display: flex; flex-direction: column; gap: 5px; overflow: hidden; } .conversation-item__header[data-v-472b6f4e] { font-size: 14px; font-weight: 600; color: var(--admin-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s ease; } .conversation-item:hover .conversation-item__header[data-v-472b6f4e] { color: var(--primary-700); } .conversation-item__footer[data-v-472b6f4e] { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .conversation-item__preview-wrapper[data-v-472b6f4e] { flex: 1; position: relative; min-height: 18px; display: flex; align-items: center; } .conversation-item__preview[data-v-472b6f4e], .conversation-item__typing-indicator[data-v-472b6f4e] { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; transition: opacity 0.25s ease; } .conversation-item__preview[data-v-472b6f4e] { font-size: 13px; color: var(--admin-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversation-item__typing-indicator[data-v-472b6f4e] { gap: 4px; height: 18px; } .conversation-item__dot[data-v-472b6f4e] { width: 5px; height: 5px; background: var(--admin-text-muted); border-radius: 50%; animation: typingDots-472b6f4e 1.3s infinite ease-in-out; } .conversation-item__dot[data-v-472b6f4e]:nth-child(2) { animation-delay: 0.2s; } .conversation-item__dot[data-v-472b6f4e]:nth-child(3) { animation-delay: 0.4s; } .conversation-item__meta[data-v-472b6f4e] { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .conversation-item__time[data-v-472b6f4e] { font-size: 12px; color: var(--admin-text-muted); white-space: nowrap; } .conversation-item__badge[data-v-472b6f4e] { background: var(--primary-600); color: var(--admin-text-inverse); font-size: 12px; font-weight: 600; border-radius: 999px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 1px 3px rgba(var(--primary-600-rgb), 0.3); } @keyframes typingDots-472b6f4e { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-bcd982c7]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-bcd982c7] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-bcd982c7] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-bcd982c7]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-bcd982c7], .theme-mode-light[data-v-bcd982c7] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-bcd982c7], .theme-mode-dark[data-v-bcd982c7] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-bcd982c7]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-bcd982c7]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-bcd982c7] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-bcd982c7] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-bcd982c7]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-bcd982c7], input[disabled][data-v-bcd982c7] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-bcd982c7] { opacity: 0.9; } input[readonly][data-v-bcd982c7] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-bcd982c7] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-bcd982c7]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-bcd982c7]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-bcd982c7]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-bcd982c7] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-bcd982c7]:nth-child(odd), .list-card-desktop__wrapper[data-v-bcd982c7]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-bcd982c7]:nth-child(even), .list-card-desktop__wrapper[data-v-bcd982c7]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-bcd982c7]:nth-child(odd), .listCardDesktopWrapper[data-v-bcd982c7]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-bcd982c7]:nth-child(even), .listCardDesktopWrapper[data-v-bcd982c7]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-bcd982c7] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-bcd982c7] { cursor: pointer; } .card-layout--selectionnable[data-v-bcd982c7]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-bcd982c7] { cursor: auto; } .card-layout--drawer[data-v-bcd982c7] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-bcd982c7] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-bcd982c7] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-bcd982c7] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-bcd982c7] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-bcd982c7] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-bcd982c7]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-bcd982c7] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-bcd982c7] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-bcd982c7] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-bcd982c7] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-bcd982c7] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-bcd982c7] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-bcd982c7] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-bcd982c7] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-bcd982c7] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-bcd982c7] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-bcd982c7] { background-color: #eb1515; } .color-chip--dossiers[data-v-bcd982c7] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-bcd982c7] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-bcd982c7] { background-color: #00a79b; } .color-chip--virements[data-v-bcd982c7] { background-color: var(--secondary-400); } .color-chip--factures[data-v-bcd982c7] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-bcd982c7] { background-color: #eb1515; } .color-recherche-dossiers[data-v-bcd982c7] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-bcd982c7] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-bcd982c7] { background-color: #00a79b; } .color-recherche-virements[data-v-bcd982c7] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-bcd982c7] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-bcd982c7] { color: #00a79b; cursor: pointer; } .scrollable[data-v-bcd982c7] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-bcd982c7] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-bcd982c7] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-bcd982c7] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-bcd982c7] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-bcd982c7] { font-weight: 800; } .grid-cell--column[data-v-bcd982c7] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-bcd982c7] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-bcd982c7] { fill: #00a79b; } .grid-cell--disabled[data-v-bcd982c7] { color: #cccccc; } .grid-cell--disabled svg[data-v-bcd982c7] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-bcd982c7] { white-space: nowrap; } .grid-cell--danger svg[data-v-bcd982c7] { fill: #eb1515; } .grid-cell--span-1[data-v-bcd982c7] { grid-column: span 1; } .grid-cell--span-2[data-v-bcd982c7] { grid-column: span 2; } .grid-cell--span-3[data-v-bcd982c7] { grid-column: span 3; } .grid-cell--span-4[data-v-bcd982c7] { grid-column: span 4; } .grid-cell--span-5[data-v-bcd982c7] { grid-column: span 5; } .grid-cell--span-6[data-v-bcd982c7] { grid-column: span 6; } .grid-cell--span-7[data-v-bcd982c7] { grid-column: span 7; } .grid-cell--span-8[data-v-bcd982c7] { grid-column: span 8; } .grid-cell--span-9[data-v-bcd982c7] { grid-column: span 9; } .grid-cell--span-10[data-v-bcd982c7] { grid-column: span 10; } .grid-cell--span-12[data-v-bcd982c7] { grid-column: span 12; } .grid-cell--span-13[data-v-bcd982c7] { grid-column: span 13; } .grid-cell--span-14[data-v-bcd982c7] { grid-column: span 14; } .grid-cell--span-16[data-v-bcd982c7] { grid-column: span 16; } .grid-cell--span-18[data-v-bcd982c7] { grid-column: span 18; } .grid-cell--span-20[data-v-bcd982c7] { grid-column: span 20; } .grid-cell--span-32[data-v-bcd982c7] { grid-column: span 32; } .grid-cell--span-36[data-v-bcd982c7] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-bcd982c7] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-bcd982c7] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-bcd982c7] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-bcd982c7] { justify-content: center !important; } .elem--bold span[data-v-bcd982c7] { font-weight: 800; } .elem--column[data-v-bcd982c7] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-bcd982c7] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-bcd982c7] { fill: #00a79b; } .elem--clickable[data-v-bcd982c7]:hover { cursor: pointer; } .elem--disabled[data-v-bcd982c7] { color: #cccccc; } .elem--disabled svg[data-v-bcd982c7] { fill: #cccccc; } .elem--nowrap span[data-v-bcd982c7] { white-space: nowrap; } .elem--danger svg[data-v-bcd982c7] { fill: #eb1515; } .elem--span-1[data-v-bcd982c7] { grid-column: span 1; } .elem--span-2[data-v-bcd982c7] { grid-column: span 2; } .elem--span-3[data-v-bcd982c7] { grid-column: span 3; } .elem--span-4[data-v-bcd982c7] { grid-column: span 4; } .elem--span-5[data-v-bcd982c7] { grid-column: span 5; } .elem--span-6[data-v-bcd982c7] { grid-column: span 6; } .elem--span-7[data-v-bcd982c7] { grid-column: span 7; } .elem--span-8[data-v-bcd982c7] { grid-column: span 8; } .elem--span-9[data-v-bcd982c7] { grid-column: span 9; } .elem--span-10[data-v-bcd982c7] { grid-column: span 10; } .elem--span-12[data-v-bcd982c7] { grid-column: span 12; } .elem--span-13[data-v-bcd982c7] { grid-column: span 13; } .elem--span-14[data-v-bcd982c7] { grid-column: span 14; } .elem--span-16[data-v-bcd982c7] { grid-column: span 16; } .elem--span-18[data-v-bcd982c7] { grid-column: span 18; } .elem--span-20[data-v-bcd982c7] { grid-column: span 20; } .elem--span-32[data-v-bcd982c7] { grid-column: span 32; } .elem--span-36[data-v-bcd982c7] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-bcd982c7] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-bcd982c7] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-bcd982c7]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-bcd982c7] { display: flex; } /* flex-direction */ .flex-column[data-v-bcd982c7] { flex-direction: column; } .flex-row[data-v-bcd982c7] { flex-direction: row; } /* flex */ .flex-1[data-v-bcd982c7] { flex: 1 !important; } .flex-2[data-v-bcd982c7] { flex: 2; } .flex-3[data-v-bcd982c7] { flex: 3; } .flex-3[data-v-bcd982c7] { flex: 4; } .flex-5[data-v-bcd982c7] { flex: 5; } .flex-auto[data-v-bcd982c7] { flex: auto; } .flex-none[data-v-bcd982c7] { flex: none; } .flex-content[data-v-bcd982c7] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-bcd982c7] { flex-wrap: wrap; } .flex-nowrap[data-v-bcd982c7] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-bcd982c7] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-bcd982c7] { justify-content: flex-start; } .justify-content-end[data-v-bcd982c7] { justify-content: flex-end; } .justify-content-baseline[data-v-bcd982c7] { justify-content: baseline; } .justify-content-center[data-v-bcd982c7] { justify-content: center; } .justify-content-space-between[data-v-bcd982c7] { justify-content: space-between; } .justify-content-space-around[data-v-bcd982c7] { justify-content: space-around; } .justify-content-space-evenly[data-v-bcd982c7] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-bcd982c7] { align-items: flex-start; } .align-items-flex-end[data-v-bcd982c7] { align-items: flex-end; } .align-items-stretch[data-v-bcd982c7] { align-items: stretch; } .align-items-baseline[data-v-bcd982c7] { align-items: baseline; } .align-items-center[data-v-bcd982c7] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-bcd982c7] { align-content: flex-start; } .align-content-flex-end[data-v-bcd982c7] { align-content: flex-end; } .align-content-center[data-v-bcd982c7] { align-content: center; } .align-content-stretch[data-v-bcd982c7] { align-content: stretch; } .align-content-space-between[data-v-bcd982c7] { align-content: space-between; } .align-content-space-around[data-v-bcd982c7] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-bcd982c7] { align-self: flex-start; } .align-self-flex-end[data-v-bcd982c7] { align-self: flex-end; } .align-self-stretch[data-v-bcd982c7] { align-self: stretch; } .align-self-flex-baseline[data-v-bcd982c7] { align-self: baseline; } .align-self-center[data-v-bcd982c7] { align-self: center; } .align-self-auto[data-v-bcd982c7] { align-self: auto; } .flex-gap-1[data-v-bcd982c7] { gap: 4px; } .flex-gap-2[data-v-bcd982c7] { gap: 8px; } .flex-gap-3[data-v-bcd982c7] { gap: 12px; } .flex-gap-4[data-v-bcd982c7] { gap: 16px; } .flex-gap-5[data-v-bcd982c7] { gap: 20px; } .flex-gap-6[data-v-bcd982c7] { gap: 24px; } .flex-gap-7[data-v-bcd982c7] { gap: 28px; } .flex-gap-8[data-v-bcd982c7] { gap: 32px; } .flex-gap-10[data-v-bcd982c7] { gap: 40px; } .flex-gap-12[data-v-bcd982c7] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-bcd982c7] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-bcd982c7] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-bcd982c7] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-bcd982c7] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-bcd982c7] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-bcd982c7] { display: none !important; } } .col-none[data-v-bcd982c7] { display: none; } .col-auto[data-v-bcd982c7] { grid-column: auto; } .col-1[data-v-bcd982c7] { grid-column: span 1; } .col-2[data-v-bcd982c7] { grid-column: span 2; } .col-3[data-v-bcd982c7] { grid-column: span 3; } .col-4[data-v-bcd982c7] { grid-column: span 4; } .col-5[data-v-bcd982c7] { grid-column: span 5; } .col-6[data-v-bcd982c7] { grid-column: span 6; } .col-7[data-v-bcd982c7] { grid-column: span 7; } .col-8[data-v-bcd982c7] { grid-column: span 8; } .col-9[data-v-bcd982c7] { grid-column: span 9; } .col-10[data-v-bcd982c7] { grid-column: span 10; } .col-12[data-v-bcd982c7] { grid-column: span 12; } .col-13[data-v-bcd982c7] { grid-column: span 13; } .col-14[data-v-bcd982c7] { grid-column: span 14; } .col-15[data-v-bcd982c7] { grid-column: span 15; } .col-16[data-v-bcd982c7] { grid-column: span 16; } .col-18[data-v-bcd982c7] { grid-column: span 18; } .col-20[data-v-bcd982c7] { grid-column: span 20; } .col-22[data-v-bcd982c7] { grid-column: span 22; } .col-24[data-v-bcd982c7] { grid-column: span 24; } .col-26[data-v-bcd982c7] { grid-column: span 26; } .col-27[data-v-bcd982c7] { grid-column: span 27; } .col-28[data-v-bcd982c7] { grid-column: span 28; } .col-30[data-v-bcd982c7] { grid-column: span 30; } .col-36[data-v-bcd982c7] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-bcd982c7] { display: none; } .col-md-36[data-v-bcd982c7] { grid-column: span 36; } .col-md-28[data-v-bcd982c7] { grid-column: span 28; } .col-md-27[data-v-bcd982c7] { grid-column: span 27; } .col-md-24[data-v-bcd982c7] { grid-column: span 24; } .col-md-22[data-v-bcd982c7] { grid-column: span 22; } .col-md-20[data-v-bcd982c7] { grid-column: span 20; } .col-md-19[data-v-bcd982c7] { grid-column: span 19; } .col-md-18[data-v-bcd982c7] { grid-column: span 18; } .col-md-17[data-v-bcd982c7] { grid-column: span 17; } .col-md-16[data-v-bcd982c7] { grid-column: span 16; } .col-md-15[data-v-bcd982c7] { grid-column: span 15; } .col-md-14[data-v-bcd982c7] { grid-column: span 14; } .col-md-13[data-v-bcd982c7] { grid-column: span 13; } .col-md-12[data-v-bcd982c7] { grid-column: span 12; } .col-md-10[data-v-bcd982c7] { grid-column: span 10; } .col-md-9[data-v-bcd982c7] { grid-column: span 9; } .col-md-8[data-v-bcd982c7] { grid-column: span 8; } .col-md-6[data-v-bcd982c7] { grid-column: span 6; } .col-md-5[data-v-bcd982c7] { grid-column: span 5; } .col-md-4[data-v-bcd982c7] { grid-column: span 4; } .col-md-3[data-v-bcd982c7] { grid-column: span 3; } .col-md-2[data-v-bcd982c7] { grid-column: span 2; } .col-md-1[data-v-bcd982c7] { grid-column: span 1; } .col-md-auto[data-v-bcd982c7] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-bcd982c7] { display: none; } .col-sm-36[data-v-bcd982c7] { grid-column: span 36; } .col-sm-32[data-v-bcd982c7] { grid-column: span 32; } .col-sm-28[data-v-bcd982c7] { grid-column: span 28; } .col-sm-27[data-v-bcd982c7] { grid-column: span 27; } .col-sm-24[data-v-bcd982c7] { grid-column: span 24; } .col-sm-22[data-v-bcd982c7] { grid-column: span 22; } .col-sm-20[data-v-bcd982c7] { grid-column: span 20; } .col-sm-18[data-v-bcd982c7] { grid-column: span 18; } .col-sm-16[data-v-bcd982c7] { grid-column: span 16; } .col-sm-15[data-v-bcd982c7] { grid-column: span 15; } .col-sm-14[data-v-bcd982c7] { grid-column: span 14; } .col-sm-13[data-v-bcd982c7] { grid-column: span 12; } .col-sm-12[data-v-bcd982c7] { grid-column: span 12; } .col-sm-10[data-v-bcd982c7] { grid-column: span 10; } .col-sm-9[data-v-bcd982c7] { grid-column: span 8; } .col-sm-8[data-v-bcd982c7] { grid-column: span 8; } .col-sm-6[data-v-bcd982c7] { grid-column: span 6; } .col-sm-4[data-v-bcd982c7] { grid-column: span 4; } .col-sm-auto[data-v-bcd982c7] { grid-column: auto; } } .fade-enter-active[data-v-bcd982c7] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-bcd982c7] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-bcd982c7], .fade-leave-to[data-v-bcd982c7] { opacity: 0; } .chat-sidebar[data-v-bcd982c7] { background: var(--admin-bg-surface); border-right: 1px solid var(--admin-border-subtle); display: flex; flex-direction: column; height: 100%; overflow: hidden; scrollbar-width: thin; border-top-left-radius: 16px; } .chat-sidebar__status[data-v-bcd982c7] { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--admin-border-subtle); gap: 10px; background: var(--admin-bg-surface); } .chat-sidebar__status-left[data-v-bcd982c7] { display: flex; align-items: center; gap: 12px; } .chat-sidebar__avatar[data-v-bcd982c7] { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--admin-border-subtle); background: var(--admin-bg-card); } .chat-sidebar__avatar img[data-v-bcd982c7] { width: 100%; height: 100%; object-fit: cover; } .chat-sidebar__avatar-placeholder[data-v-bcd982c7] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--admin-text-muted); } .chat-sidebar__user-info[data-v-bcd982c7] { display: flex; flex-direction: column; line-height: 1.3; } .chat-sidebar__status-dot[data-v-bcd982c7] { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success-500); display: inline-block; margin-right: 4px; box-shadow: 0 0 5px rgba(var(--success-500-rgb), 0.4); } .chat-sidebar__status-dot[data-v-bcd982c7]::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(var(--success-500-rgb), 0.35); animation: pulse-status-bcd982c7 2s infinite ease-in-out; } .chat-sidebar__search[data-v-bcd982c7] { position: sticky; top: 70px; z-index: 9; display: flex; align-items: center; gap: 8px; background: var(--admin-bg-subtle); padding: 8px 10px; border-bottom: 1px solid var(--admin-border-subtle); } .chat-sidebar__search .search-icon[data-v-bcd982c7] { color: var(--admin-text-muted); flex-shrink: 0; } .chat-sidebar__search input[data-v-bcd982c7] { flex: 1; border: 1px solid var(--admin-border-subtle); border-radius: 8px; padding: 6px 10px; font-size: 14px; background: var(--admin-bg-surface); color: var(--admin-text-primary); transition: border-color 0.2s ease; } .chat-sidebar__search input[data-v-bcd982c7]:focus { outline: none; border-color: var(--primary-500); } .chat-sidebar__search input[data-v-bcd982c7]::placeholder { color: var(--admin-text-muted); } .chat-sidebar__search .clear-btn[data-v-bcd982c7] { border: none; background: none; color: var(--admin-text-muted); cursor: pointer; padding: 2px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .chat-sidebar__search .clear-btn[data-v-bcd982c7]:hover { color: var(--admin-text-secondary); } .chat-sidebar__conversation-list[data-v-bcd982c7] { flex: 1; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scroll-behavior: smooth; background: rgba(var(--primary-200-rgb), 0.75); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--admin-border-subtle); } .chat-sidebar__empty-state[data-v-bcd982c7] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; } @keyframes pulse-status-bcd982c7 { 0% { opacity: 0.8; } 50% { opacity: 0.2; } 100% { opacity: 0; } } /* ------------------------- Mobile responsive ------------------------- */ @media (max-width: 720px) { .chat-sidebar[data-v-bcd982c7] { width: 100%; border-right: none; border-radius: 12px; min-height: 400px; } .chat-sidebar__status[data-v-bcd982c7] { padding: 14px 16px; } .chat-sidebar__avatar[data-v-bcd982c7] { width: 44px; height: 44px; } .chat-sidebar__conversation-list[data-v-bcd982c7] { border-radius: 0 0 12px 12px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-fa9e12be]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-fa9e12be] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-fa9e12be] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-fa9e12be]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-fa9e12be], .theme-mode-light[data-v-fa9e12be] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-fa9e12be], .theme-mode-dark[data-v-fa9e12be] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-fa9e12be]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-fa9e12be]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-fa9e12be] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-fa9e12be] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-fa9e12be]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-fa9e12be], input[disabled][data-v-fa9e12be] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-fa9e12be] { opacity: 0.9; } input[readonly][data-v-fa9e12be] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-fa9e12be] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-fa9e12be]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-fa9e12be]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-fa9e12be]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-fa9e12be] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-fa9e12be]:nth-child(odd), .list-card-desktop__wrapper[data-v-fa9e12be]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-fa9e12be]:nth-child(even), .list-card-desktop__wrapper[data-v-fa9e12be]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-fa9e12be]:nth-child(odd), .listCardDesktopWrapper[data-v-fa9e12be]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-fa9e12be]:nth-child(even), .listCardDesktopWrapper[data-v-fa9e12be]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-fa9e12be] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-fa9e12be] { cursor: pointer; } .card-layout--selectionnable[data-v-fa9e12be]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-fa9e12be] { cursor: auto; } .card-layout--drawer[data-v-fa9e12be] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-fa9e12be] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-fa9e12be] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-fa9e12be] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-fa9e12be] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-fa9e12be] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-fa9e12be]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-fa9e12be] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-fa9e12be] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-fa9e12be] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-fa9e12be] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-fa9e12be] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-fa9e12be] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-fa9e12be] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-fa9e12be] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-fa9e12be] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-fa9e12be] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-fa9e12be] { background-color: #eb1515; } .color-chip--dossiers[data-v-fa9e12be] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-fa9e12be] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-fa9e12be] { background-color: #00a79b; } .color-chip--virements[data-v-fa9e12be] { background-color: var(--secondary-400); } .color-chip--factures[data-v-fa9e12be] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-fa9e12be] { background-color: #eb1515; } .color-recherche-dossiers[data-v-fa9e12be] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-fa9e12be] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-fa9e12be] { background-color: #00a79b; } .color-recherche-virements[data-v-fa9e12be] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-fa9e12be] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-fa9e12be] { color: #00a79b; cursor: pointer; } .scrollable[data-v-fa9e12be] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-fa9e12be] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-fa9e12be] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-fa9e12be] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-fa9e12be] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-fa9e12be] { font-weight: 800; } .grid-cell--column[data-v-fa9e12be] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-fa9e12be] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-fa9e12be] { fill: #00a79b; } .grid-cell--disabled[data-v-fa9e12be] { color: #cccccc; } .grid-cell--disabled svg[data-v-fa9e12be] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-fa9e12be] { white-space: nowrap; } .grid-cell--danger svg[data-v-fa9e12be] { fill: #eb1515; } .grid-cell--span-1[data-v-fa9e12be] { grid-column: span 1; } .grid-cell--span-2[data-v-fa9e12be] { grid-column: span 2; } .grid-cell--span-3[data-v-fa9e12be] { grid-column: span 3; } .grid-cell--span-4[data-v-fa9e12be] { grid-column: span 4; } .grid-cell--span-5[data-v-fa9e12be] { grid-column: span 5; } .grid-cell--span-6[data-v-fa9e12be] { grid-column: span 6; } .grid-cell--span-7[data-v-fa9e12be] { grid-column: span 7; } .grid-cell--span-8[data-v-fa9e12be] { grid-column: span 8; } .grid-cell--span-9[data-v-fa9e12be] { grid-column: span 9; } .grid-cell--span-10[data-v-fa9e12be] { grid-column: span 10; } .grid-cell--span-12[data-v-fa9e12be] { grid-column: span 12; } .grid-cell--span-13[data-v-fa9e12be] { grid-column: span 13; } .grid-cell--span-14[data-v-fa9e12be] { grid-column: span 14; } .grid-cell--span-16[data-v-fa9e12be] { grid-column: span 16; } .grid-cell--span-18[data-v-fa9e12be] { grid-column: span 18; } .grid-cell--span-20[data-v-fa9e12be] { grid-column: span 20; } .grid-cell--span-32[data-v-fa9e12be] { grid-column: span 32; } .grid-cell--span-36[data-v-fa9e12be] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-fa9e12be] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-fa9e12be] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-fa9e12be] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-fa9e12be] { justify-content: center !important; } .elem--bold span[data-v-fa9e12be] { font-weight: 800; } .elem--column[data-v-fa9e12be] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-fa9e12be] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-fa9e12be] { fill: #00a79b; } .elem--clickable[data-v-fa9e12be]:hover { cursor: pointer; } .elem--disabled[data-v-fa9e12be] { color: #cccccc; } .elem--disabled svg[data-v-fa9e12be] { fill: #cccccc; } .elem--nowrap span[data-v-fa9e12be] { white-space: nowrap; } .elem--danger svg[data-v-fa9e12be] { fill: #eb1515; } .elem--span-1[data-v-fa9e12be] { grid-column: span 1; } .elem--span-2[data-v-fa9e12be] { grid-column: span 2; } .elem--span-3[data-v-fa9e12be] { grid-column: span 3; } .elem--span-4[data-v-fa9e12be] { grid-column: span 4; } .elem--span-5[data-v-fa9e12be] { grid-column: span 5; } .elem--span-6[data-v-fa9e12be] { grid-column: span 6; } .elem--span-7[data-v-fa9e12be] { grid-column: span 7; } .elem--span-8[data-v-fa9e12be] { grid-column: span 8; } .elem--span-9[data-v-fa9e12be] { grid-column: span 9; } .elem--span-10[data-v-fa9e12be] { grid-column: span 10; } .elem--span-12[data-v-fa9e12be] { grid-column: span 12; } .elem--span-13[data-v-fa9e12be] { grid-column: span 13; } .elem--span-14[data-v-fa9e12be] { grid-column: span 14; } .elem--span-16[data-v-fa9e12be] { grid-column: span 16; } .elem--span-18[data-v-fa9e12be] { grid-column: span 18; } .elem--span-20[data-v-fa9e12be] { grid-column: span 20; } .elem--span-32[data-v-fa9e12be] { grid-column: span 32; } .elem--span-36[data-v-fa9e12be] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-fa9e12be] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-fa9e12be] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-fa9e12be]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-fa9e12be] { display: flex; } /* flex-direction */ .flex-column[data-v-fa9e12be] { flex-direction: column; } .flex-row[data-v-fa9e12be] { flex-direction: row; } /* flex */ .flex-1[data-v-fa9e12be] { flex: 1 !important; } .flex-2[data-v-fa9e12be] { flex: 2; } .flex-3[data-v-fa9e12be] { flex: 3; } .flex-3[data-v-fa9e12be] { flex: 4; } .flex-5[data-v-fa9e12be] { flex: 5; } .flex-auto[data-v-fa9e12be] { flex: auto; } .flex-none[data-v-fa9e12be] { flex: none; } .flex-content[data-v-fa9e12be] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-fa9e12be] { flex-wrap: wrap; } .flex-nowrap[data-v-fa9e12be] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-fa9e12be] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-fa9e12be] { justify-content: flex-start; } .justify-content-end[data-v-fa9e12be] { justify-content: flex-end; } .justify-content-baseline[data-v-fa9e12be] { justify-content: baseline; } .justify-content-center[data-v-fa9e12be] { justify-content: center; } .justify-content-space-between[data-v-fa9e12be] { justify-content: space-between; } .justify-content-space-around[data-v-fa9e12be] { justify-content: space-around; } .justify-content-space-evenly[data-v-fa9e12be] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-fa9e12be] { align-items: flex-start; } .align-items-flex-end[data-v-fa9e12be] { align-items: flex-end; } .align-items-stretch[data-v-fa9e12be] { align-items: stretch; } .align-items-baseline[data-v-fa9e12be] { align-items: baseline; } .align-items-center[data-v-fa9e12be] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-fa9e12be] { align-content: flex-start; } .align-content-flex-end[data-v-fa9e12be] { align-content: flex-end; } .align-content-center[data-v-fa9e12be] { align-content: center; } .align-content-stretch[data-v-fa9e12be] { align-content: stretch; } .align-content-space-between[data-v-fa9e12be] { align-content: space-between; } .align-content-space-around[data-v-fa9e12be] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-fa9e12be] { align-self: flex-start; } .align-self-flex-end[data-v-fa9e12be] { align-self: flex-end; } .align-self-stretch[data-v-fa9e12be] { align-self: stretch; } .align-self-flex-baseline[data-v-fa9e12be] { align-self: baseline; } .align-self-center[data-v-fa9e12be] { align-self: center; } .align-self-auto[data-v-fa9e12be] { align-self: auto; } .flex-gap-1[data-v-fa9e12be] { gap: 4px; } .flex-gap-2[data-v-fa9e12be] { gap: 8px; } .flex-gap-3[data-v-fa9e12be] { gap: 12px; } .flex-gap-4[data-v-fa9e12be] { gap: 16px; } .flex-gap-5[data-v-fa9e12be] { gap: 20px; } .flex-gap-6[data-v-fa9e12be] { gap: 24px; } .flex-gap-7[data-v-fa9e12be] { gap: 28px; } .flex-gap-8[data-v-fa9e12be] { gap: 32px; } .flex-gap-10[data-v-fa9e12be] { gap: 40px; } .flex-gap-12[data-v-fa9e12be] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-fa9e12be] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-fa9e12be] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-fa9e12be] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-fa9e12be] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-fa9e12be] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-fa9e12be] { display: none !important; } } .col-none[data-v-fa9e12be] { display: none; } .col-auto[data-v-fa9e12be] { grid-column: auto; } .col-1[data-v-fa9e12be] { grid-column: span 1; } .col-2[data-v-fa9e12be] { grid-column: span 2; } .col-3[data-v-fa9e12be] { grid-column: span 3; } .col-4[data-v-fa9e12be] { grid-column: span 4; } .col-5[data-v-fa9e12be] { grid-column: span 5; } .col-6[data-v-fa9e12be] { grid-column: span 6; } .col-7[data-v-fa9e12be] { grid-column: span 7; } .col-8[data-v-fa9e12be] { grid-column: span 8; } .col-9[data-v-fa9e12be] { grid-column: span 9; } .col-10[data-v-fa9e12be] { grid-column: span 10; } .col-12[data-v-fa9e12be] { grid-column: span 12; } .col-13[data-v-fa9e12be] { grid-column: span 13; } .col-14[data-v-fa9e12be] { grid-column: span 14; } .col-15[data-v-fa9e12be] { grid-column: span 15; } .col-16[data-v-fa9e12be] { grid-column: span 16; } .col-18[data-v-fa9e12be] { grid-column: span 18; } .col-20[data-v-fa9e12be] { grid-column: span 20; } .col-22[data-v-fa9e12be] { grid-column: span 22; } .col-24[data-v-fa9e12be] { grid-column: span 24; } .col-26[data-v-fa9e12be] { grid-column: span 26; } .col-27[data-v-fa9e12be] { grid-column: span 27; } .col-28[data-v-fa9e12be] { grid-column: span 28; } .col-30[data-v-fa9e12be] { grid-column: span 30; } .col-36[data-v-fa9e12be] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-fa9e12be] { display: none; } .col-md-36[data-v-fa9e12be] { grid-column: span 36; } .col-md-28[data-v-fa9e12be] { grid-column: span 28; } .col-md-27[data-v-fa9e12be] { grid-column: span 27; } .col-md-24[data-v-fa9e12be] { grid-column: span 24; } .col-md-22[data-v-fa9e12be] { grid-column: span 22; } .col-md-20[data-v-fa9e12be] { grid-column: span 20; } .col-md-19[data-v-fa9e12be] { grid-column: span 19; } .col-md-18[data-v-fa9e12be] { grid-column: span 18; } .col-md-17[data-v-fa9e12be] { grid-column: span 17; } .col-md-16[data-v-fa9e12be] { grid-column: span 16; } .col-md-15[data-v-fa9e12be] { grid-column: span 15; } .col-md-14[data-v-fa9e12be] { grid-column: span 14; } .col-md-13[data-v-fa9e12be] { grid-column: span 13; } .col-md-12[data-v-fa9e12be] { grid-column: span 12; } .col-md-10[data-v-fa9e12be] { grid-column: span 10; } .col-md-9[data-v-fa9e12be] { grid-column: span 9; } .col-md-8[data-v-fa9e12be] { grid-column: span 8; } .col-md-6[data-v-fa9e12be] { grid-column: span 6; } .col-md-5[data-v-fa9e12be] { grid-column: span 5; } .col-md-4[data-v-fa9e12be] { grid-column: span 4; } .col-md-3[data-v-fa9e12be] { grid-column: span 3; } .col-md-2[data-v-fa9e12be] { grid-column: span 2; } .col-md-1[data-v-fa9e12be] { grid-column: span 1; } .col-md-auto[data-v-fa9e12be] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-fa9e12be] { display: none; } .col-sm-36[data-v-fa9e12be] { grid-column: span 36; } .col-sm-32[data-v-fa9e12be] { grid-column: span 32; } .col-sm-28[data-v-fa9e12be] { grid-column: span 28; } .col-sm-27[data-v-fa9e12be] { grid-column: span 27; } .col-sm-24[data-v-fa9e12be] { grid-column: span 24; } .col-sm-22[data-v-fa9e12be] { grid-column: span 22; } .col-sm-20[data-v-fa9e12be] { grid-column: span 20; } .col-sm-18[data-v-fa9e12be] { grid-column: span 18; } .col-sm-16[data-v-fa9e12be] { grid-column: span 16; } .col-sm-15[data-v-fa9e12be] { grid-column: span 15; } .col-sm-14[data-v-fa9e12be] { grid-column: span 14; } .col-sm-13[data-v-fa9e12be] { grid-column: span 12; } .col-sm-12[data-v-fa9e12be] { grid-column: span 12; } .col-sm-10[data-v-fa9e12be] { grid-column: span 10; } .col-sm-9[data-v-fa9e12be] { grid-column: span 8; } .col-sm-8[data-v-fa9e12be] { grid-column: span 8; } .col-sm-6[data-v-fa9e12be] { grid-column: span 6; } .col-sm-4[data-v-fa9e12be] { grid-column: span 4; } .col-sm-auto[data-v-fa9e12be] { grid-column: auto; } } .fade-enter-active[data-v-fa9e12be] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-fa9e12be] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-fa9e12be], .fade-leave-to[data-v-fa9e12be] { opacity: 0; } .chat-admin[data-v-fa9e12be] { display: flex; flex-direction: column; gap: 16px; } .chat-admin__filters[data-v-fa9e12be] { display: flex; align-items: center; gap: 12px; margin-left: 16px; } .chat-admin__count[data-v-fa9e12be] { font-size: 13px; color: var(--admin-text-secondary, #94a2b8); font-weight: 500; padding: 6px 12px; background: var(--admin-bg-card, #edf1f5); border-radius: 8px; border: 1px solid var(--admin-border-subtle, transparent); } .chat-admin__layout[data-v-fa9e12be] { display: grid; grid-template-columns: 320px 1fr; background: var(--admin-bg-card, white); border-radius: 16px; box-shadow: 0 4px 24px var(--admin-shadow, color-mix(in srgb, #2b303a 6%, transparent)); border: 1px solid var(--admin-border, #e2e7ef); overflow: hidden; min-height: 600px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .chat-admin__sidebar[data-v-fa9e12be] { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--admin-border-subtle, #e2e7ef); background: var(--admin-bg-header, transparent); } .chat-admin__chat[data-v-fa9e12be] { display: flex; flex-direction: column; min-height: 0; } .chat-admin__placeholder[data-v-fa9e12be] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1; min-height: 600px; text-align: center; padding: 32px; background: var(--admin-bg-header, #f8f9fb); } .chat-admin__placeholder-icon[data-v-fa9e12be] { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--admin-bg-card, white); border-radius: 16px; color: var(--primary-500); margin-bottom: 8px; box-shadow: 0 4px 16px var(--admin-shadow, color-mix(in srgb, #2b303a 8%, transparent)); border: 1px solid var(--admin-border-subtle, transparent); } @media (max-width: 720px) { .chat-admin__filters[data-v-fa9e12be] { margin-left: 0; flex-wrap: wrap; } .chat-admin__layout[data-v-fa9e12be] { display: flex; flex-direction: column; min-height: auto; border-radius: 12px; } .chat-admin__sidebar[data-v-fa9e12be] { border-right: none; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); } .chat-admin__sidebar--hidden[data-v-fa9e12be] { display: none; } .chat-admin__chat--hidden[data-v-fa9e12be] { display: none; } .chat-admin__placeholder[data-v-fa9e12be] { min-height: 300px; padding: 24px; } .chat-admin__placeholder-icon[data-v-fa9e12be] { width: 56px; height: 56px; border-radius: 14px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-a41da6b2]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-a41da6b2] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-a41da6b2] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-a41da6b2]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-a41da6b2], .theme-mode-light[data-v-a41da6b2] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-a41da6b2], .theme-mode-dark[data-v-a41da6b2] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-a41da6b2]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-a41da6b2]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-a41da6b2] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-a41da6b2] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-a41da6b2]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-a41da6b2], input[disabled][data-v-a41da6b2] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-a41da6b2] { opacity: 0.9; } input[readonly][data-v-a41da6b2] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-a41da6b2] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-a41da6b2]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-a41da6b2]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-a41da6b2]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-a41da6b2] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-a41da6b2]:nth-child(odd), .list-card-desktop__wrapper[data-v-a41da6b2]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-a41da6b2]:nth-child(even), .list-card-desktop__wrapper[data-v-a41da6b2]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-a41da6b2]:nth-child(odd), .listCardDesktopWrapper[data-v-a41da6b2]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-a41da6b2]:nth-child(even), .listCardDesktopWrapper[data-v-a41da6b2]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-a41da6b2] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-a41da6b2] { cursor: pointer; } .card-layout--selectionnable[data-v-a41da6b2]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-a41da6b2] { cursor: auto; } .card-layout--drawer[data-v-a41da6b2] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-a41da6b2] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-a41da6b2] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-a41da6b2] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-a41da6b2] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-a41da6b2] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-a41da6b2]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-a41da6b2] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-a41da6b2] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-a41da6b2] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-a41da6b2] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-a41da6b2] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-a41da6b2] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-a41da6b2] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-a41da6b2] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-a41da6b2] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-a41da6b2] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-a41da6b2] { background-color: #eb1515; } .color-chip--dossiers[data-v-a41da6b2] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-a41da6b2] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-a41da6b2] { background-color: #00a79b; } .color-chip--virements[data-v-a41da6b2] { background-color: var(--secondary-400); } .color-chip--factures[data-v-a41da6b2] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-a41da6b2] { background-color: #eb1515; } .color-recherche-dossiers[data-v-a41da6b2] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-a41da6b2] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-a41da6b2] { background-color: #00a79b; } .color-recherche-virements[data-v-a41da6b2] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-a41da6b2] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-a41da6b2] { color: #00a79b; cursor: pointer; } .scrollable[data-v-a41da6b2] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-a41da6b2] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-a41da6b2] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-a41da6b2] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-a41da6b2] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-a41da6b2] { font-weight: 800; } .grid-cell--column[data-v-a41da6b2] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-a41da6b2] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-a41da6b2] { fill: #00a79b; } .grid-cell--disabled[data-v-a41da6b2] { color: #cccccc; } .grid-cell--disabled svg[data-v-a41da6b2] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-a41da6b2] { white-space: nowrap; } .grid-cell--danger svg[data-v-a41da6b2] { fill: #eb1515; } .grid-cell--span-1[data-v-a41da6b2] { grid-column: span 1; } .grid-cell--span-2[data-v-a41da6b2] { grid-column: span 2; } .grid-cell--span-3[data-v-a41da6b2] { grid-column: span 3; } .grid-cell--span-4[data-v-a41da6b2] { grid-column: span 4; } .grid-cell--span-5[data-v-a41da6b2] { grid-column: span 5; } .grid-cell--span-6[data-v-a41da6b2] { grid-column: span 6; } .grid-cell--span-7[data-v-a41da6b2] { grid-column: span 7; } .grid-cell--span-8[data-v-a41da6b2] { grid-column: span 8; } .grid-cell--span-9[data-v-a41da6b2] { grid-column: span 9; } .grid-cell--span-10[data-v-a41da6b2] { grid-column: span 10; } .grid-cell--span-12[data-v-a41da6b2] { grid-column: span 12; } .grid-cell--span-13[data-v-a41da6b2] { grid-column: span 13; } .grid-cell--span-14[data-v-a41da6b2] { grid-column: span 14; } .grid-cell--span-16[data-v-a41da6b2] { grid-column: span 16; } .grid-cell--span-18[data-v-a41da6b2] { grid-column: span 18; } .grid-cell--span-20[data-v-a41da6b2] { grid-column: span 20; } .grid-cell--span-32[data-v-a41da6b2] { grid-column: span 32; } .grid-cell--span-36[data-v-a41da6b2] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-a41da6b2] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-a41da6b2] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-a41da6b2] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-a41da6b2] { justify-content: center !important; } .elem--bold span[data-v-a41da6b2] { font-weight: 800; } .elem--column[data-v-a41da6b2] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-a41da6b2] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-a41da6b2] { fill: #00a79b; } .elem--clickable[data-v-a41da6b2]:hover { cursor: pointer; } .elem--disabled[data-v-a41da6b2] { color: #cccccc; } .elem--disabled svg[data-v-a41da6b2] { fill: #cccccc; } .elem--nowrap span[data-v-a41da6b2] { white-space: nowrap; } .elem--danger svg[data-v-a41da6b2] { fill: #eb1515; } .elem--span-1[data-v-a41da6b2] { grid-column: span 1; } .elem--span-2[data-v-a41da6b2] { grid-column: span 2; } .elem--span-3[data-v-a41da6b2] { grid-column: span 3; } .elem--span-4[data-v-a41da6b2] { grid-column: span 4; } .elem--span-5[data-v-a41da6b2] { grid-column: span 5; } .elem--span-6[data-v-a41da6b2] { grid-column: span 6; } .elem--span-7[data-v-a41da6b2] { grid-column: span 7; } .elem--span-8[data-v-a41da6b2] { grid-column: span 8; } .elem--span-9[data-v-a41da6b2] { grid-column: span 9; } .elem--span-10[data-v-a41da6b2] { grid-column: span 10; } .elem--span-12[data-v-a41da6b2] { grid-column: span 12; } .elem--span-13[data-v-a41da6b2] { grid-column: span 13; } .elem--span-14[data-v-a41da6b2] { grid-column: span 14; } .elem--span-16[data-v-a41da6b2] { grid-column: span 16; } .elem--span-18[data-v-a41da6b2] { grid-column: span 18; } .elem--span-20[data-v-a41da6b2] { grid-column: span 20; } .elem--span-32[data-v-a41da6b2] { grid-column: span 32; } .elem--span-36[data-v-a41da6b2] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-a41da6b2] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-a41da6b2] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-a41da6b2]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-a41da6b2] { display: flex; } /* flex-direction */ .flex-column[data-v-a41da6b2] { flex-direction: column; } .flex-row[data-v-a41da6b2] { flex-direction: row; } /* flex */ .flex-1[data-v-a41da6b2] { flex: 1 !important; } .flex-2[data-v-a41da6b2] { flex: 2; } .flex-3[data-v-a41da6b2] { flex: 3; } .flex-3[data-v-a41da6b2] { flex: 4; } .flex-5[data-v-a41da6b2] { flex: 5; } .flex-auto[data-v-a41da6b2] { flex: auto; } .flex-none[data-v-a41da6b2] { flex: none; } .flex-content[data-v-a41da6b2] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-a41da6b2] { flex-wrap: wrap; } .flex-nowrap[data-v-a41da6b2] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-a41da6b2] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-a41da6b2] { justify-content: flex-start; } .justify-content-end[data-v-a41da6b2] { justify-content: flex-end; } .justify-content-baseline[data-v-a41da6b2] { justify-content: baseline; } .justify-content-center[data-v-a41da6b2] { justify-content: center; } .justify-content-space-between[data-v-a41da6b2] { justify-content: space-between; } .justify-content-space-around[data-v-a41da6b2] { justify-content: space-around; } .justify-content-space-evenly[data-v-a41da6b2] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-a41da6b2] { align-items: flex-start; } .align-items-flex-end[data-v-a41da6b2] { align-items: flex-end; } .align-items-stretch[data-v-a41da6b2] { align-items: stretch; } .align-items-baseline[data-v-a41da6b2] { align-items: baseline; } .align-items-center[data-v-a41da6b2] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-a41da6b2] { align-content: flex-start; } .align-content-flex-end[data-v-a41da6b2] { align-content: flex-end; } .align-content-center[data-v-a41da6b2] { align-content: center; } .align-content-stretch[data-v-a41da6b2] { align-content: stretch; } .align-content-space-between[data-v-a41da6b2] { align-content: space-between; } .align-content-space-around[data-v-a41da6b2] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-a41da6b2] { align-self: flex-start; } .align-self-flex-end[data-v-a41da6b2] { align-self: flex-end; } .align-self-stretch[data-v-a41da6b2] { align-self: stretch; } .align-self-flex-baseline[data-v-a41da6b2] { align-self: baseline; } .align-self-center[data-v-a41da6b2] { align-self: center; } .align-self-auto[data-v-a41da6b2] { align-self: auto; } .flex-gap-1[data-v-a41da6b2] { gap: 4px; } .flex-gap-2[data-v-a41da6b2] { gap: 8px; } .flex-gap-3[data-v-a41da6b2] { gap: 12px; } .flex-gap-4[data-v-a41da6b2] { gap: 16px; } .flex-gap-5[data-v-a41da6b2] { gap: 20px; } .flex-gap-6[data-v-a41da6b2] { gap: 24px; } .flex-gap-7[data-v-a41da6b2] { gap: 28px; } .flex-gap-8[data-v-a41da6b2] { gap: 32px; } .flex-gap-10[data-v-a41da6b2] { gap: 40px; } .flex-gap-12[data-v-a41da6b2] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-a41da6b2] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-a41da6b2] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-a41da6b2] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-a41da6b2] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-a41da6b2] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-a41da6b2] { display: none !important; } } .col-none[data-v-a41da6b2] { display: none; } .col-auto[data-v-a41da6b2] { grid-column: auto; } .col-1[data-v-a41da6b2] { grid-column: span 1; } .col-2[data-v-a41da6b2] { grid-column: span 2; } .col-3[data-v-a41da6b2] { grid-column: span 3; } .col-4[data-v-a41da6b2] { grid-column: span 4; } .col-5[data-v-a41da6b2] { grid-column: span 5; } .col-6[data-v-a41da6b2] { grid-column: span 6; } .col-7[data-v-a41da6b2] { grid-column: span 7; } .col-8[data-v-a41da6b2] { grid-column: span 8; } .col-9[data-v-a41da6b2] { grid-column: span 9; } .col-10[data-v-a41da6b2] { grid-column: span 10; } .col-12[data-v-a41da6b2] { grid-column: span 12; } .col-13[data-v-a41da6b2] { grid-column: span 13; } .col-14[data-v-a41da6b2] { grid-column: span 14; } .col-15[data-v-a41da6b2] { grid-column: span 15; } .col-16[data-v-a41da6b2] { grid-column: span 16; } .col-18[data-v-a41da6b2] { grid-column: span 18; } .col-20[data-v-a41da6b2] { grid-column: span 20; } .col-22[data-v-a41da6b2] { grid-column: span 22; } .col-24[data-v-a41da6b2] { grid-column: span 24; } .col-26[data-v-a41da6b2] { grid-column: span 26; } .col-27[data-v-a41da6b2] { grid-column: span 27; } .col-28[data-v-a41da6b2] { grid-column: span 28; } .col-30[data-v-a41da6b2] { grid-column: span 30; } .col-36[data-v-a41da6b2] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-a41da6b2] { display: none; } .col-md-36[data-v-a41da6b2] { grid-column: span 36; } .col-md-28[data-v-a41da6b2] { grid-column: span 28; } .col-md-27[data-v-a41da6b2] { grid-column: span 27; } .col-md-24[data-v-a41da6b2] { grid-column: span 24; } .col-md-22[data-v-a41da6b2] { grid-column: span 22; } .col-md-20[data-v-a41da6b2] { grid-column: span 20; } .col-md-19[data-v-a41da6b2] { grid-column: span 19; } .col-md-18[data-v-a41da6b2] { grid-column: span 18; } .col-md-17[data-v-a41da6b2] { grid-column: span 17; } .col-md-16[data-v-a41da6b2] { grid-column: span 16; } .col-md-15[data-v-a41da6b2] { grid-column: span 15; } .col-md-14[data-v-a41da6b2] { grid-column: span 14; } .col-md-13[data-v-a41da6b2] { grid-column: span 13; } .col-md-12[data-v-a41da6b2] { grid-column: span 12; } .col-md-10[data-v-a41da6b2] { grid-column: span 10; } .col-md-9[data-v-a41da6b2] { grid-column: span 9; } .col-md-8[data-v-a41da6b2] { grid-column: span 8; } .col-md-6[data-v-a41da6b2] { grid-column: span 6; } .col-md-5[data-v-a41da6b2] { grid-column: span 5; } .col-md-4[data-v-a41da6b2] { grid-column: span 4; } .col-md-3[data-v-a41da6b2] { grid-column: span 3; } .col-md-2[data-v-a41da6b2] { grid-column: span 2; } .col-md-1[data-v-a41da6b2] { grid-column: span 1; } .col-md-auto[data-v-a41da6b2] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-a41da6b2] { display: none; } .col-sm-36[data-v-a41da6b2] { grid-column: span 36; } .col-sm-32[data-v-a41da6b2] { grid-column: span 32; } .col-sm-28[data-v-a41da6b2] { grid-column: span 28; } .col-sm-27[data-v-a41da6b2] { grid-column: span 27; } .col-sm-24[data-v-a41da6b2] { grid-column: span 24; } .col-sm-22[data-v-a41da6b2] { grid-column: span 22; } .col-sm-20[data-v-a41da6b2] { grid-column: span 20; } .col-sm-18[data-v-a41da6b2] { grid-column: span 18; } .col-sm-16[data-v-a41da6b2] { grid-column: span 16; } .col-sm-15[data-v-a41da6b2] { grid-column: span 15; } .col-sm-14[data-v-a41da6b2] { grid-column: span 14; } .col-sm-13[data-v-a41da6b2] { grid-column: span 12; } .col-sm-12[data-v-a41da6b2] { grid-column: span 12; } .col-sm-10[data-v-a41da6b2] { grid-column: span 10; } .col-sm-9[data-v-a41da6b2] { grid-column: span 8; } .col-sm-8[data-v-a41da6b2] { grid-column: span 8; } .col-sm-6[data-v-a41da6b2] { grid-column: span 6; } .col-sm-4[data-v-a41da6b2] { grid-column: span 4; } .col-sm-auto[data-v-a41da6b2] { grid-column: auto; } } .fade-enter-active[data-v-a41da6b2] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-a41da6b2] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-a41da6b2], .fade-leave-to[data-v-a41da6b2] { opacity: 0; } .admin-stats[data-v-a41da6b2] { display: flex; flex-direction: column; gap: 24px; } .stats-kpi[data-v-a41da6b2] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1160px) { .stats-kpi[data-v-a41da6b2] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .stats-kpi[data-v-a41da6b2] { grid-template-columns: 1fr; } } .kpi-card[data-v-a41da6b2] { display: flex; align-items: center; gap: 16px; background: var(--admin-bg-surface); border: 1px solid var(--admin-border-subtle); border-radius: 12px; padding: 20px; transition: all 0.2s ease; position: relative; overflow: hidden; } .kpi-card[data-v-a41da6b2]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .kpi-card--primary[data-v-a41da6b2]::before { background: var(--primary-500); } .kpi-card--success[data-v-a41da6b2]::before { background: var(--success-500); } .kpi-card--warning[data-v-a41da6b2]::before { background: var(--warning-500); } .kpi-card--info[data-v-a41da6b2]::before { background: var(--info-500); } .kpi-card[data-v-a41da6b2]:hover { border-color: var(--admin-border); box-shadow: 0 4px 12px var(--admin-shadow); } .kpi-card__icon[data-v-a41da6b2] { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-card--primary .kpi-card__icon[data-v-a41da6b2] { background: rgba(var(--primary-500-rgb), 0.1); } .kpi-card--success .kpi-card__icon[data-v-a41da6b2] { background: rgba(var(--success-500-rgb), 0.1); } .kpi-card--warning .kpi-card__icon[data-v-a41da6b2] { background: rgba(var(--warning-500-rgb), 0.1); } .kpi-card--info .kpi-card__icon[data-v-a41da6b2] { background: rgba(var(--info-500-rgb), 0.1); } .kpi-card__content[data-v-a41da6b2] { display: flex; flex-direction: column; flex: 1; min-width: 0; } .kpi-card__value[data-v-a41da6b2] { font-size: 24px; font-weight: 700; color: var(--admin-text-primary); line-height: 1.2; } .kpi-card__label[data-v-a41da6b2] { font-size: 13px; color: var(--admin-text-muted); margin-top: 2px; } .kpi-card__trend[data-v-a41da6b2] { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; } .kpi-card__trend--up[data-v-a41da6b2] { background: rgba(var(--success-500-rgb), 0.1); color: var(--success-600); } .kpi-card__trend--down[data-v-a41da6b2] { background: rgba(var(--danger-500-rgb), 0.1); color: var(--danger-600); } .stats-charts[data-v-a41da6b2] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 1160px) { .stats-charts[data-v-a41da6b2] { grid-template-columns: 1fr; } } .chart-card[data-v-a41da6b2] { background: var(--admin-bg-surface); border: 1px solid var(--admin-border-subtle); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; } .chart-card--wide[data-v-a41da6b2] { grid-column: span 2; } @media (max-width: 1160px) { .chart-card--wide[data-v-a41da6b2] { grid-column: span 1; } } .chart-card__header[data-v-a41da6b2] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .chart-card__title[data-v-a41da6b2] { display: flex; align-items: center; gap: 10px; } .chart-card__period[data-v-a41da6b2] { font-size: 12px; color: var(--admin-text-muted); background: var(--admin-bg-subtle); padding: 4px 10px; border-radius: 6px; } .chart-card__legend[data-v-a41da6b2] { display: flex; gap: 16px; } .chart-card__body[data-v-a41da6b2] { flex: 1; min-height: 200px; position: relative; } .chart-card__body--large[data-v-a41da6b2] { min-height: 280px; } .chart-card__empty[data-v-a41da6b2] { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--admin-text-muted); font-size: 14px; } .legend-item[data-v-a41da6b2] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--admin-text-secondary); } .legend-item .legend-dot[data-v-a41da6b2] { width: 10px; height: 10px; border-radius: 3px; } .legend-item--sessions .legend-dot[data-v-a41da6b2] { background: #009688; } .legend-item--users .legend-dot[data-v-a41da6b2] { background: #3B82F6; } .stats-row[data-v-a41da6b2] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1160px) { .stats-row[data-v-a41da6b2] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .stats-row[data-v-a41da6b2] { grid-template-columns: 1fr; } } .stat-block[data-v-a41da6b2] { display: flex; align-items: center; gap: 12px; background: var(--admin-bg-surface); border: 1px solid var(--admin-border-subtle); border-radius: 12px; padding: 16px; } .stat-block--online[data-v-a41da6b2] { background: linear-gradient(135deg, rgba(var(--success-500-rgb), 0.1), rgba(var(--success-500-rgb), 0.05)); border-color: rgba(var(--success-500-rgb), 0.2); flex-direction: column; align-items: flex-start; } .stat-block__header[data-v-a41da6b2] { display: flex; align-items: center; gap: 8px; } .stat-block__info[data-v-a41da6b2] { display: flex; flex-direction: column; } .stat-block__value[data-v-a41da6b2] { font-size: 20px; font-weight: 700; color: var(--admin-text-primary); } .stat-block__label[data-v-a41da6b2] { font-size: 12px; color: var(--admin-text-muted); } .stat-block__unit[data-v-a41da6b2] { font-size: 12px; font-weight: 400; color: var(--admin-text-muted); margin-left: 4px; } .pulse-dot[data-v-a41da6b2] { width: 10px; height: 10px; background: var(--success-500); border-radius: 50%; animation: pulse-a41da6b2 2s infinite; } @keyframes pulse-a41da6b2 { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } .top-clients-card[data-v-a41da6b2] { background: var(--admin-bg-surface); border: 1px solid var(--admin-border-subtle); border-radius: 12px; padding: 20px; } .top-clients-card__header[data-v-a41da6b2] { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--admin-border-subtle); } .top-clients-list[data-v-a41da6b2] { display: flex; flex-direction: column; gap: 8px; } .client-row[data-v-a41da6b2] { display: grid; grid-template-columns: 40px 44px 1fr 140px 100px 40px; gap: 12px; align-items: center; padding: 12px; background: var(--admin-bg-subtle); border-radius: 10px; transition: background 0.15s ease; } .client-row[data-v-a41da6b2]:hover { background: var(--admin-bg-card-hover); } @media (max-width: 1160px) { .client-row[data-v-a41da6b2] { grid-template-columns: 40px 44px 1fr auto; } } @media (max-width: 720px) { .client-row[data-v-a41da6b2] { grid-template-columns: 32px 40px 1fr auto; padding: 10px; gap: 8px; } } .client-row__rank[data-v-a41da6b2] { display: flex; justify-content: center; } .client-row__avatar[data-v-a41da6b2] { width: 40px; height: 40px; border-radius: 10px; background: var(--admin-border-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; } .client-row__avatar img[data-v-a41da6b2] { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 720px) { .client-row__avatar[data-v-a41da6b2] { width: 36px; height: 36px; } } .client-row__info[data-v-a41da6b2] { display: flex; flex-direction: column; min-width: 0; } .client-row__name[data-v-a41da6b2] { font-weight: 600; color: var(--admin-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .client-row__email[data-v-a41da6b2] { font-size: 12px; color: var(--admin-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .client-row__stats[data-v-a41da6b2] { display: flex; flex-direction: column; align-items: flex-end; } @media (max-width: 1160px) { .client-row__stats[data-v-a41da6b2] { display: none; } } .client-row__orders[data-v-a41da6b2] { font-size: 12px; color: var(--admin-text-muted); } .client-row__total[data-v-a41da6b2] { font-weight: 700; color: var(--success-600); } .client-row__date[data-v-a41da6b2] { font-size: 12px; color: var(--admin-text-muted); text-align: right; } @media (max-width: 1160px) { .client-row__date[data-v-a41da6b2] { display: none; } } .client-row__action[data-v-a41da6b2] { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(var(--primary-500-rgb), 0.1); transition: all 0.15s ease; } .client-row__action[data-v-a41da6b2]:hover { background: rgba(var(--primary-500-rgb), 0.2); } .rank[data-v-a41da6b2] { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .rank--1[data-v-a41da6b2] { background: linear-gradient(135deg, #FFD700, #FFA500); color: #7c4d00; } .rank--2[data-v-a41da6b2] { background: linear-gradient(135deg, #E8E8E8, #C0C0C0); color: #555; } .rank--3[data-v-a41da6b2] { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; } .rank--4[data-v-a41da6b2], .rank--5[data-v-a41da6b2] { background: var(--admin-border-subtle); color: var(--admin-text-muted); } .top-clients-empty[data-v-a41da6b2] { text-align: center; padding: 40px; color: var(--admin-text-muted); font-size: 14px; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-0b147647]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-0b147647] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-0b147647] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-0b147647]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-0b147647], .theme-mode-light[data-v-0b147647] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-0b147647], .theme-mode-dark[data-v-0b147647] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-0b147647]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-0b147647]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-0b147647] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-0b147647] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-0b147647]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-0b147647], input[disabled][data-v-0b147647] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-0b147647] { opacity: 0.9; } input[readonly][data-v-0b147647] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-0b147647] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-0b147647]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-0b147647]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-0b147647]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-0b147647] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-0b147647]:nth-child(odd), .list-card-desktop__wrapper[data-v-0b147647]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-0b147647]:nth-child(even), .list-card-desktop__wrapper[data-v-0b147647]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-0b147647]:nth-child(odd), .listCardDesktopWrapper[data-v-0b147647]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-0b147647]:nth-child(even), .listCardDesktopWrapper[data-v-0b147647]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-0b147647] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-0b147647] { cursor: pointer; } .card-layout--selectionnable[data-v-0b147647]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-0b147647] { cursor: auto; } .card-layout--drawer[data-v-0b147647] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-0b147647] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-0b147647] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-0b147647] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-0b147647] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-0b147647] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-0b147647]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-0b147647] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-0b147647] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-0b147647] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-0b147647] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-0b147647] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-0b147647] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-0b147647] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-0b147647] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-0b147647] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-0b147647] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-0b147647] { background-color: #eb1515; } .color-chip--dossiers[data-v-0b147647] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-0b147647] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-0b147647] { background-color: #00a79b; } .color-chip--virements[data-v-0b147647] { background-color: var(--secondary-400); } .color-chip--factures[data-v-0b147647] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-0b147647] { background-color: #eb1515; } .color-recherche-dossiers[data-v-0b147647] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-0b147647] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-0b147647] { background-color: #00a79b; } .color-recherche-virements[data-v-0b147647] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-0b147647] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-0b147647] { color: #00a79b; cursor: pointer; } .scrollable[data-v-0b147647] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-0b147647] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-0b147647] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-0b147647] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-0b147647] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-0b147647] { font-weight: 800; } .grid-cell--column[data-v-0b147647] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-0b147647] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-0b147647] { fill: #00a79b; } .grid-cell--disabled[data-v-0b147647] { color: #cccccc; } .grid-cell--disabled svg[data-v-0b147647] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-0b147647] { white-space: nowrap; } .grid-cell--danger svg[data-v-0b147647] { fill: #eb1515; } .grid-cell--span-1[data-v-0b147647] { grid-column: span 1; } .grid-cell--span-2[data-v-0b147647] { grid-column: span 2; } .grid-cell--span-3[data-v-0b147647] { grid-column: span 3; } .grid-cell--span-4[data-v-0b147647] { grid-column: span 4; } .grid-cell--span-5[data-v-0b147647] { grid-column: span 5; } .grid-cell--span-6[data-v-0b147647] { grid-column: span 6; } .grid-cell--span-7[data-v-0b147647] { grid-column: span 7; } .grid-cell--span-8[data-v-0b147647] { grid-column: span 8; } .grid-cell--span-9[data-v-0b147647] { grid-column: span 9; } .grid-cell--span-10[data-v-0b147647] { grid-column: span 10; } .grid-cell--span-12[data-v-0b147647] { grid-column: span 12; } .grid-cell--span-13[data-v-0b147647] { grid-column: span 13; } .grid-cell--span-14[data-v-0b147647] { grid-column: span 14; } .grid-cell--span-16[data-v-0b147647] { grid-column: span 16; } .grid-cell--span-18[data-v-0b147647] { grid-column: span 18; } .grid-cell--span-20[data-v-0b147647] { grid-column: span 20; } .grid-cell--span-32[data-v-0b147647] { grid-column: span 32; } .grid-cell--span-36[data-v-0b147647] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-0b147647] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-0b147647] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-0b147647] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-0b147647] { justify-content: center !important; } .elem--bold span[data-v-0b147647] { font-weight: 800; } .elem--column[data-v-0b147647] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-0b147647] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-0b147647] { fill: #00a79b; } .elem--clickable[data-v-0b147647]:hover { cursor: pointer; } .elem--disabled[data-v-0b147647] { color: #cccccc; } .elem--disabled svg[data-v-0b147647] { fill: #cccccc; } .elem--nowrap span[data-v-0b147647] { white-space: nowrap; } .elem--danger svg[data-v-0b147647] { fill: #eb1515; } .elem--span-1[data-v-0b147647] { grid-column: span 1; } .elem--span-2[data-v-0b147647] { grid-column: span 2; } .elem--span-3[data-v-0b147647] { grid-column: span 3; } .elem--span-4[data-v-0b147647] { grid-column: span 4; } .elem--span-5[data-v-0b147647] { grid-column: span 5; } .elem--span-6[data-v-0b147647] { grid-column: span 6; } .elem--span-7[data-v-0b147647] { grid-column: span 7; } .elem--span-8[data-v-0b147647] { grid-column: span 8; } .elem--span-9[data-v-0b147647] { grid-column: span 9; } .elem--span-10[data-v-0b147647] { grid-column: span 10; } .elem--span-12[data-v-0b147647] { grid-column: span 12; } .elem--span-13[data-v-0b147647] { grid-column: span 13; } .elem--span-14[data-v-0b147647] { grid-column: span 14; } .elem--span-16[data-v-0b147647] { grid-column: span 16; } .elem--span-18[data-v-0b147647] { grid-column: span 18; } .elem--span-20[data-v-0b147647] { grid-column: span 20; } .elem--span-32[data-v-0b147647] { grid-column: span 32; } .elem--span-36[data-v-0b147647] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-0b147647] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-0b147647] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-0b147647]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-0b147647] { display: flex; } /* flex-direction */ .flex-column[data-v-0b147647] { flex-direction: column; } .flex-row[data-v-0b147647] { flex-direction: row; } /* flex */ .flex-1[data-v-0b147647] { flex: 1 !important; } .flex-2[data-v-0b147647] { flex: 2; } .flex-3[data-v-0b147647] { flex: 3; } .flex-3[data-v-0b147647] { flex: 4; } .flex-5[data-v-0b147647] { flex: 5; } .flex-auto[data-v-0b147647] { flex: auto; } .flex-none[data-v-0b147647] { flex: none; } .flex-content[data-v-0b147647] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-0b147647] { flex-wrap: wrap; } .flex-nowrap[data-v-0b147647] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-0b147647] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-0b147647] { justify-content: flex-start; } .justify-content-end[data-v-0b147647] { justify-content: flex-end; } .justify-content-baseline[data-v-0b147647] { justify-content: baseline; } .justify-content-center[data-v-0b147647] { justify-content: center; } .justify-content-space-between[data-v-0b147647] { justify-content: space-between; } .justify-content-space-around[data-v-0b147647] { justify-content: space-around; } .justify-content-space-evenly[data-v-0b147647] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-0b147647] { align-items: flex-start; } .align-items-flex-end[data-v-0b147647] { align-items: flex-end; } .align-items-stretch[data-v-0b147647] { align-items: stretch; } .align-items-baseline[data-v-0b147647] { align-items: baseline; } .align-items-center[data-v-0b147647] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-0b147647] { align-content: flex-start; } .align-content-flex-end[data-v-0b147647] { align-content: flex-end; } .align-content-center[data-v-0b147647] { align-content: center; } .align-content-stretch[data-v-0b147647] { align-content: stretch; } .align-content-space-between[data-v-0b147647] { align-content: space-between; } .align-content-space-around[data-v-0b147647] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-0b147647] { align-self: flex-start; } .align-self-flex-end[data-v-0b147647] { align-self: flex-end; } .align-self-stretch[data-v-0b147647] { align-self: stretch; } .align-self-flex-baseline[data-v-0b147647] { align-self: baseline; } .align-self-center[data-v-0b147647] { align-self: center; } .align-self-auto[data-v-0b147647] { align-self: auto; } .flex-gap-1[data-v-0b147647] { gap: 4px; } .flex-gap-2[data-v-0b147647] { gap: 8px; } .flex-gap-3[data-v-0b147647] { gap: 12px; } .flex-gap-4[data-v-0b147647] { gap: 16px; } .flex-gap-5[data-v-0b147647] { gap: 20px; } .flex-gap-6[data-v-0b147647] { gap: 24px; } .flex-gap-7[data-v-0b147647] { gap: 28px; } .flex-gap-8[data-v-0b147647] { gap: 32px; } .flex-gap-10[data-v-0b147647] { gap: 40px; } .flex-gap-12[data-v-0b147647] { gap: 48px; } .col-none[data-v-0b147647] { display: none; } .col-auto[data-v-0b147647] { grid-column: auto; } .col-1[data-v-0b147647] { grid-column: span 1; } .col-2[data-v-0b147647] { grid-column: span 2; } .col-3[data-v-0b147647] { grid-column: span 3; } .col-4[data-v-0b147647] { grid-column: span 4; } .col-5[data-v-0b147647] { grid-column: span 5; } .col-6[data-v-0b147647] { grid-column: span 6; } .col-7[data-v-0b147647] { grid-column: span 7; } .col-8[data-v-0b147647] { grid-column: span 8; } .col-9[data-v-0b147647] { grid-column: span 9; } .col-10[data-v-0b147647] { grid-column: span 10; } .col-12[data-v-0b147647] { grid-column: span 12; } .col-13[data-v-0b147647] { grid-column: span 13; } .col-14[data-v-0b147647] { grid-column: span 14; } .col-15[data-v-0b147647] { grid-column: span 15; } .col-16[data-v-0b147647] { grid-column: span 16; } .col-18[data-v-0b147647] { grid-column: span 18; } .col-20[data-v-0b147647] { grid-column: span 20; } .col-22[data-v-0b147647] { grid-column: span 22; } .col-24[data-v-0b147647] { grid-column: span 24; } .col-26[data-v-0b147647] { grid-column: span 26; } .col-27[data-v-0b147647] { grid-column: span 27; } .col-28[data-v-0b147647] { grid-column: span 28; } .col-30[data-v-0b147647] { grid-column: span 30; } .col-36[data-v-0b147647] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-0b147647] { display: none; } .col-md-36[data-v-0b147647] { grid-column: span 36; } .col-md-28[data-v-0b147647] { grid-column: span 28; } .col-md-27[data-v-0b147647] { grid-column: span 27; } .col-md-24[data-v-0b147647] { grid-column: span 24; } .col-md-22[data-v-0b147647] { grid-column: span 22; } .col-md-20[data-v-0b147647] { grid-column: span 20; } .col-md-19[data-v-0b147647] { grid-column: span 19; } .col-md-18[data-v-0b147647] { grid-column: span 18; } .col-md-17[data-v-0b147647] { grid-column: span 17; } .col-md-16[data-v-0b147647] { grid-column: span 16; } .col-md-15[data-v-0b147647] { grid-column: span 15; } .col-md-14[data-v-0b147647] { grid-column: span 14; } .col-md-13[data-v-0b147647] { grid-column: span 13; } .col-md-12[data-v-0b147647] { grid-column: span 12; } .col-md-10[data-v-0b147647] { grid-column: span 10; } .col-md-9[data-v-0b147647] { grid-column: span 9; } .col-md-8[data-v-0b147647] { grid-column: span 8; } .col-md-6[data-v-0b147647] { grid-column: span 6; } .col-md-5[data-v-0b147647] { grid-column: span 5; } .col-md-4[data-v-0b147647] { grid-column: span 4; } .col-md-3[data-v-0b147647] { grid-column: span 3; } .col-md-2[data-v-0b147647] { grid-column: span 2; } .col-md-1[data-v-0b147647] { grid-column: span 1; } .col-md-auto[data-v-0b147647] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-0b147647] { display: none; } .col-sm-36[data-v-0b147647] { grid-column: span 36; } .col-sm-32[data-v-0b147647] { grid-column: span 32; } .col-sm-28[data-v-0b147647] { grid-column: span 28; } .col-sm-27[data-v-0b147647] { grid-column: span 27; } .col-sm-24[data-v-0b147647] { grid-column: span 24; } .col-sm-22[data-v-0b147647] { grid-column: span 22; } .col-sm-20[data-v-0b147647] { grid-column: span 20; } .col-sm-18[data-v-0b147647] { grid-column: span 18; } .col-sm-16[data-v-0b147647] { grid-column: span 16; } .col-sm-15[data-v-0b147647] { grid-column: span 15; } .col-sm-14[data-v-0b147647] { grid-column: span 14; } .col-sm-13[data-v-0b147647] { grid-column: span 12; } .col-sm-12[data-v-0b147647] { grid-column: span 12; } .col-sm-10[data-v-0b147647] { grid-column: span 10; } .col-sm-9[data-v-0b147647] { grid-column: span 8; } .col-sm-8[data-v-0b147647] { grid-column: span 8; } .col-sm-6[data-v-0b147647] { grid-column: span 6; } .col-sm-4[data-v-0b147647] { grid-column: span 4; } .col-sm-auto[data-v-0b147647] { grid-column: auto; } } .fade-enter-active[data-v-0b147647] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-0b147647] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-0b147647], .fade-leave-to[data-v-0b147647] { opacity: 0; } @media (max-width: 720px) { .hide-mobile[data-v-0b147647] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-0b147647] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-0b147647] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-0b147647] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-0b147647] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-0b147647] { display: none !important; } } .content-block[data-v-0b147647] { border-radius: 16px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .content-block--has-bg-image[data-v-0b147647] { position: relative; overflow: hidden; } .content-block__bg-image[data-v-0b147647] { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .content-block__bg-image img[data-v-0b147647] { width: 100%; height: 100%; object-fit: cover; opacity: var(--v288ed57c); } .content-block__bg-image[data-v-0b147647]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%); } .content-block__content[data-v-0b147647] { position: relative; z-index: 1; } .content-block--sm[data-v-0b147647] { padding: 12px 14px; border-radius: 12px; } .content-block--md[data-v-0b147647] { padding: 20px 24px; border-radius: 16px; } .content-block--lg[data-v-0b147647] { padding: 28px 32px; border-radius: 24px; } .content-block--no-border[data-v-0b147647] { border: none !important; } .content-block--light[data-v-0b147647] { --content-block-text: var(--text-primary); --content-block-text-secondary: var(--text-secondary); --content-block-text-muted: var(--text-muted); --content-block-border: var(--border-default); --content-block-bg-subtle: var(--bg-subtle); } .content-block--light.content-block--card[data-v-0b147647] { background: #edf1f5; border: 1px solid var(--border-default); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 20px rgba(0, 0, 0, 0.04); } .content-block--light.content-block--card.content-block--bg-elevated[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.03) 0%, transparent 60%), linear-gradient(315deg, rgba(var(--primary-400-rgb), 0.02) 0%, transparent 50%), var(--surface-1); border-color: rgba(var(--primary-500-rgb), 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(var(--primary-500-rgb), 0.08); } .content-block--light.content-block--card.content-block--bg-muted[data-v-0b147647] { background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%); border-color: var(--border-default); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02); } .content-block--light.content-block--card.content-block--bg-surface[data-v-0b147647] { background: var(--surface-2); border-color: var(--border-default); } .content-block--light.content-block--card.content-block--bg-transparent[data-v-0b147647] { background: transparent; box-shadow: none; } .content-block--light.content-block--flat[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.015) 0%, transparent 40%), var(--surface-1); border: 1px solid var(--border-default); } .content-block--light.content-block--flat.content-block--bg-elevated[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.02) 0%, transparent 50%), var(--surface-1); } .content-block--light.content-block--flat.content-block--bg-muted[data-v-0b147647] { background: var(--surface-2); } .content-block--light.content-block--flat.content-block--bg-surface[data-v-0b147647] { background: var(--surface-1); } .content-block--light.content-block--flat.content-block--bg-transparent[data-v-0b147647] { background: transparent; } .content-block--light.content-block--info[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.06) 0%, rgba(var(--primary-500-rgb), 0.02) 100%); border: 1px solid rgba(var(--primary-500-rgb), 0.15); } .content-block--light.content-block--success[data-v-0b147647] { background: linear-gradient(135deg, rgba(44, 187, 102, 0.08) 0%, rgba(60, 207, 119, 0.03) 100%); border: 1px solid rgba(44, 187, 102, 0.2); } .content-block--light.content-block--warning[data-v-0b147647] { background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(251, 146, 60, 0.04) 100%); border: 1px solid rgba(249, 115, 22, 0.25); } .content-block--light.content-block--danger[data-v-0b147647] { background: linear-gradient(135deg, rgba(255, 77, 77, 0.08) 0%, rgba(255, 100, 100, 0.03) 100%); border: 1px solid rgba(255, 77, 77, 0.2); } .content-block--dark[data-v-0b147647] { --content-block-text: #edf1f5; --content-block-text-secondary: #cdd5e0; --content-block-text-muted: #b4bfce; --content-block-border: rgba(255, 255, 255, 0.1); --content-block-bg-subtle: rgba(255, 255, 255, 0.03); } .content-block--dark.content-block--card[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.04) 0%, transparent 40%), linear-gradient(315deg, rgba(var(--primary-400-rgb), 0.02) 0%, transparent 30%), var(--secondary-800); border: 1px solid rgba(var(--primary-500-rgb), 0.12); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; } .content-block--dark.content-block--card.content-block--bg-elevated[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.1) 0%, transparent 50%), linear-gradient(315deg, rgba(var(--primary-400-rgb), 0.05) 0%, transparent 40%), var(--secondary-500); border-color: rgba(var(--primary-500-rgb), 0.2); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 60px rgba(var(--primary-500-rgb), 0.08), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } .content-block--dark.content-block--card.content-block--bg-muted[data-v-0b147647] { background: linear-gradient(180deg, var(--secondary-700) 0%, var(--secondary-800) 100%); border-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); } .content-block--dark.content-block--card.content-block--bg-surface[data-v-0b147647] { background: var(--secondary-800); border-color: rgba(255, 255, 255, 0.05); } .content-block--dark.content-block--card.content-block--bg-transparent[data-v-0b147647] { background: transparent; box-shadow: none; } .content-block--dark.content-block--flat[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.03) 0%, transparent 30%), var(--secondary-700); border: 1px solid rgba(255, 255, 255, 0.08); } .content-block--dark.content-block--flat.content-block--bg-elevated[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.05) 0%, transparent 40%), var(--secondary-600); } .content-block--dark.content-block--flat.content-block--bg-muted[data-v-0b147647] { background: var(--secondary-800); } .content-block--dark.content-block--flat.content-block--bg-surface[data-v-0b147647] { background: var(--secondary-700); } .content-block--dark.content-block--flat.content-block--bg-transparent[data-v-0b147647] { background: transparent; } .content-block--dark.content-block--info[data-v-0b147647] { background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.18) 0%, rgba(var(--primary-500-rgb), 0.06) 100%); border: 1px solid rgba(var(--primary-500-rgb), 0.35); box-shadow: 0 0 30px rgba(var(--primary-500-rgb), 0.1); } .content-block--dark.content-block--success[data-v-0b147647] { background: linear-gradient(135deg, rgba(44, 187, 102, 0.18) 0%, rgba(44, 187, 102, 0.06) 100%); border: 1px solid rgba(44, 187, 102, 0.35); box-shadow: 0 0 30px rgba(44, 187, 102, 0.08); } .content-block--dark.content-block--warning[data-v-0b147647] { background: linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(249, 115, 22, 0.06) 100%); border: 1px solid rgba(249, 115, 22, 0.35); box-shadow: 0 0 30px rgba(249, 115, 22, 0.08); } .content-block--dark.content-block--danger[data-v-0b147647] { background: linear-gradient(135deg, rgba(255, 77, 77, 0.18) 0%, rgba(255, 77, 77, 0.06) 100%); border: 1px solid rgba(255, 77, 77, 0.35); box-shadow: 0 0 30px rgba(255, 77, 77, 0.08); } .content-block--interactive[data-v-0b147647] { cursor: pointer; } .content-block--interactive.content-block--light[data-v-0b147647]:hover { border-color: var(--primary-300); background: rgba(var(--primary-500-rgb), 0.02); } .content-block--interactive.content-block--dark[data-v-0b147647]:hover { background: var(--secondary-500); border-color: rgba(255, 255, 255, 0.15); } @media (max-width: 1160px) { .content-block--sm[data-v-0b147647] { padding: 10px 12px; border-radius: 10px; } .content-block--md[data-v-0b147647] { padding: 16px 20px; border-radius: 14px; } .content-block--lg[data-v-0b147647] { padding: 24px 28px; border-radius: 20px; } } @media (max-width: 720px) { .content-block--sm[data-v-0b147647] { padding: 8px 10px; border-radius: 8px; } .content-block--md[data-v-0b147647] { padding: 14px 16px; border-radius: 12px; } .content-block--lg[data-v-0b147647] { padding: 18px 20px; border-radius: 16px; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-562bc284]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-562bc284] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-562bc284] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-562bc284]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-562bc284], .theme-mode-light[data-v-562bc284] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-562bc284], .theme-mode-dark[data-v-562bc284] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-562bc284]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-562bc284]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-562bc284] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-562bc284] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-562bc284]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-562bc284], input[disabled][data-v-562bc284] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-562bc284] { opacity: 0.9; } input[readonly][data-v-562bc284] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-562bc284] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-562bc284]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-562bc284]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-562bc284]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-562bc284] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-562bc284]:nth-child(odd), .list-card-desktop__wrapper[data-v-562bc284]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-562bc284]:nth-child(even), .list-card-desktop__wrapper[data-v-562bc284]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-562bc284]:nth-child(odd), .listCardDesktopWrapper[data-v-562bc284]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-562bc284]:nth-child(even), .listCardDesktopWrapper[data-v-562bc284]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-562bc284] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-562bc284] { cursor: pointer; } .card-layout--selectionnable[data-v-562bc284]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-562bc284] { cursor: auto; } .card-layout--drawer[data-v-562bc284] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-562bc284] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-562bc284] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-562bc284] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-562bc284] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-562bc284] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-562bc284]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-562bc284] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-562bc284] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-562bc284] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-562bc284] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-562bc284] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-562bc284] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-562bc284] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-562bc284] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-562bc284] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-562bc284] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-562bc284] { background-color: #eb1515; } .color-chip--dossiers[data-v-562bc284] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-562bc284] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-562bc284] { background-color: #00a79b; } .color-chip--virements[data-v-562bc284] { background-color: var(--secondary-400); } .color-chip--factures[data-v-562bc284] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-562bc284] { background-color: #eb1515; } .color-recherche-dossiers[data-v-562bc284] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-562bc284] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-562bc284] { background-color: #00a79b; } .color-recherche-virements[data-v-562bc284] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-562bc284] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-562bc284] { color: #00a79b; cursor: pointer; } .scrollable[data-v-562bc284] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-562bc284] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-562bc284] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-562bc284] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-562bc284] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-562bc284] { font-weight: 800; } .grid-cell--column[data-v-562bc284] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-562bc284] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-562bc284] { fill: #00a79b; } .grid-cell--disabled[data-v-562bc284] { color: #cccccc; } .grid-cell--disabled svg[data-v-562bc284] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-562bc284] { white-space: nowrap; } .grid-cell--danger svg[data-v-562bc284] { fill: #eb1515; } .grid-cell--span-1[data-v-562bc284] { grid-column: span 1; } .grid-cell--span-2[data-v-562bc284] { grid-column: span 2; } .grid-cell--span-3[data-v-562bc284] { grid-column: span 3; } .grid-cell--span-4[data-v-562bc284] { grid-column: span 4; } .grid-cell--span-5[data-v-562bc284] { grid-column: span 5; } .grid-cell--span-6[data-v-562bc284] { grid-column: span 6; } .grid-cell--span-7[data-v-562bc284] { grid-column: span 7; } .grid-cell--span-8[data-v-562bc284] { grid-column: span 8; } .grid-cell--span-9[data-v-562bc284] { grid-column: span 9; } .grid-cell--span-10[data-v-562bc284] { grid-column: span 10; } .grid-cell--span-12[data-v-562bc284] { grid-column: span 12; } .grid-cell--span-13[data-v-562bc284] { grid-column: span 13; } .grid-cell--span-14[data-v-562bc284] { grid-column: span 14; } .grid-cell--span-16[data-v-562bc284] { grid-column: span 16; } .grid-cell--span-18[data-v-562bc284] { grid-column: span 18; } .grid-cell--span-20[data-v-562bc284] { grid-column: span 20; } .grid-cell--span-32[data-v-562bc284] { grid-column: span 32; } .grid-cell--span-36[data-v-562bc284] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-562bc284] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-562bc284] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-562bc284] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-562bc284] { justify-content: center !important; } .elem--bold span[data-v-562bc284] { font-weight: 800; } .elem--column[data-v-562bc284] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-562bc284] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-562bc284] { fill: #00a79b; } .elem--clickable[data-v-562bc284]:hover { cursor: pointer; } .elem--disabled[data-v-562bc284] { color: #cccccc; } .elem--disabled svg[data-v-562bc284] { fill: #cccccc; } .elem--nowrap span[data-v-562bc284] { white-space: nowrap; } .elem--danger svg[data-v-562bc284] { fill: #eb1515; } .elem--span-1[data-v-562bc284] { grid-column: span 1; } .elem--span-2[data-v-562bc284] { grid-column: span 2; } .elem--span-3[data-v-562bc284] { grid-column: span 3; } .elem--span-4[data-v-562bc284] { grid-column: span 4; } .elem--span-5[data-v-562bc284] { grid-column: span 5; } .elem--span-6[data-v-562bc284] { grid-column: span 6; } .elem--span-7[data-v-562bc284] { grid-column: span 7; } .elem--span-8[data-v-562bc284] { grid-column: span 8; } .elem--span-9[data-v-562bc284] { grid-column: span 9; } .elem--span-10[data-v-562bc284] { grid-column: span 10; } .elem--span-12[data-v-562bc284] { grid-column: span 12; } .elem--span-13[data-v-562bc284] { grid-column: span 13; } .elem--span-14[data-v-562bc284] { grid-column: span 14; } .elem--span-16[data-v-562bc284] { grid-column: span 16; } .elem--span-18[data-v-562bc284] { grid-column: span 18; } .elem--span-20[data-v-562bc284] { grid-column: span 20; } .elem--span-32[data-v-562bc284] { grid-column: span 32; } .elem--span-36[data-v-562bc284] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-562bc284] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-562bc284] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-562bc284]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-562bc284] { display: flex; } /* flex-direction */ .flex-column[data-v-562bc284] { flex-direction: column; } .flex-row[data-v-562bc284] { flex-direction: row; } /* flex */ .flex-1[data-v-562bc284] { flex: 1 !important; } .flex-2[data-v-562bc284] { flex: 2; } .flex-3[data-v-562bc284] { flex: 3; } .flex-3[data-v-562bc284] { flex: 4; } .flex-5[data-v-562bc284] { flex: 5; } .flex-auto[data-v-562bc284] { flex: auto; } .flex-none[data-v-562bc284] { flex: none; } .flex-content[data-v-562bc284] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-562bc284] { flex-wrap: wrap; } .flex-nowrap[data-v-562bc284] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-562bc284] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-562bc284] { justify-content: flex-start; } .justify-content-end[data-v-562bc284] { justify-content: flex-end; } .justify-content-baseline[data-v-562bc284] { justify-content: baseline; } .justify-content-center[data-v-562bc284] { justify-content: center; } .justify-content-space-between[data-v-562bc284] { justify-content: space-between; } .justify-content-space-around[data-v-562bc284] { justify-content: space-around; } .justify-content-space-evenly[data-v-562bc284] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-562bc284] { align-items: flex-start; } .align-items-flex-end[data-v-562bc284] { align-items: flex-end; } .align-items-stretch[data-v-562bc284] { align-items: stretch; } .align-items-baseline[data-v-562bc284] { align-items: baseline; } .align-items-center[data-v-562bc284] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-562bc284] { align-content: flex-start; } .align-content-flex-end[data-v-562bc284] { align-content: flex-end; } .align-content-center[data-v-562bc284] { align-content: center; } .align-content-stretch[data-v-562bc284] { align-content: stretch; } .align-content-space-between[data-v-562bc284] { align-content: space-between; } .align-content-space-around[data-v-562bc284] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-562bc284] { align-self: flex-start; } .align-self-flex-end[data-v-562bc284] { align-self: flex-end; } .align-self-stretch[data-v-562bc284] { align-self: stretch; } .align-self-flex-baseline[data-v-562bc284] { align-self: baseline; } .align-self-center[data-v-562bc284] { align-self: center; } .align-self-auto[data-v-562bc284] { align-self: auto; } .flex-gap-1[data-v-562bc284] { gap: 4px; } .flex-gap-2[data-v-562bc284] { gap: 8px; } .flex-gap-3[data-v-562bc284] { gap: 12px; } .flex-gap-4[data-v-562bc284] { gap: 16px; } .flex-gap-5[data-v-562bc284] { gap: 20px; } .flex-gap-6[data-v-562bc284] { gap: 24px; } .flex-gap-7[data-v-562bc284] { gap: 28px; } .flex-gap-8[data-v-562bc284] { gap: 32px; } .flex-gap-10[data-v-562bc284] { gap: 40px; } .flex-gap-12[data-v-562bc284] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-562bc284] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-562bc284] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-562bc284] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-562bc284] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-562bc284] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-562bc284] { display: none !important; } } .col-none[data-v-562bc284] { display: none; } .col-auto[data-v-562bc284] { grid-column: auto; } .col-1[data-v-562bc284] { grid-column: span 1; } .col-2[data-v-562bc284] { grid-column: span 2; } .col-3[data-v-562bc284] { grid-column: span 3; } .col-4[data-v-562bc284] { grid-column: span 4; } .col-5[data-v-562bc284] { grid-column: span 5; } .col-6[data-v-562bc284] { grid-column: span 6; } .col-7[data-v-562bc284] { grid-column: span 7; } .col-8[data-v-562bc284] { grid-column: span 8; } .col-9[data-v-562bc284] { grid-column: span 9; } .col-10[data-v-562bc284] { grid-column: span 10; } .col-12[data-v-562bc284] { grid-column: span 12; } .col-13[data-v-562bc284] { grid-column: span 13; } .col-14[data-v-562bc284] { grid-column: span 14; } .col-15[data-v-562bc284] { grid-column: span 15; } .col-16[data-v-562bc284] { grid-column: span 16; } .col-18[data-v-562bc284] { grid-column: span 18; } .col-20[data-v-562bc284] { grid-column: span 20; } .col-22[data-v-562bc284] { grid-column: span 22; } .col-24[data-v-562bc284] { grid-column: span 24; } .col-26[data-v-562bc284] { grid-column: span 26; } .col-27[data-v-562bc284] { grid-column: span 27; } .col-28[data-v-562bc284] { grid-column: span 28; } .col-30[data-v-562bc284] { grid-column: span 30; } .col-36[data-v-562bc284] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-562bc284] { display: none; } .col-md-36[data-v-562bc284] { grid-column: span 36; } .col-md-28[data-v-562bc284] { grid-column: span 28; } .col-md-27[data-v-562bc284] { grid-column: span 27; } .col-md-24[data-v-562bc284] { grid-column: span 24; } .col-md-22[data-v-562bc284] { grid-column: span 22; } .col-md-20[data-v-562bc284] { grid-column: span 20; } .col-md-19[data-v-562bc284] { grid-column: span 19; } .col-md-18[data-v-562bc284] { grid-column: span 18; } .col-md-17[data-v-562bc284] { grid-column: span 17; } .col-md-16[data-v-562bc284] { grid-column: span 16; } .col-md-15[data-v-562bc284] { grid-column: span 15; } .col-md-14[data-v-562bc284] { grid-column: span 14; } .col-md-13[data-v-562bc284] { grid-column: span 13; } .col-md-12[data-v-562bc284] { grid-column: span 12; } .col-md-10[data-v-562bc284] { grid-column: span 10; } .col-md-9[data-v-562bc284] { grid-column: span 9; } .col-md-8[data-v-562bc284] { grid-column: span 8; } .col-md-6[data-v-562bc284] { grid-column: span 6; } .col-md-5[data-v-562bc284] { grid-column: span 5; } .col-md-4[data-v-562bc284] { grid-column: span 4; } .col-md-3[data-v-562bc284] { grid-column: span 3; } .col-md-2[data-v-562bc284] { grid-column: span 2; } .col-md-1[data-v-562bc284] { grid-column: span 1; } .col-md-auto[data-v-562bc284] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-562bc284] { display: none; } .col-sm-36[data-v-562bc284] { grid-column: span 36; } .col-sm-32[data-v-562bc284] { grid-column: span 32; } .col-sm-28[data-v-562bc284] { grid-column: span 28; } .col-sm-27[data-v-562bc284] { grid-column: span 27; } .col-sm-24[data-v-562bc284] { grid-column: span 24; } .col-sm-22[data-v-562bc284] { grid-column: span 22; } .col-sm-20[data-v-562bc284] { grid-column: span 20; } .col-sm-18[data-v-562bc284] { grid-column: span 18; } .col-sm-16[data-v-562bc284] { grid-column: span 16; } .col-sm-15[data-v-562bc284] { grid-column: span 15; } .col-sm-14[data-v-562bc284] { grid-column: span 14; } .col-sm-13[data-v-562bc284] { grid-column: span 12; } .col-sm-12[data-v-562bc284] { grid-column: span 12; } .col-sm-10[data-v-562bc284] { grid-column: span 10; } .col-sm-9[data-v-562bc284] { grid-column: span 8; } .col-sm-8[data-v-562bc284] { grid-column: span 8; } .col-sm-6[data-v-562bc284] { grid-column: span 6; } .col-sm-4[data-v-562bc284] { grid-column: span 4; } .col-sm-auto[data-v-562bc284] { grid-column: auto; } } .fade-enter-active[data-v-562bc284] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-562bc284] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-562bc284], .fade-leave-to[data-v-562bc284] { opacity: 0; } .newsletter-signup--premium[data-v-562bc284] { background: transparent; overflow: hidden; } .newsletter-signup--premium .newsletter-signup__content[data-v-562bc284] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; } .newsletter-signup--premium .newsletter-signup__promo-banner[data-v-562bc284] { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 24px; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); position: relative; overflow: hidden; border-radius: 12px 12px 0 0; } .newsletter-signup--premium .newsletter-signup__promo-banner[data-v-562bc284]::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%); animation: shine-562bc284 3s ease-in-out infinite; } @keyframes shine-562bc284 { 0% { left: -100%; } 50%, 100% { left: 100%; } } .newsletter-signup--premium .newsletter-signup__promo-badge[data-v-562bc284] { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; background: #ffffff; color: #dc2626; font-size: 18px; font-weight: 800; border-radius: 6px; letter-spacing: -0.02em; position: relative; z-index: 1; } .newsletter-signup--premium .newsletter-signup__promo-text[data-v-562bc284] { color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; position: relative; z-index: 1; } .newsletter-signup--premium .newsletter-signup__header-premium[data-v-562bc284] { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 0; } .newsletter-signup--premium .newsletter-signup__title[data-v-562bc284] { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -0.02em; } .newsletter-signup--premium .newsletter-signup__desc[data-v-562bc284] { font-size: 14px; color: var(--text-secondary); max-width: 320px; margin: 0 auto; line-height: 1.6; } .newsletter-signup--premium .newsletter-signup__benefits[data-v-562bc284] { display: flex; align-items: center; gap: 20px; padding: 12px 0; } .newsletter-signup--premium .newsletter-signup__benefit[data-v-562bc284] { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); } .newsletter-signup--premium .newsletter-signup__benefit svg[data-v-562bc284] { color: var(--primary-400); } .newsletter-signup--premium .newsletter-signup__form[data-v-562bc284] { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 0; box-sizing: border-box; } .newsletter-signup--premium .newsletter-signup__input-wrapper[data-v-562bc284] { display: flex; flex-direction: column; gap: 10px; width: 100%; } .newsletter-signup--premium .newsletter-signup__input[data-v-562bc284] { width: 100%; } .newsletter-signup--premium .newsletter-signup__btn[data-v-562bc284] { width: 100%; margin-top: 4px; } .newsletter-signup--premium .newsletter-signup__error[data-v-562bc284] { margin: 8px 24px 0; } .newsletter-signup--premium .newsletter-signup__privacy[data-v-562bc284] { text-align: center; margin-top: 8px; padding: 0 24px 24px; } @media (max-width: 720px) { .newsletter-signup--premium .newsletter-signup__promo-banner[data-v-562bc284] { flex-direction: column; gap: 6px; padding: 12px 16px; } .newsletter-signup--premium .newsletter-signup__promo-badge[data-v-562bc284] { font-size: 16px; padding: 5px 12px; } .newsletter-signup--premium .newsletter-signup__promo-text[data-v-562bc284] { font-size: 12px; } .newsletter-signup--premium .newsletter-signup__header-premium[data-v-562bc284] { padding: 20px 16px 0; } .newsletter-signup--premium .newsletter-signup__title[data-v-562bc284] { font-size: 20px; } .newsletter-signup--premium .newsletter-signup__desc[data-v-562bc284] { font-size: 13px; } .newsletter-signup--premium .newsletter-signup__form[data-v-562bc284] { padding: 16px 16px 0; } .newsletter-signup--premium .newsletter-signup__privacy[data-v-562bc284] { padding: 0 16px 20px; } } .newsletter-signup--compact[data-v-562bc284] { display: flex; flex-direction: column; gap: 12px; } .newsletter-signup--compact .newsletter-signup__header[data-v-562bc284] { display: none; } .newsletter-signup--compact .newsletter-signup__compact-title[data-v-562bc284] { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.8px; } .newsletter-signup--compact .newsletter-signup__form[data-v-562bc284] { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .newsletter-signup--compact .newsletter-signup__input-wrapper[data-v-562bc284] { width: 100%; } .newsletter-signup--compact .newsletter-signup__input[data-v-562bc284] { width: 100%; } .newsletter-signup--compact .newsletter-signup__input input[data-v-562bc284] { background: transparent; border: none; color: #ffffff; font-size: 13px; width: 100%; outline: none; } .newsletter-signup--compact .newsletter-signup__input input[data-v-562bc284]::placeholder { color: rgba(255, 255, 255, 0.4); } .newsletter-signup--compact .newsletter-signup__input-inline[data-v-562bc284] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .newsletter-signup--compact .newsletter-signup__input-inline[data-v-562bc284]:focus-within { border-color: rgba(var(--primary-500-rgb), 0.4); background: rgba(255, 255, 255, 0.07); } .newsletter-signup--compact .newsletter-signup__input-icon[data-v-562bc284] { color: rgba(255, 255, 255, 0.4); flex-shrink: 0; } .newsletter-signup--compact .newsletter-signup__input-field[data-v-562bc284] { flex: 1; background: transparent; border: none; color: #ffffff; font-size: 13px; outline: none; min-width: 0; } .newsletter-signup--compact .newsletter-signup__input-field[data-v-562bc284]::placeholder { color: rgba(255, 255, 255, 0.4); } .newsletter-signup--compact .newsletter-signup__input-field[data-v-562bc284]:disabled { opacity: 0.6; } .newsletter-signup--compact .newsletter-signup__input-btn[data-v-562bc284] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .newsletter-signup--compact .newsletter-signup__input-btn svg[data-v-562bc284] { color: #ffffff; } .newsletter-signup--compact .newsletter-signup__input-btn[data-v-562bc284]:hover:not(:disabled) { background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%); transform: translateX(2px); } .newsletter-signup--compact .newsletter-signup__input-btn[data-v-562bc284]:disabled { opacity: 0.6; cursor: not-allowed; } .newsletter-signup--compact .newsletter-signup__input-btn-loading[data-v-562bc284] { animation: spin-562bc284 1s linear infinite; } @keyframes spin-562bc284 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .newsletter-signup--compact .newsletter-signup__privacy[data-v-562bc284] { display: none; } .newsletter-signup--inline .newsletter-signup__header[data-v-562bc284] { display: none; } .newsletter-signup--inline .newsletter-signup__form[data-v-562bc284] { display: flex; gap: 8px; } .newsletter-signup--inline .newsletter-signup__input-wrapper[data-v-562bc284] { flex: 1; } .newsletter-signup--inline .newsletter-signup__privacy[data-v-562bc284] { display: none; } .newsletter-signup--success .newsletter-signup__success[data-v-562bc284] { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 20px; gap: 12px; } .newsletter-signup--success .newsletter-signup__success-icon[data-v-562bc284] { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--success-500-rgb), 0.15) 0%, rgba(var(--success-600-rgb), 0.05) 100%); border-radius: 50%; animation: success-pop-562bc284 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .newsletter-signup--success .newsletter-signup__success-icon svg[data-v-562bc284] { color: var(--success-400); } .newsletter-signup--success .newsletter-signup__success-title[data-v-562bc284] { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 8px 0 0; } .newsletter-signup--success .newsletter-signup__success-desc[data-v-562bc284] { font-size: 14px; color: var(--text-secondary); max-width: 280px; margin: 0; } .newsletter-signup--compact.newsletter-signup--success .newsletter-signup__success[data-v-562bc284] { flex-direction: row; align-items: center; text-align: left; padding: 16px 20px; gap: 14px; } .newsletter-signup--compact.newsletter-signup--success .newsletter-signup__success-icon[data-v-562bc284] { width: 40px; height: 40px; flex-shrink: 0; } .newsletter-signup--compact.newsletter-signup--success .newsletter-signup__success-title[data-v-562bc284] { font-size: 14px; margin: 0; } .newsletter-signup--compact.newsletter-signup--success .newsletter-signup__success-desc[data-v-562bc284] { font-size: 12px; max-width: none; margin: 2px 0 0; } .newsletter-signup__form[data-v-562bc284] { display: flex; } .newsletter-signup__error[data-v-562bc284] { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 10px 14px; background: rgba(var(--danger-500-rgb), 0.1); border: 1px solid rgba(var(--danger-500-rgb), 0.2); border-radius: 8px; font-size: 13px; color: var(--danger-400); } .newsletter-signup__error svg[data-v-562bc284] { flex-shrink: 0; } .newsletter-signup__privacy[data-v-562bc284] { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--text-muted); margin: 0; } .newsletter-signup__privacy svg[data-v-562bc284] { color: var(--text-muted); opacity: 0.7; } @keyframes success-pop-562bc284 { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .fade-enter-active[data-v-562bc284], .fade-leave-active[data-v-562bc284] { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .fade-enter-from[data-v-562bc284], .fade-leave-to[data-v-562bc284] { opacity: 0; } .fade-scale-enter-active[data-v-562bc284], .fade-scale-leave-active[data-v-562bc284] { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .fade-scale-enter-from[data-v-562bc284] { opacity: 0; transform: scale(0.95); } .fade-scale-leave-to[data-v-562bc284] { opacity: 0; transform: scale(1); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-21fc8a75]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-21fc8a75] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-21fc8a75] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-21fc8a75]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-21fc8a75], .theme-mode-light[data-v-21fc8a75] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-21fc8a75], .theme-mode-dark[data-v-21fc8a75] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-21fc8a75]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-21fc8a75]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-21fc8a75] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-21fc8a75] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-21fc8a75]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-21fc8a75], input[disabled][data-v-21fc8a75] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-21fc8a75] { opacity: 0.9; } input[readonly][data-v-21fc8a75] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-21fc8a75] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-21fc8a75]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-21fc8a75]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-21fc8a75]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-21fc8a75] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-21fc8a75]:nth-child(odd), .list-card-desktop__wrapper[data-v-21fc8a75]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-21fc8a75]:nth-child(even), .list-card-desktop__wrapper[data-v-21fc8a75]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-21fc8a75]:nth-child(odd), .listCardDesktopWrapper[data-v-21fc8a75]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-21fc8a75]:nth-child(even), .listCardDesktopWrapper[data-v-21fc8a75]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-21fc8a75] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-21fc8a75] { cursor: pointer; } .card-layout--selectionnable[data-v-21fc8a75]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-21fc8a75] { cursor: auto; } .card-layout--drawer[data-v-21fc8a75] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-21fc8a75] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-21fc8a75] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-21fc8a75] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-21fc8a75] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-21fc8a75] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-21fc8a75]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-21fc8a75] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-21fc8a75] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-21fc8a75] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-21fc8a75] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-21fc8a75] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-21fc8a75] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-21fc8a75] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-21fc8a75] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-21fc8a75] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-21fc8a75] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-21fc8a75] { background-color: #eb1515; } .color-chip--dossiers[data-v-21fc8a75] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-21fc8a75] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-21fc8a75] { background-color: #00a79b; } .color-chip--virements[data-v-21fc8a75] { background-color: var(--secondary-400); } .color-chip--factures[data-v-21fc8a75] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-21fc8a75] { background-color: #eb1515; } .color-recherche-dossiers[data-v-21fc8a75] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-21fc8a75] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-21fc8a75] { background-color: #00a79b; } .color-recherche-virements[data-v-21fc8a75] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-21fc8a75] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-21fc8a75] { color: #00a79b; cursor: pointer; } .scrollable[data-v-21fc8a75] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-21fc8a75] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-21fc8a75] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-21fc8a75] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-21fc8a75] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-21fc8a75] { font-weight: 800; } .grid-cell--column[data-v-21fc8a75] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-21fc8a75] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-21fc8a75] { fill: #00a79b; } .grid-cell--disabled[data-v-21fc8a75] { color: #cccccc; } .grid-cell--disabled svg[data-v-21fc8a75] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-21fc8a75] { white-space: nowrap; } .grid-cell--danger svg[data-v-21fc8a75] { fill: #eb1515; } .grid-cell--span-1[data-v-21fc8a75] { grid-column: span 1; } .grid-cell--span-2[data-v-21fc8a75] { grid-column: span 2; } .grid-cell--span-3[data-v-21fc8a75] { grid-column: span 3; } .grid-cell--span-4[data-v-21fc8a75] { grid-column: span 4; } .grid-cell--span-5[data-v-21fc8a75] { grid-column: span 5; } .grid-cell--span-6[data-v-21fc8a75] { grid-column: span 6; } .grid-cell--span-7[data-v-21fc8a75] { grid-column: span 7; } .grid-cell--span-8[data-v-21fc8a75] { grid-column: span 8; } .grid-cell--span-9[data-v-21fc8a75] { grid-column: span 9; } .grid-cell--span-10[data-v-21fc8a75] { grid-column: span 10; } .grid-cell--span-12[data-v-21fc8a75] { grid-column: span 12; } .grid-cell--span-13[data-v-21fc8a75] { grid-column: span 13; } .grid-cell--span-14[data-v-21fc8a75] { grid-column: span 14; } .grid-cell--span-16[data-v-21fc8a75] { grid-column: span 16; } .grid-cell--span-18[data-v-21fc8a75] { grid-column: span 18; } .grid-cell--span-20[data-v-21fc8a75] { grid-column: span 20; } .grid-cell--span-32[data-v-21fc8a75] { grid-column: span 32; } .grid-cell--span-36[data-v-21fc8a75] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-21fc8a75] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-21fc8a75] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-21fc8a75] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-21fc8a75] { justify-content: center !important; } .elem--bold span[data-v-21fc8a75] { font-weight: 800; } .elem--column[data-v-21fc8a75] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-21fc8a75] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-21fc8a75] { fill: #00a79b; } .elem--clickable[data-v-21fc8a75]:hover { cursor: pointer; } .elem--disabled[data-v-21fc8a75] { color: #cccccc; } .elem--disabled svg[data-v-21fc8a75] { fill: #cccccc; } .elem--nowrap span[data-v-21fc8a75] { white-space: nowrap; } .elem--danger svg[data-v-21fc8a75] { fill: #eb1515; } .elem--span-1[data-v-21fc8a75] { grid-column: span 1; } .elem--span-2[data-v-21fc8a75] { grid-column: span 2; } .elem--span-3[data-v-21fc8a75] { grid-column: span 3; } .elem--span-4[data-v-21fc8a75] { grid-column: span 4; } .elem--span-5[data-v-21fc8a75] { grid-column: span 5; } .elem--span-6[data-v-21fc8a75] { grid-column: span 6; } .elem--span-7[data-v-21fc8a75] { grid-column: span 7; } .elem--span-8[data-v-21fc8a75] { grid-column: span 8; } .elem--span-9[data-v-21fc8a75] { grid-column: span 9; } .elem--span-10[data-v-21fc8a75] { grid-column: span 10; } .elem--span-12[data-v-21fc8a75] { grid-column: span 12; } .elem--span-13[data-v-21fc8a75] { grid-column: span 13; } .elem--span-14[data-v-21fc8a75] { grid-column: span 14; } .elem--span-16[data-v-21fc8a75] { grid-column: span 16; } .elem--span-18[data-v-21fc8a75] { grid-column: span 18; } .elem--span-20[data-v-21fc8a75] { grid-column: span 20; } .elem--span-32[data-v-21fc8a75] { grid-column: span 32; } .elem--span-36[data-v-21fc8a75] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-21fc8a75] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-21fc8a75] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-21fc8a75]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-21fc8a75] { display: flex; } /* flex-direction */ .flex-column[data-v-21fc8a75] { flex-direction: column; } .flex-row[data-v-21fc8a75] { flex-direction: row; } /* flex */ .flex-1[data-v-21fc8a75] { flex: 1 !important; } .flex-2[data-v-21fc8a75] { flex: 2; } .flex-3[data-v-21fc8a75] { flex: 3; } .flex-3[data-v-21fc8a75] { flex: 4; } .flex-5[data-v-21fc8a75] { flex: 5; } .flex-auto[data-v-21fc8a75] { flex: auto; } .flex-none[data-v-21fc8a75] { flex: none; } .flex-content[data-v-21fc8a75] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-21fc8a75] { flex-wrap: wrap; } .flex-nowrap[data-v-21fc8a75] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-21fc8a75] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-21fc8a75] { justify-content: flex-start; } .justify-content-end[data-v-21fc8a75] { justify-content: flex-end; } .justify-content-baseline[data-v-21fc8a75] { justify-content: baseline; } .justify-content-center[data-v-21fc8a75] { justify-content: center; } .justify-content-space-between[data-v-21fc8a75] { justify-content: space-between; } .justify-content-space-around[data-v-21fc8a75] { justify-content: space-around; } .justify-content-space-evenly[data-v-21fc8a75] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-21fc8a75] { align-items: flex-start; } .align-items-flex-end[data-v-21fc8a75] { align-items: flex-end; } .align-items-stretch[data-v-21fc8a75] { align-items: stretch; } .align-items-baseline[data-v-21fc8a75] { align-items: baseline; } .align-items-center[data-v-21fc8a75] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-21fc8a75] { align-content: flex-start; } .align-content-flex-end[data-v-21fc8a75] { align-content: flex-end; } .align-content-center[data-v-21fc8a75] { align-content: center; } .align-content-stretch[data-v-21fc8a75] { align-content: stretch; } .align-content-space-between[data-v-21fc8a75] { align-content: space-between; } .align-content-space-around[data-v-21fc8a75] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-21fc8a75] { align-self: flex-start; } .align-self-flex-end[data-v-21fc8a75] { align-self: flex-end; } .align-self-stretch[data-v-21fc8a75] { align-self: stretch; } .align-self-flex-baseline[data-v-21fc8a75] { align-self: baseline; } .align-self-center[data-v-21fc8a75] { align-self: center; } .align-self-auto[data-v-21fc8a75] { align-self: auto; } .flex-gap-1[data-v-21fc8a75] { gap: 4px; } .flex-gap-2[data-v-21fc8a75] { gap: 8px; } .flex-gap-3[data-v-21fc8a75] { gap: 12px; } .flex-gap-4[data-v-21fc8a75] { gap: 16px; } .flex-gap-5[data-v-21fc8a75] { gap: 20px; } .flex-gap-6[data-v-21fc8a75] { gap: 24px; } .flex-gap-7[data-v-21fc8a75] { gap: 28px; } .flex-gap-8[data-v-21fc8a75] { gap: 32px; } .flex-gap-10[data-v-21fc8a75] { gap: 40px; } .flex-gap-12[data-v-21fc8a75] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-21fc8a75] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-21fc8a75] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-21fc8a75] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-21fc8a75] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-21fc8a75] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-21fc8a75] { display: none !important; } } .col-none[data-v-21fc8a75] { display: none; } .col-auto[data-v-21fc8a75] { grid-column: auto; } .col-1[data-v-21fc8a75] { grid-column: span 1; } .col-2[data-v-21fc8a75] { grid-column: span 2; } .col-3[data-v-21fc8a75] { grid-column: span 3; } .col-4[data-v-21fc8a75] { grid-column: span 4; } .col-5[data-v-21fc8a75] { grid-column: span 5; } .col-6[data-v-21fc8a75] { grid-column: span 6; } .col-7[data-v-21fc8a75] { grid-column: span 7; } .col-8[data-v-21fc8a75] { grid-column: span 8; } .col-9[data-v-21fc8a75] { grid-column: span 9; } .col-10[data-v-21fc8a75] { grid-column: span 10; } .col-12[data-v-21fc8a75] { grid-column: span 12; } .col-13[data-v-21fc8a75] { grid-column: span 13; } .col-14[data-v-21fc8a75] { grid-column: span 14; } .col-15[data-v-21fc8a75] { grid-column: span 15; } .col-16[data-v-21fc8a75] { grid-column: span 16; } .col-18[data-v-21fc8a75] { grid-column: span 18; } .col-20[data-v-21fc8a75] { grid-column: span 20; } .col-22[data-v-21fc8a75] { grid-column: span 22; } .col-24[data-v-21fc8a75] { grid-column: span 24; } .col-26[data-v-21fc8a75] { grid-column: span 26; } .col-27[data-v-21fc8a75] { grid-column: span 27; } .col-28[data-v-21fc8a75] { grid-column: span 28; } .col-30[data-v-21fc8a75] { grid-column: span 30; } .col-36[data-v-21fc8a75] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-21fc8a75] { display: none; } .col-md-36[data-v-21fc8a75] { grid-column: span 36; } .col-md-28[data-v-21fc8a75] { grid-column: span 28; } .col-md-27[data-v-21fc8a75] { grid-column: span 27; } .col-md-24[data-v-21fc8a75] { grid-column: span 24; } .col-md-22[data-v-21fc8a75] { grid-column: span 22; } .col-md-20[data-v-21fc8a75] { grid-column: span 20; } .col-md-19[data-v-21fc8a75] { grid-column: span 19; } .col-md-18[data-v-21fc8a75] { grid-column: span 18; } .col-md-17[data-v-21fc8a75] { grid-column: span 17; } .col-md-16[data-v-21fc8a75] { grid-column: span 16; } .col-md-15[data-v-21fc8a75] { grid-column: span 15; } .col-md-14[data-v-21fc8a75] { grid-column: span 14; } .col-md-13[data-v-21fc8a75] { grid-column: span 13; } .col-md-12[data-v-21fc8a75] { grid-column: span 12; } .col-md-10[data-v-21fc8a75] { grid-column: span 10; } .col-md-9[data-v-21fc8a75] { grid-column: span 9; } .col-md-8[data-v-21fc8a75] { grid-column: span 8; } .col-md-6[data-v-21fc8a75] { grid-column: span 6; } .col-md-5[data-v-21fc8a75] { grid-column: span 5; } .col-md-4[data-v-21fc8a75] { grid-column: span 4; } .col-md-3[data-v-21fc8a75] { grid-column: span 3; } .col-md-2[data-v-21fc8a75] { grid-column: span 2; } .col-md-1[data-v-21fc8a75] { grid-column: span 1; } .col-md-auto[data-v-21fc8a75] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-21fc8a75] { display: none; } .col-sm-36[data-v-21fc8a75] { grid-column: span 36; } .col-sm-32[data-v-21fc8a75] { grid-column: span 32; } .col-sm-28[data-v-21fc8a75] { grid-column: span 28; } .col-sm-27[data-v-21fc8a75] { grid-column: span 27; } .col-sm-24[data-v-21fc8a75] { grid-column: span 24; } .col-sm-22[data-v-21fc8a75] { grid-column: span 22; } .col-sm-20[data-v-21fc8a75] { grid-column: span 20; } .col-sm-18[data-v-21fc8a75] { grid-column: span 18; } .col-sm-16[data-v-21fc8a75] { grid-column: span 16; } .col-sm-15[data-v-21fc8a75] { grid-column: span 15; } .col-sm-14[data-v-21fc8a75] { grid-column: span 14; } .col-sm-13[data-v-21fc8a75] { grid-column: span 12; } .col-sm-12[data-v-21fc8a75] { grid-column: span 12; } .col-sm-10[data-v-21fc8a75] { grid-column: span 10; } .col-sm-9[data-v-21fc8a75] { grid-column: span 8; } .col-sm-8[data-v-21fc8a75] { grid-column: span 8; } .col-sm-6[data-v-21fc8a75] { grid-column: span 6; } .col-sm-4[data-v-21fc8a75] { grid-column: span 4; } .col-sm-auto[data-v-21fc8a75] { grid-column: auto; } } .fade-enter-active[data-v-21fc8a75] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-21fc8a75] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-21fc8a75], .fade-leave-to[data-v-21fc8a75] { opacity: 0; } .newsletter-section[data-v-21fc8a75] { width: 100%; } .newsletter-section__container[data-v-21fc8a75] { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 50px; } .newsletter-section__content[data-v-21fc8a75] { display: flex; flex-direction: column; gap: 24px; } .newsletter-section__badge[data-v-21fc8a75] { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--primary-300); text-transform: uppercase; letter-spacing: 0.8px; width: fit-content; } .newsletter-section__badge svg[data-v-21fc8a75] { color: var(--primary-400); } .newsletter-section__title[data-v-21fc8a75] { font-size: 44px; font-weight: 700; line-height: 1.15; margin: 0; color: var(--text-primary); } .newsletter-section__description[data-v-21fc8a75] { font-size: 17px; line-height: 1.7; color: var(--text-secondary); max-width: 480px; margin: 0; } .newsletter-section__features[data-v-21fc8a75] { display: flex; flex-direction: column; gap: 16px; list-style: none; padding: 0; margin: 16px 0 0; } .newsletter-section__features li[data-v-21fc8a75] { display: flex; align-items: center; gap: 16px; } .newsletter-section__feature-icon[data-v-21fc8a75] { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 12px; flex-shrink: 0; } .newsletter-section__feature-icon svg[data-v-21fc8a75] { color: var(--primary-400); } .newsletter-section__feature-title[data-v-21fc8a75] { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); } .newsletter-section__feature-desc[data-v-21fc8a75] { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; } .newsletter-section__form-wrapper[data-v-21fc8a75] { justify-self: end; overflow: hidden; min-width: 0; } @media (max-width: 1160px) { .newsletter-section__container[data-v-21fc8a75] { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; } .newsletter-section__content[data-v-21fc8a75] { text-align: center; align-items: center; } .newsletter-section__title[data-v-21fc8a75] { font-size: 32px; } .newsletter-section__description[data-v-21fc8a75] { max-width: 100%; } .newsletter-section__features[data-v-21fc8a75] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .newsletter-section__features li[data-v-21fc8a75] { flex-direction: column; text-align: center; gap: 12px; } .newsletter-section__form-wrapper[data-v-21fc8a75] { justify-self: center; max-width: 100%; } } @media (max-width: 720px) { .newsletter-section__container[data-v-21fc8a75] { gap: 28px; padding: 0 16px; } .newsletter-section__title[data-v-21fc8a75] { font-size: 26px; } .newsletter-section__description[data-v-21fc8a75] { font-size: 15px; } .newsletter-section__features[data-v-21fc8a75] { display: none; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-a1538ef4]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-a1538ef4] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-a1538ef4] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-a1538ef4]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-a1538ef4], .theme-mode-light[data-v-a1538ef4] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-a1538ef4], .theme-mode-dark[data-v-a1538ef4] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-a1538ef4]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-a1538ef4]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-a1538ef4] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-a1538ef4] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-a1538ef4]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-a1538ef4], input[disabled][data-v-a1538ef4] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-a1538ef4] { opacity: 0.9; } input[readonly][data-v-a1538ef4] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-a1538ef4] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-a1538ef4]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-a1538ef4]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-a1538ef4]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-a1538ef4] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-a1538ef4]:nth-child(odd), .list-card-desktop__wrapper[data-v-a1538ef4]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-a1538ef4]:nth-child(even), .list-card-desktop__wrapper[data-v-a1538ef4]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-a1538ef4]:nth-child(odd), .listCardDesktopWrapper[data-v-a1538ef4]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-a1538ef4]:nth-child(even), .listCardDesktopWrapper[data-v-a1538ef4]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-a1538ef4] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-a1538ef4] { cursor: pointer; } .card-layout--selectionnable[data-v-a1538ef4]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-a1538ef4] { cursor: auto; } .card-layout--drawer[data-v-a1538ef4] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-a1538ef4] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-a1538ef4] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-a1538ef4] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-a1538ef4] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-a1538ef4] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-a1538ef4]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-a1538ef4] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-a1538ef4] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-a1538ef4] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-a1538ef4] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-a1538ef4] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-a1538ef4] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-a1538ef4] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-a1538ef4] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-a1538ef4] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-a1538ef4] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-a1538ef4] { background-color: #eb1515; } .color-chip--dossiers[data-v-a1538ef4] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-a1538ef4] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-a1538ef4] { background-color: #00a79b; } .color-chip--virements[data-v-a1538ef4] { background-color: var(--secondary-400); } .color-chip--factures[data-v-a1538ef4] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-a1538ef4] { background-color: #eb1515; } .color-recherche-dossiers[data-v-a1538ef4] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-a1538ef4] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-a1538ef4] { background-color: #00a79b; } .color-recherche-virements[data-v-a1538ef4] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-a1538ef4] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-a1538ef4] { color: #00a79b; cursor: pointer; } .scrollable[data-v-a1538ef4] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-a1538ef4] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-a1538ef4] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-a1538ef4] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-a1538ef4] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-a1538ef4] { font-weight: 800; } .grid-cell--column[data-v-a1538ef4] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-a1538ef4] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-a1538ef4] { fill: #00a79b; } .grid-cell--disabled[data-v-a1538ef4] { color: #cccccc; } .grid-cell--disabled svg[data-v-a1538ef4] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-a1538ef4] { white-space: nowrap; } .grid-cell--danger svg[data-v-a1538ef4] { fill: #eb1515; } .grid-cell--span-1[data-v-a1538ef4] { grid-column: span 1; } .grid-cell--span-2[data-v-a1538ef4] { grid-column: span 2; } .grid-cell--span-3[data-v-a1538ef4] { grid-column: span 3; } .grid-cell--span-4[data-v-a1538ef4] { grid-column: span 4; } .grid-cell--span-5[data-v-a1538ef4] { grid-column: span 5; } .grid-cell--span-6[data-v-a1538ef4] { grid-column: span 6; } .grid-cell--span-7[data-v-a1538ef4] { grid-column: span 7; } .grid-cell--span-8[data-v-a1538ef4] { grid-column: span 8; } .grid-cell--span-9[data-v-a1538ef4] { grid-column: span 9; } .grid-cell--span-10[data-v-a1538ef4] { grid-column: span 10; } .grid-cell--span-12[data-v-a1538ef4] { grid-column: span 12; } .grid-cell--span-13[data-v-a1538ef4] { grid-column: span 13; } .grid-cell--span-14[data-v-a1538ef4] { grid-column: span 14; } .grid-cell--span-16[data-v-a1538ef4] { grid-column: span 16; } .grid-cell--span-18[data-v-a1538ef4] { grid-column: span 18; } .grid-cell--span-20[data-v-a1538ef4] { grid-column: span 20; } .grid-cell--span-32[data-v-a1538ef4] { grid-column: span 32; } .grid-cell--span-36[data-v-a1538ef4] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-a1538ef4] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-a1538ef4] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-a1538ef4] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-a1538ef4] { justify-content: center !important; } .elem--bold span[data-v-a1538ef4] { font-weight: 800; } .elem--column[data-v-a1538ef4] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-a1538ef4] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-a1538ef4] { fill: #00a79b; } .elem--clickable[data-v-a1538ef4]:hover { cursor: pointer; } .elem--disabled[data-v-a1538ef4] { color: #cccccc; } .elem--disabled svg[data-v-a1538ef4] { fill: #cccccc; } .elem--nowrap span[data-v-a1538ef4] { white-space: nowrap; } .elem--danger svg[data-v-a1538ef4] { fill: #eb1515; } .elem--span-1[data-v-a1538ef4] { grid-column: span 1; } .elem--span-2[data-v-a1538ef4] { grid-column: span 2; } .elem--span-3[data-v-a1538ef4] { grid-column: span 3; } .elem--span-4[data-v-a1538ef4] { grid-column: span 4; } .elem--span-5[data-v-a1538ef4] { grid-column: span 5; } .elem--span-6[data-v-a1538ef4] { grid-column: span 6; } .elem--span-7[data-v-a1538ef4] { grid-column: span 7; } .elem--span-8[data-v-a1538ef4] { grid-column: span 8; } .elem--span-9[data-v-a1538ef4] { grid-column: span 9; } .elem--span-10[data-v-a1538ef4] { grid-column: span 10; } .elem--span-12[data-v-a1538ef4] { grid-column: span 12; } .elem--span-13[data-v-a1538ef4] { grid-column: span 13; } .elem--span-14[data-v-a1538ef4] { grid-column: span 14; } .elem--span-16[data-v-a1538ef4] { grid-column: span 16; } .elem--span-18[data-v-a1538ef4] { grid-column: span 18; } .elem--span-20[data-v-a1538ef4] { grid-column: span 20; } .elem--span-32[data-v-a1538ef4] { grid-column: span 32; } .elem--span-36[data-v-a1538ef4] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-a1538ef4] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-a1538ef4] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-a1538ef4]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-a1538ef4] { display: flex; } /* flex-direction */ .flex-column[data-v-a1538ef4] { flex-direction: column; } .flex-row[data-v-a1538ef4] { flex-direction: row; } /* flex */ .flex-1[data-v-a1538ef4] { flex: 1 !important; } .flex-2[data-v-a1538ef4] { flex: 2; } .flex-3[data-v-a1538ef4] { flex: 3; } .flex-3[data-v-a1538ef4] { flex: 4; } .flex-5[data-v-a1538ef4] { flex: 5; } .flex-auto[data-v-a1538ef4] { flex: auto; } .flex-none[data-v-a1538ef4] { flex: none; } .flex-content[data-v-a1538ef4] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-a1538ef4] { flex-wrap: wrap; } .flex-nowrap[data-v-a1538ef4] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-a1538ef4] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-a1538ef4] { justify-content: flex-start; } .justify-content-end[data-v-a1538ef4] { justify-content: flex-end; } .justify-content-baseline[data-v-a1538ef4] { justify-content: baseline; } .justify-content-center[data-v-a1538ef4] { justify-content: center; } .justify-content-space-between[data-v-a1538ef4] { justify-content: space-between; } .justify-content-space-around[data-v-a1538ef4] { justify-content: space-around; } .justify-content-space-evenly[data-v-a1538ef4] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-a1538ef4] { align-items: flex-start; } .align-items-flex-end[data-v-a1538ef4] { align-items: flex-end; } .align-items-stretch[data-v-a1538ef4] { align-items: stretch; } .align-items-baseline[data-v-a1538ef4] { align-items: baseline; } .align-items-center[data-v-a1538ef4] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-a1538ef4] { align-content: flex-start; } .align-content-flex-end[data-v-a1538ef4] { align-content: flex-end; } .align-content-center[data-v-a1538ef4] { align-content: center; } .align-content-stretch[data-v-a1538ef4] { align-content: stretch; } .align-content-space-between[data-v-a1538ef4] { align-content: space-between; } .align-content-space-around[data-v-a1538ef4] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-a1538ef4] { align-self: flex-start; } .align-self-flex-end[data-v-a1538ef4] { align-self: flex-end; } .align-self-stretch[data-v-a1538ef4] { align-self: stretch; } .align-self-flex-baseline[data-v-a1538ef4] { align-self: baseline; } .align-self-center[data-v-a1538ef4] { align-self: center; } .align-self-auto[data-v-a1538ef4] { align-self: auto; } .flex-gap-1[data-v-a1538ef4] { gap: 4px; } .flex-gap-2[data-v-a1538ef4] { gap: 8px; } .flex-gap-3[data-v-a1538ef4] { gap: 12px; } .flex-gap-4[data-v-a1538ef4] { gap: 16px; } .flex-gap-5[data-v-a1538ef4] { gap: 20px; } .flex-gap-6[data-v-a1538ef4] { gap: 24px; } .flex-gap-7[data-v-a1538ef4] { gap: 28px; } .flex-gap-8[data-v-a1538ef4] { gap: 32px; } .flex-gap-10[data-v-a1538ef4] { gap: 40px; } .flex-gap-12[data-v-a1538ef4] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-a1538ef4] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-a1538ef4] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-a1538ef4] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-a1538ef4] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-a1538ef4] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-a1538ef4] { display: none !important; } } .col-none[data-v-a1538ef4] { display: none; } .col-auto[data-v-a1538ef4] { grid-column: auto; } .col-1[data-v-a1538ef4] { grid-column: span 1; } .col-2[data-v-a1538ef4] { grid-column: span 2; } .col-3[data-v-a1538ef4] { grid-column: span 3; } .col-4[data-v-a1538ef4] { grid-column: span 4; } .col-5[data-v-a1538ef4] { grid-column: span 5; } .col-6[data-v-a1538ef4] { grid-column: span 6; } .col-7[data-v-a1538ef4] { grid-column: span 7; } .col-8[data-v-a1538ef4] { grid-column: span 8; } .col-9[data-v-a1538ef4] { grid-column: span 9; } .col-10[data-v-a1538ef4] { grid-column: span 10; } .col-12[data-v-a1538ef4] { grid-column: span 12; } .col-13[data-v-a1538ef4] { grid-column: span 13; } .col-14[data-v-a1538ef4] { grid-column: span 14; } .col-15[data-v-a1538ef4] { grid-column: span 15; } .col-16[data-v-a1538ef4] { grid-column: span 16; } .col-18[data-v-a1538ef4] { grid-column: span 18; } .col-20[data-v-a1538ef4] { grid-column: span 20; } .col-22[data-v-a1538ef4] { grid-column: span 22; } .col-24[data-v-a1538ef4] { grid-column: span 24; } .col-26[data-v-a1538ef4] { grid-column: span 26; } .col-27[data-v-a1538ef4] { grid-column: span 27; } .col-28[data-v-a1538ef4] { grid-column: span 28; } .col-30[data-v-a1538ef4] { grid-column: span 30; } .col-36[data-v-a1538ef4] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-a1538ef4] { display: none; } .col-md-36[data-v-a1538ef4] { grid-column: span 36; } .col-md-28[data-v-a1538ef4] { grid-column: span 28; } .col-md-27[data-v-a1538ef4] { grid-column: span 27; } .col-md-24[data-v-a1538ef4] { grid-column: span 24; } .col-md-22[data-v-a1538ef4] { grid-column: span 22; } .col-md-20[data-v-a1538ef4] { grid-column: span 20; } .col-md-19[data-v-a1538ef4] { grid-column: span 19; } .col-md-18[data-v-a1538ef4] { grid-column: span 18; } .col-md-17[data-v-a1538ef4] { grid-column: span 17; } .col-md-16[data-v-a1538ef4] { grid-column: span 16; } .col-md-15[data-v-a1538ef4] { grid-column: span 15; } .col-md-14[data-v-a1538ef4] { grid-column: span 14; } .col-md-13[data-v-a1538ef4] { grid-column: span 13; } .col-md-12[data-v-a1538ef4] { grid-column: span 12; } .col-md-10[data-v-a1538ef4] { grid-column: span 10; } .col-md-9[data-v-a1538ef4] { grid-column: span 9; } .col-md-8[data-v-a1538ef4] { grid-column: span 8; } .col-md-6[data-v-a1538ef4] { grid-column: span 6; } .col-md-5[data-v-a1538ef4] { grid-column: span 5; } .col-md-4[data-v-a1538ef4] { grid-column: span 4; } .col-md-3[data-v-a1538ef4] { grid-column: span 3; } .col-md-2[data-v-a1538ef4] { grid-column: span 2; } .col-md-1[data-v-a1538ef4] { grid-column: span 1; } .col-md-auto[data-v-a1538ef4] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-a1538ef4] { display: none; } .col-sm-36[data-v-a1538ef4] { grid-column: span 36; } .col-sm-32[data-v-a1538ef4] { grid-column: span 32; } .col-sm-28[data-v-a1538ef4] { grid-column: span 28; } .col-sm-27[data-v-a1538ef4] { grid-column: span 27; } .col-sm-24[data-v-a1538ef4] { grid-column: span 24; } .col-sm-22[data-v-a1538ef4] { grid-column: span 22; } .col-sm-20[data-v-a1538ef4] { grid-column: span 20; } .col-sm-18[data-v-a1538ef4] { grid-column: span 18; } .col-sm-16[data-v-a1538ef4] { grid-column: span 16; } .col-sm-15[data-v-a1538ef4] { grid-column: span 15; } .col-sm-14[data-v-a1538ef4] { grid-column: span 14; } .col-sm-13[data-v-a1538ef4] { grid-column: span 12; } .col-sm-12[data-v-a1538ef4] { grid-column: span 12; } .col-sm-10[data-v-a1538ef4] { grid-column: span 10; } .col-sm-9[data-v-a1538ef4] { grid-column: span 8; } .col-sm-8[data-v-a1538ef4] { grid-column: span 8; } .col-sm-6[data-v-a1538ef4] { grid-column: span 6; } .col-sm-4[data-v-a1538ef4] { grid-column: span 4; } .col-sm-auto[data-v-a1538ef4] { grid-column: auto; } } .fade-enter-active[data-v-a1538ef4] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-a1538ef4] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-a1538ef4], .fade-leave-to[data-v-a1538ef4] { opacity: 0; } .category-hero[data-v-a1538ef4] { position: relative; min-height: 520px; border-radius: inherit; overflow: hidden; background: linear-gradient(135deg, var(--secondary-600), var(--secondary-600)); } .category-hero__backgrounds[data-v-a1538ef4] { position: absolute; inset: 0; } .category-hero__bg[data-v-a1538ef4] { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .category-hero__bg.active[data-v-a1538ef4] { opacity: 1; } .category-hero__bg-overlay[data-v-a1538ef4] { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 75% 50%, transparent, rgba(var(--secondary-950-rgb), 0.5)), linear-gradient(90deg, rgba(var(--secondary-950-rgb), 0.92), rgba(var(--secondary-950-rgb), 0.6) 50%, transparent), linear-gradient(180deg, transparent 60%, rgba(var(--secondary-950-rgb), 0.8)); } .category-hero__grid[data-v-a1538ef4] { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(var(--primary-500-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-500-rgb), 0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 60% 50% at 30% 50%, black, transparent 70%); pointer-events: none; } .category-hero__particles[data-v-a1538ef4] { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .category-hero__particles span[data-v-a1538ef4] { position: absolute; width: 4px; height: 4px; background: rgba(var(--primary-400-rgb), 0.25); border-radius: 50%; animation: float-a1538ef4 20s infinite ease-in-out; } @keyframes float-a1538ef4 { 0%, 100% { transform: translateY(0); opacity: 0; } 10%, 90% { opacity: 0.6; } 100% { transform: translateY(-100vh); } } .category-hero__particles span[data-v-a1538ef4]:nth-child(1) { left: 10%; animation-delay: 0s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(2) { left: 20%; animation-delay: 2s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(3) { left: 30%; animation-delay: 4s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(4) { left: 40%; animation-delay: 1s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(5) { left: 50%; animation-delay: 3s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(6) { left: 60%; animation-delay: 5s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(7) { left: 70%; animation-delay: 2.5s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(8) { left: 80%; animation-delay: 0.5s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(9) { left: 15%; animation-delay: 6s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(10) { left: 45%; animation-delay: 7s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(11) { left: 75%; animation-delay: 4.5s; } .category-hero__particles span[data-v-a1538ef4]:nth-child(12) { left: 90%; animation-delay: 1.5s; } .category-hero__container[data-v-a1538ef4] { position: relative; z-index: 5; max-width: 1320px; margin: 0 auto; padding: 24px 40px 28px; display: flex; flex-direction: column; min-height: 520px; } .category-hero__nav[data-v-a1538ef4] { display: flex; gap: 8px; margin-bottom: 32px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; } .category-hero__nav[data-v-a1538ef4]::-webkit-scrollbar { display: none; } .category-hero__nav-btn[data-v-a1538ef4] { display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 14px; border-radius: 100px; background: rgba(var(--secondary-700-rgb), 0.5); border: 1px solid rgba(var(--neutral-100-rgb), 0.08); color: #b4bfce; font-family: 'Inter', -apple-system, sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; flex-shrink: 0; } .category-hero__nav-btn--success[data-v-a1538ef4] { --nav-color: #2cbb66; --nav-color-rgb: 44, 187, 102; } .category-hero__nav-btn--primary[data-v-a1538ef4] { --nav-color: var(--primary-500); --nav-color-rgb: var(--primary-500-rgb); } .category-hero__nav-btn--warning[data-v-a1538ef4] { --nav-color: #f97316; --nav-color-rgb: 249, 115, 22; } .category-hero__nav-btn--info[data-v-a1538ef4] { --nav-color: #3b82f6; --nav-color-rgb: 59, 130, 246; } .category-hero__nav-btn--purple[data-v-a1538ef4] { --nav-color: #8b5cf6; --nav-color-rgb: 139, 92, 246; } .category-hero__nav-btn--pink[data-v-a1538ef4] { --nav-color: #ec4899; --nav-color-rgb: 236, 72, 153; } .category-hero__nav-btn--teal[data-v-a1538ef4] { --nav-color: #14b8a6; --nav-color-rgb: 20, 184, 166; } .category-hero__nav-btn--orange[data-v-a1538ef4] { --nav-color: #f97316; --nav-color-rgb: 249, 115, 22; } .category-hero__nav-btn--indigo[data-v-a1538ef4] { --nav-color: #6366f1; --nav-color-rgb: 99, 102, 241; } .category-hero__nav-btn--emerald[data-v-a1538ef4] { --nav-color: #10b981; --nav-color-rgb: 16, 185, 129; } .category-hero__nav-btn[data-v-a1538ef4]:hover { background: rgba(var(--secondary-600-rgb), 0.6); color: #e2e7ef; } .category-hero__nav-btn.active[data-v-a1538ef4] { background: rgba(var(--nav-color-rgb), 0.15); border-color: rgba(var(--nav-color-rgb), 0.3); color: #f8f9fb; } .category-hero__nav-btn.active .category-hero__nav-icon[data-v-a1538ef4] { background: var(--nav-color); color: #f8f9fb; box-shadow: 0 0 16px rgba(var(--nav-color-rgb), 0.4); } .category-hero__nav-icon[data-v-a1538ef4] { width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--secondary-600-rgb), 0.6); display: flex; align-items: center; justify-content: center; color: var(--nav-color); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .category-hero__nav-icon svg[data-v-a1538ef4] { width: 16px; height: 16px; } .category-hero__content[data-v-a1538ef4] { flex: 1; display: flex; align-items: center; position: relative; } .category-hero__slides[data-v-a1538ef4] { width: 100%; position: relative; } .category-hero__slide[data-v-a1538ef4] { width: 100%; } .category-hero__slide-inner[data-v-a1538ef4] { display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; } .category-hero__slide--success[data-v-a1538ef4] { --slide-color: #2cbb66; --slide-color-rgb: 44, 187, 102; } .category-hero__slide--primary[data-v-a1538ef4] { --slide-color: var(--primary-500); --slide-color-rgb: var(--primary-500-rgb); } .category-hero__slide--warning[data-v-a1538ef4] { --slide-color: #f97316; --slide-color-rgb: 249, 115, 22; } .category-hero__slide--info[data-v-a1538ef4] { --slide-color: #3b82f6; --slide-color-rgb: 59, 130, 246; } .category-hero__slide--purple[data-v-a1538ef4] { --slide-color: #8b5cf6; --slide-color-rgb: 139, 92, 246; } .category-hero__slide--pink[data-v-a1538ef4] { --slide-color: #ec4899; --slide-color-rgb: 236, 72, 153; } .category-hero__slide--teal[data-v-a1538ef4] { --slide-color: #14b8a6; --slide-color-rgb: 20, 184, 166; } .category-hero__slide--orange[data-v-a1538ef4] { --slide-color: #f97316; --slide-color-rgb: 249, 115, 22; } .category-hero__slide--indigo[data-v-a1538ef4] { --slide-color: #6366f1; --slide-color-rgb: 99, 102, 241; } .category-hero__slide--emerald[data-v-a1538ef4] { --slide-color: #10b981; --slide-color-rgb: 16, 185, 129; } .category-hero__text[data-v-a1538ef4] { display: flex; flex-direction: column; gap: 16px; } .category-hero__eyebrow[data-v-a1538ef4] { display: inline-flex; align-items: center; gap: 12px; font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--slide-color); } .category-hero__eyebrow span[data-v-a1538ef4] { width: 32px; height: 1px; background: linear-gradient(90deg, var(--slide-color), transparent); } .category-hero__title[data-v-a1538ef4] { font-family: 'Instrument Sans', -apple-system, sans-serif; font-size: 42px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: #f8f9fb; margin: 0; } .category-hero__title span[data-v-a1538ef4] { display: block; } .category-hero__title span[data-v-a1538ef4]:first-child { color: #edf1f5; } .category-hero__title-accent[data-v-a1538ef4] { background: linear-gradient(135deg, var(--slide-color), rgba(var(--slide-color-rgb), 0.7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .category-hero__desc[data-v-a1538ef4] { font-family: 'Inter', -apple-system, sans-serif; font-size: 15px; line-height: 1.7; color: #cdd5e0; max-width: 480px; margin: 4px 0 8px; } .category-hero__stats[data-v-a1538ef4] { display: flex; gap: 32px; margin: 8px 0 16px; padding: 16px 0; border-top: 1px solid rgba(var(--neutral-100-rgb), 0.08); border-bottom: 1px solid rgba(var(--neutral-100-rgb), 0.08); } .category-hero__stat[data-v-a1538ef4] { display: flex; flex-direction: column; gap: 2px; } .category-hero__stat strong[data-v-a1538ef4] { font-family: 'Instrument Sans', -apple-system, sans-serif; font-size: 24px; font-weight: 600; color: #f8f9fb; } .category-hero__stat span[data-v-a1538ef4] { font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #b4bfce; } .category-hero__actions[data-v-a1538ef4] { display: flex; gap: 12px; margin-top: 4px; } .category-hero__btn[data-v-a1538ef4] { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 12px; font-family: 'Inter', -apple-system, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .category-hero__btn svg[data-v-a1538ef4] { width: 18px; height: 18px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .category-hero__btn--primary[data-v-a1538ef4] { background: var(--slide-color); color: #f8f9fb; box-shadow: 0 4px 16px rgba(var(--slide-color-rgb), 0.3); } .category-hero__btn--primary[data-v-a1538ef4]:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--slide-color-rgb), 0.4); } .category-hero__btn--primary:hover svg[data-v-a1538ef4] { transform: translateX(4px); } .category-hero__btn--ghost[data-v-a1538ef4] { background: rgba(var(--secondary-700-rgb), 0.5); color: #e2e7ef; border: 1px solid rgba(var(--neutral-100-rgb), 0.12); } .category-hero__btn--ghost[data-v-a1538ef4]:hover { background: rgba(var(--secondary-600-rgb), 0.6); color: #f8f9fb; transform: translateY(-2px); } .category-hero__disclaimer[data-v-a1538ef4] { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; color: #94a2b8; } .category-hero__media[data-v-a1538ef4] { position: relative; } .category-hero__card[data-v-a1538ef4] { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .category-hero__card[data-v-a1538ef4]:hover { transform: translateY(-8px); } .category-hero__card:hover .category-hero__card-glow[data-v-a1538ef4] { opacity: 1; } .category-hero__card:hover .category-hero__card-shine[data-v-a1538ef4] { transform: translateX(100%); } .category-hero__card-glow[data-v-a1538ef4] { position: absolute; inset: -2px; background: linear-gradient(135deg, var(--slide-color), transparent 50%, var(--slide-color)); border-radius: 22px; opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; } .category-hero__card-image[data-v-a1538ef4] { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .category-hero__card-image img[data-v-a1538ef4] { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .category-hero__card-image[data-v-a1538ef4]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(var(--secondary-950-rgb), 0.95) 100%); } .category-hero__card-shine[data-v-a1538ef4] { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transform: translateX(-100%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); z-index: 5; } .category-hero__card-content[data-v-a1538ef4] { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 10; } .category-hero__card-badge[data-v-a1538ef4] { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 6px; background: rgba(var(--slide-color-rgb), 0.2); backdrop-filter: blur(8px); font-family: 'Inter', -apple-system, sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #f8f9fb; } .category-hero__card h3[data-v-a1538ef4] { font-family: 'Instrument Sans', -apple-system, sans-serif; font-size: 16px; font-weight: 600; color: #f8f9fb; margin: 0; line-height: 1.3; } .category-hero__card-play[data-v-a1538ef4] { width: 44px; height: 44px; border-radius: 50%; background: var(--slide-color); display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 0 20px rgba(var(--slide-color-rgb), 0.4); position: absolute; right: 20px; bottom: 20px; } .category-hero__card-play svg[data-v-a1538ef4] { width: 18px; height: 18px; fill: #f8f9fb; margin-left: 2px; } .category-hero__molecule[data-v-a1538ef4] { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; color: var(--slide-color); opacity: 0.2; animation: rotate-a1538ef4 30s linear infinite; pointer-events: none; } @keyframes rotate-a1538ef4 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .category-hero__progress[data-v-a1538ef4] { display: flex; gap: 8px; margin-top: 28px; justify-content: center; flex-wrap: wrap; } .category-hero__progress-btn[data-v-a1538ef4] { width: 48px; height: 3px; background: rgba(var(--neutral-100-rgb), 0.1); border-radius: 2px; cursor: pointer; overflow: hidden; padding: 0; border: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .category-hero__progress-btn--success[data-v-a1538ef4] { --prog-color: #2cbb66; } .category-hero__progress-btn--primary[data-v-a1538ef4] { --prog-color: var(--primary-500); } .category-hero__progress-btn--warning[data-v-a1538ef4] { --prog-color: #f97316; } .category-hero__progress-btn--info[data-v-a1538ef4] { --prog-color: #3b82f6; } .category-hero__progress-btn--purple[data-v-a1538ef4] { --prog-color: #8b5cf6; } .category-hero__progress-btn--pink[data-v-a1538ef4] { --prog-color: #ec4899; } .category-hero__progress-btn--teal[data-v-a1538ef4] { --prog-color: #14b8a6; } .category-hero__progress-btn--orange[data-v-a1538ef4] { --prog-color: #f97316; } .category-hero__progress-btn--indigo[data-v-a1538ef4] { --prog-color: #6366f1; } .category-hero__progress-btn--emerald[data-v-a1538ef4] { --prog-color: #10b981; } .category-hero__progress-btn[data-v-a1538ef4]:hover { background: rgba(var(--neutral-100-rgb), 0.2); } .category-hero__progress-btn.active[data-v-a1538ef4] { width: 72px; } .category-hero__progress-btn.active span[data-v-a1538ef4] { animation: progress-a1538ef4 linear forwards; } .category-hero__progress-btn span[data-v-a1538ef4] { display: block; width: 0; height: 100%; background: var(--prog-color, #cdd5e0); border-radius: 2px; } @keyframes progress-a1538ef4 { from { width: 0; } to { width: 100%; } } .video-modal[data-v-a1538ef4] { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(12px); } .video-modal__content[data-v-a1538ef4] { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6); } .video-modal__content iframe[data-v-a1538ef4] { width: 100%; height: 100%; } .video-modal__close[data-v-a1538ef4] { position: absolute; top: -50px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--neutral-100-rgb), 0.1); border: 1px solid rgba(var(--neutral-100-rgb), 0.2); color: #f8f9fb; font-size: 20px; cursor: pointer; transition: all 0.3s ease; } .video-modal__close[data-v-a1538ef4]:hover { background: rgba(var(--neutral-100-rgb), 0.2); transform: rotate(90deg); } .slide-enter-active[data-v-a1538ef4] { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .slide-leave-active[data-v-a1538ef4] { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: absolute; } .slide-enter-from[data-v-a1538ef4] { opacity: 0; transform: translateX(40px); } .slide-leave-to[data-v-a1538ef4] { opacity: 0; transform: translateX(-40px); } .modal-enter-active[data-v-a1538ef4], .modal-leave-active[data-v-a1538ef4] { transition: opacity 0.4s ease; } .modal-enter-from[data-v-a1538ef4], .modal-leave-to[data-v-a1538ef4] { opacity: 0; } @media (max-width: 1160px) { .category-hero__slide-inner[data-v-a1538ef4] { grid-template-columns: 1fr 360px; gap: 40px; } .category-hero__title[data-v-a1538ef4] { font-size: 36px; } .category-hero[data-v-a1538ef4] { min-height: auto; } .category-hero__container[data-v-a1538ef4] { padding: 24px; min-height: auto; } .category-hero__nav[data-v-a1538ef4] { flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .category-hero__slide-inner[data-v-a1538ef4] { grid-template-columns: 1fr; gap: 32px; } .category-hero__media[data-v-a1538ef4] { order: -1; } .category-hero__card[data-v-a1538ef4] { max-width: 400px; } .category-hero__molecule[data-v-a1538ef4] { display: none; } .category-hero__stats[data-v-a1538ef4] { gap: 24px; } } @media (max-width: 720px) { .category-hero__container[data-v-a1538ef4] { padding: 20px 16px; } .category-hero__nav-btn[data-v-a1538ef4] { padding: 10px 14px 10px 10px; font-size: 12px; min-height: 44px; } .category-hero__nav-icon[data-v-a1538ef4] { width: 28px; height: 28px; } .category-hero__nav-icon svg[data-v-a1538ef4] { width: 14px; height: 14px; } .category-hero__title[data-v-a1538ef4] { font-size: 28px; } .category-hero__desc[data-v-a1538ef4] { font-size: 14px; } .category-hero__stats[data-v-a1538ef4] { gap: 16px; } .category-hero__stat strong[data-v-a1538ef4] { font-size: 20px; } .category-hero__actions[data-v-a1538ef4] { flex-direction: column; } .category-hero__btn[data-v-a1538ef4] { width: 100%; justify-content: center; min-height: 44px; } .video-modal[data-v-a1538ef4] { padding: 20px; } .video-modal__close[data-v-a1538ef4] { top: -44px; width: 44px; height: 44px; } } .category-mobile[data-v-a1538ef4] { position: relative; min-height: 420px; display: flex; flex-direction: column; } .category-mobile--success[data-v-a1538ef4] { --accent-color: #2cbb66; --accent-color-rgb: 44, 187, 102; } .category-mobile--primary[data-v-a1538ef4] { --accent-color: var(--primary-500); --accent-color-rgb: var(--primary-500-rgb); } .category-mobile--warning[data-v-a1538ef4] { --accent-color: #f97316; --accent-color-rgb: 249, 115, 22; } .category-mobile--info[data-v-a1538ef4] { --accent-color: #3b82f6; --accent-color-rgb: 59, 130, 246; } .category-mobile--purple[data-v-a1538ef4] { --accent-color: #8b5cf6; --accent-color-rgb: 139, 92, 246; } .category-mobile--pink[data-v-a1538ef4] { --accent-color: #ec4899; --accent-color-rgb: 236, 72, 153; } .category-mobile--teal[data-v-a1538ef4] { --accent-color: #14b8a6; --accent-color-rgb: 20, 184, 166; } .category-mobile--orange[data-v-a1538ef4] { --accent-color: #f97316; --accent-color-rgb: 249, 115, 22; } .category-mobile--indigo[data-v-a1538ef4] { --accent-color: #6366f1; --accent-color-rgb: 99, 102, 241; } .category-mobile--emerald[data-v-a1538ef4] { --accent-color: #10b981; --accent-color-rgb: 16, 185, 129; } .category-mobile__bg[data-v-a1538ef4] { position: absolute; inset: 0; background-size: cover; background-position: center; transition: background-image 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .category-mobile__overlay[data-v-a1538ef4] { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--secondary-950-rgb), 0.8) 0%, rgba(var(--secondary-950-rgb), 0.4) 40%, rgba(var(--secondary-950-rgb), 0.7) 70%, rgba(var(--secondary-950-rgb), 0.95) 100%); } .category-mobile__content[data-v-a1538ef4] { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 20px; gap: 20px; } .category-mobile__header[data-v-a1538ef4] { display: flex; flex-direction: column; gap: 8px; } .category-mobile__bottom[data-v-a1538ef4] { display: flex; flex-direction: column; gap: 16px; } .category-mobile__eyebrow[data-v-a1538ef4] { font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-color); } .category-mobile__title[data-v-a1538ef4] { font-family: 'Instrument Sans', -apple-system, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.1; color: #f8f9fb; margin: 0; background: linear-gradient(135deg, #f8f9fb, var(--accent-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .category-mobile__desc[data-v-a1538ef4] { font-family: 'Inter', -apple-system, sans-serif; font-size: 14px; line-height: 1.6; color: #cdd5e0; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .category-mobile__actions[data-v-a1538ef4] { display: flex; gap: 12px; align-items: center; } .category-mobile__cta[data-v-a1538ef4] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; background: var(--accent-color); border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .category-mobile__cta span[data-v-a1538ef4] { font-family: 'Inter', -apple-system, sans-serif; font-size: 15px; font-weight: 600; color: #f8f9fb; } .category-mobile__cta svg[data-v-a1538ef4] { color: #f8f9fb; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .category-mobile__cta[data-v-a1538ef4]:active { transform: scale(0.98); } .category-mobile__cta:active svg[data-v-a1538ef4] { transform: translateX(4px); } .category-mobile__video-btn[data-v-a1538ef4] { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(var(--neutral-100-rgb), 0.1); border: 1px solid rgba(var(--neutral-100-rgb), 0.2); border-radius: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .category-mobile__video-btn svg[data-v-a1538ef4] { color: #f8f9fb; } .category-mobile__video-btn[data-v-a1538ef4]:active { transform: scale(0.95); background: rgba(var(--accent-color-rgb), 0.2); border-color: var(--accent-color); } .category-mobile__nav-scroll[data-v-a1538ef4] { margin: 0 -20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .category-mobile__nav-scroll[data-v-a1538ef4]::-webkit-scrollbar { display: none; } .category-mobile__nav[data-v-a1538ef4] { display: inline-flex; gap: 8px; padding: 0 20px; } .category-mobile__nav-item[data-v-a1538ef4] { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px; background: rgba(var(--secondary-800-rgb), 0.6); border: 1px solid rgba(var(--neutral-100-rgb), 0.08); border-radius: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); min-width: 72px; } .category-mobile__nav-item--success[data-v-a1538ef4] { --item-color: #2cbb66; --item-color-rgb: 44, 187, 102; } .category-mobile__nav-item--primary[data-v-a1538ef4] { --item-color: var(--primary-500); --item-color-rgb: var(--primary-500-rgb); } .category-mobile__nav-item--warning[data-v-a1538ef4] { --item-color: #f97316; --item-color-rgb: 249, 115, 22; } .category-mobile__nav-item--info[data-v-a1538ef4] { --item-color: #3b82f6; --item-color-rgb: 59, 130, 246; } .category-mobile__nav-item--purple[data-v-a1538ef4] { --item-color: #8b5cf6; --item-color-rgb: 139, 92, 246; } .category-mobile__nav-item--pink[data-v-a1538ef4] { --item-color: #ec4899; --item-color-rgb: 236, 72, 153; } .category-mobile__nav-item--teal[data-v-a1538ef4] { --item-color: #14b8a6; --item-color-rgb: 20, 184, 166; } .category-mobile__nav-item--orange[data-v-a1538ef4] { --item-color: #f97316; --item-color-rgb: 249, 115, 22; } .category-mobile__nav-item--indigo[data-v-a1538ef4] { --item-color: #6366f1; --item-color-rgb: 99, 102, 241; } .category-mobile__nav-item--emerald[data-v-a1538ef4] { --item-color: #10b981; --item-color-rgb: 16, 185, 129; } .category-mobile__nav-item.active[data-v-a1538ef4] { background: rgba(var(--item-color-rgb), 0.15); border-color: rgba(var(--item-color-rgb), 0.4); } .category-mobile__nav-item.active .category-mobile__nav-icon[data-v-a1538ef4] { background: var(--item-color); } .category-mobile__nav-item.active .category-mobile__nav-icon svg[data-v-a1538ef4] { color: #f8f9fb; } .category-mobile__nav-item.active .category-mobile__nav-label[data-v-a1538ef4] { color: #f8f9fb; } .category-mobile__nav-item[data-v-a1538ef4]:active { transform: scale(0.96); } .category-mobile__nav-icon[data-v-a1538ef4] { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(var(--item-color-rgb), 0.2); border-radius: 8px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .category-mobile__nav-icon svg[data-v-a1538ef4] { width: 18px; height: 18px; color: var(--item-color); } .category-mobile__nav-label[data-v-a1538ef4] { font-family: 'Inter', -apple-system, sans-serif; font-size: 10px; font-weight: 500; color: #b4bfce; white-space: nowrap; transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .video-modal__close-btn[data-v-a1538ef4] { position: absolute; top: -44px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--neutral-100-rgb), 0.1); border: 1px solid rgba(var(--neutral-100-rgb), 0.2); color: #f8f9fb; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .video-modal__close-btn[data-v-a1538ef4]:hover { background: rgba(var(--neutral-100-rgb), 0.2); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-f72b3f52]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-f72b3f52] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-f72b3f52] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-f72b3f52]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-f72b3f52], .theme-mode-light[data-v-f72b3f52] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-f72b3f52], .theme-mode-dark[data-v-f72b3f52] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-f72b3f52]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-f72b3f52]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-f72b3f52] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-f72b3f52] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-f72b3f52]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-f72b3f52], input[disabled][data-v-f72b3f52] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-f72b3f52] { opacity: 0.9; } input[readonly][data-v-f72b3f52] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-f72b3f52] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-f72b3f52]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-f72b3f52]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-f72b3f52]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-f72b3f52] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-f72b3f52]:nth-child(odd), .list-card-desktop__wrapper[data-v-f72b3f52]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-f72b3f52]:nth-child(even), .list-card-desktop__wrapper[data-v-f72b3f52]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-f72b3f52]:nth-child(odd), .listCardDesktopWrapper[data-v-f72b3f52]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-f72b3f52]:nth-child(even), .listCardDesktopWrapper[data-v-f72b3f52]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-f72b3f52] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-f72b3f52] { cursor: pointer; } .card-layout--selectionnable[data-v-f72b3f52]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-f72b3f52] { cursor: auto; } .card-layout--drawer[data-v-f72b3f52] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-f72b3f52] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-f72b3f52] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-f72b3f52] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-f72b3f52] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-f72b3f52] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-f72b3f52]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-f72b3f52] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-f72b3f52] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-f72b3f52] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-f72b3f52] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-f72b3f52] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-f72b3f52] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-f72b3f52] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-f72b3f52] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-f72b3f52] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-f72b3f52] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-f72b3f52] { background-color: #eb1515; } .color-chip--dossiers[data-v-f72b3f52] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-f72b3f52] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-f72b3f52] { background-color: #00a79b; } .color-chip--virements[data-v-f72b3f52] { background-color: var(--secondary-400); } .color-chip--factures[data-v-f72b3f52] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-f72b3f52] { background-color: #eb1515; } .color-recherche-dossiers[data-v-f72b3f52] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-f72b3f52] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-f72b3f52] { background-color: #00a79b; } .color-recherche-virements[data-v-f72b3f52] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-f72b3f52] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-f72b3f52] { color: #00a79b; cursor: pointer; } .scrollable[data-v-f72b3f52] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-f72b3f52] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-f72b3f52] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-f72b3f52] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-f72b3f52] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-f72b3f52] { font-weight: 800; } .grid-cell--column[data-v-f72b3f52] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-f72b3f52] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-f72b3f52] { fill: #00a79b; } .grid-cell--disabled[data-v-f72b3f52] { color: #cccccc; } .grid-cell--disabled svg[data-v-f72b3f52] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-f72b3f52] { white-space: nowrap; } .grid-cell--danger svg[data-v-f72b3f52] { fill: #eb1515; } .grid-cell--span-1[data-v-f72b3f52] { grid-column: span 1; } .grid-cell--span-2[data-v-f72b3f52] { grid-column: span 2; } .grid-cell--span-3[data-v-f72b3f52] { grid-column: span 3; } .grid-cell--span-4[data-v-f72b3f52] { grid-column: span 4; } .grid-cell--span-5[data-v-f72b3f52] { grid-column: span 5; } .grid-cell--span-6[data-v-f72b3f52] { grid-column: span 6; } .grid-cell--span-7[data-v-f72b3f52] { grid-column: span 7; } .grid-cell--span-8[data-v-f72b3f52] { grid-column: span 8; } .grid-cell--span-9[data-v-f72b3f52] { grid-column: span 9; } .grid-cell--span-10[data-v-f72b3f52] { grid-column: span 10; } .grid-cell--span-12[data-v-f72b3f52] { grid-column: span 12; } .grid-cell--span-13[data-v-f72b3f52] { grid-column: span 13; } .grid-cell--span-14[data-v-f72b3f52] { grid-column: span 14; } .grid-cell--span-16[data-v-f72b3f52] { grid-column: span 16; } .grid-cell--span-18[data-v-f72b3f52] { grid-column: span 18; } .grid-cell--span-20[data-v-f72b3f52] { grid-column: span 20; } .grid-cell--span-32[data-v-f72b3f52] { grid-column: span 32; } .grid-cell--span-36[data-v-f72b3f52] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-f72b3f52] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-f72b3f52] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-f72b3f52] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-f72b3f52] { justify-content: center !important; } .elem--bold span[data-v-f72b3f52] { font-weight: 800; } .elem--column[data-v-f72b3f52] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-f72b3f52] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-f72b3f52] { fill: #00a79b; } .elem--clickable[data-v-f72b3f52]:hover { cursor: pointer; } .elem--disabled[data-v-f72b3f52] { color: #cccccc; } .elem--disabled svg[data-v-f72b3f52] { fill: #cccccc; } .elem--nowrap span[data-v-f72b3f52] { white-space: nowrap; } .elem--danger svg[data-v-f72b3f52] { fill: #eb1515; } .elem--span-1[data-v-f72b3f52] { grid-column: span 1; } .elem--span-2[data-v-f72b3f52] { grid-column: span 2; } .elem--span-3[data-v-f72b3f52] { grid-column: span 3; } .elem--span-4[data-v-f72b3f52] { grid-column: span 4; } .elem--span-5[data-v-f72b3f52] { grid-column: span 5; } .elem--span-6[data-v-f72b3f52] { grid-column: span 6; } .elem--span-7[data-v-f72b3f52] { grid-column: span 7; } .elem--span-8[data-v-f72b3f52] { grid-column: span 8; } .elem--span-9[data-v-f72b3f52] { grid-column: span 9; } .elem--span-10[data-v-f72b3f52] { grid-column: span 10; } .elem--span-12[data-v-f72b3f52] { grid-column: span 12; } .elem--span-13[data-v-f72b3f52] { grid-column: span 13; } .elem--span-14[data-v-f72b3f52] { grid-column: span 14; } .elem--span-16[data-v-f72b3f52] { grid-column: span 16; } .elem--span-18[data-v-f72b3f52] { grid-column: span 18; } .elem--span-20[data-v-f72b3f52] { grid-column: span 20; } .elem--span-32[data-v-f72b3f52] { grid-column: span 32; } .elem--span-36[data-v-f72b3f52] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-f72b3f52] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-f72b3f52] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-f72b3f52]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-f72b3f52] { display: flex; } /* flex-direction */ .flex-column[data-v-f72b3f52] { flex-direction: column; } .flex-row[data-v-f72b3f52] { flex-direction: row; } /* flex */ .flex-1[data-v-f72b3f52] { flex: 1 !important; } .flex-2[data-v-f72b3f52] { flex: 2; } .flex-3[data-v-f72b3f52] { flex: 3; } .flex-3[data-v-f72b3f52] { flex: 4; } .flex-5[data-v-f72b3f52] { flex: 5; } .flex-auto[data-v-f72b3f52] { flex: auto; } .flex-none[data-v-f72b3f52] { flex: none; } .flex-content[data-v-f72b3f52] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-f72b3f52] { flex-wrap: wrap; } .flex-nowrap[data-v-f72b3f52] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-f72b3f52] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-f72b3f52] { justify-content: flex-start; } .justify-content-end[data-v-f72b3f52] { justify-content: flex-end; } .justify-content-baseline[data-v-f72b3f52] { justify-content: baseline; } .justify-content-center[data-v-f72b3f52] { justify-content: center; } .justify-content-space-between[data-v-f72b3f52] { justify-content: space-between; } .justify-content-space-around[data-v-f72b3f52] { justify-content: space-around; } .justify-content-space-evenly[data-v-f72b3f52] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-f72b3f52] { align-items: flex-start; } .align-items-flex-end[data-v-f72b3f52] { align-items: flex-end; } .align-items-stretch[data-v-f72b3f52] { align-items: stretch; } .align-items-baseline[data-v-f72b3f52] { align-items: baseline; } .align-items-center[data-v-f72b3f52] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-f72b3f52] { align-content: flex-start; } .align-content-flex-end[data-v-f72b3f52] { align-content: flex-end; } .align-content-center[data-v-f72b3f52] { align-content: center; } .align-content-stretch[data-v-f72b3f52] { align-content: stretch; } .align-content-space-between[data-v-f72b3f52] { align-content: space-between; } .align-content-space-around[data-v-f72b3f52] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-f72b3f52] { align-self: flex-start; } .align-self-flex-end[data-v-f72b3f52] { align-self: flex-end; } .align-self-stretch[data-v-f72b3f52] { align-self: stretch; } .align-self-flex-baseline[data-v-f72b3f52] { align-self: baseline; } .align-self-center[data-v-f72b3f52] { align-self: center; } .align-self-auto[data-v-f72b3f52] { align-self: auto; } .flex-gap-1[data-v-f72b3f52] { gap: 4px; } .flex-gap-2[data-v-f72b3f52] { gap: 8px; } .flex-gap-3[data-v-f72b3f52] { gap: 12px; } .flex-gap-4[data-v-f72b3f52] { gap: 16px; } .flex-gap-5[data-v-f72b3f52] { gap: 20px; } .flex-gap-6[data-v-f72b3f52] { gap: 24px; } .flex-gap-7[data-v-f72b3f52] { gap: 28px; } .flex-gap-8[data-v-f72b3f52] { gap: 32px; } .flex-gap-10[data-v-f72b3f52] { gap: 40px; } .flex-gap-12[data-v-f72b3f52] { gap: 48px; } .col-none[data-v-f72b3f52] { display: none; } .col-auto[data-v-f72b3f52] { grid-column: auto; } .col-1[data-v-f72b3f52] { grid-column: span 1; } .col-2[data-v-f72b3f52] { grid-column: span 2; } .col-3[data-v-f72b3f52] { grid-column: span 3; } .col-4[data-v-f72b3f52] { grid-column: span 4; } .col-5[data-v-f72b3f52] { grid-column: span 5; } .col-6[data-v-f72b3f52] { grid-column: span 6; } .col-7[data-v-f72b3f52] { grid-column: span 7; } .col-8[data-v-f72b3f52] { grid-column: span 8; } .col-9[data-v-f72b3f52] { grid-column: span 9; } .col-10[data-v-f72b3f52] { grid-column: span 10; } .col-12[data-v-f72b3f52] { grid-column: span 12; } .col-13[data-v-f72b3f52] { grid-column: span 13; } .col-14[data-v-f72b3f52] { grid-column: span 14; } .col-15[data-v-f72b3f52] { grid-column: span 15; } .col-16[data-v-f72b3f52] { grid-column: span 16; } .col-18[data-v-f72b3f52] { grid-column: span 18; } .col-20[data-v-f72b3f52] { grid-column: span 20; } .col-22[data-v-f72b3f52] { grid-column: span 22; } .col-24[data-v-f72b3f52] { grid-column: span 24; } .col-26[data-v-f72b3f52] { grid-column: span 26; } .col-27[data-v-f72b3f52] { grid-column: span 27; } .col-28[data-v-f72b3f52] { grid-column: span 28; } .col-30[data-v-f72b3f52] { grid-column: span 30; } .col-36[data-v-f72b3f52] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-f72b3f52] { display: none; } .col-md-36[data-v-f72b3f52] { grid-column: span 36; } .col-md-28[data-v-f72b3f52] { grid-column: span 28; } .col-md-27[data-v-f72b3f52] { grid-column: span 27; } .col-md-24[data-v-f72b3f52] { grid-column: span 24; } .col-md-22[data-v-f72b3f52] { grid-column: span 22; } .col-md-20[data-v-f72b3f52] { grid-column: span 20; } .col-md-19[data-v-f72b3f52] { grid-column: span 19; } .col-md-18[data-v-f72b3f52] { grid-column: span 18; } .col-md-17[data-v-f72b3f52] { grid-column: span 17; } .col-md-16[data-v-f72b3f52] { grid-column: span 16; } .col-md-15[data-v-f72b3f52] { grid-column: span 15; } .col-md-14[data-v-f72b3f52] { grid-column: span 14; } .col-md-13[data-v-f72b3f52] { grid-column: span 13; } .col-md-12[data-v-f72b3f52] { grid-column: span 12; } .col-md-10[data-v-f72b3f52] { grid-column: span 10; } .col-md-9[data-v-f72b3f52] { grid-column: span 9; } .col-md-8[data-v-f72b3f52] { grid-column: span 8; } .col-md-6[data-v-f72b3f52] { grid-column: span 6; } .col-md-5[data-v-f72b3f52] { grid-column: span 5; } .col-md-4[data-v-f72b3f52] { grid-column: span 4; } .col-md-3[data-v-f72b3f52] { grid-column: span 3; } .col-md-2[data-v-f72b3f52] { grid-column: span 2; } .col-md-1[data-v-f72b3f52] { grid-column: span 1; } .col-md-auto[data-v-f72b3f52] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-f72b3f52] { display: none; } .col-sm-36[data-v-f72b3f52] { grid-column: span 36; } .col-sm-32[data-v-f72b3f52] { grid-column: span 32; } .col-sm-28[data-v-f72b3f52] { grid-column: span 28; } .col-sm-27[data-v-f72b3f52] { grid-column: span 27; } .col-sm-24[data-v-f72b3f52] { grid-column: span 24; } .col-sm-22[data-v-f72b3f52] { grid-column: span 22; } .col-sm-20[data-v-f72b3f52] { grid-column: span 20; } .col-sm-18[data-v-f72b3f52] { grid-column: span 18; } .col-sm-16[data-v-f72b3f52] { grid-column: span 16; } .col-sm-15[data-v-f72b3f52] { grid-column: span 15; } .col-sm-14[data-v-f72b3f52] { grid-column: span 14; } .col-sm-13[data-v-f72b3f52] { grid-column: span 12; } .col-sm-12[data-v-f72b3f52] { grid-column: span 12; } .col-sm-10[data-v-f72b3f52] { grid-column: span 10; } .col-sm-9[data-v-f72b3f52] { grid-column: span 8; } .col-sm-8[data-v-f72b3f52] { grid-column: span 8; } .col-sm-6[data-v-f72b3f52] { grid-column: span 6; } .col-sm-4[data-v-f72b3f52] { grid-column: span 4; } .col-sm-auto[data-v-f72b3f52] { grid-column: auto; } } .fade-enter-active[data-v-f72b3f52] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-f72b3f52] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-f72b3f52], .fade-leave-to[data-v-f72b3f52] { opacity: 0; } @media (max-width: 720px) { .hide-mobile[data-v-f72b3f52] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-f72b3f52] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-f72b3f52] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-f72b3f52] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-f72b3f52] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-f72b3f52] { display: none !important; } } .best-sellers[data-v-f72b3f52] { width: 100%; } .best-sellers__container[data-v-f72b3f52] { max-width: 1200px; margin: 0 auto; padding: 0 50px; } @media (max-width: 1160px) { .best-sellers__container[data-v-f72b3f52] { padding: 0 24px; } } @media (max-width: 720px) { .best-sellers__container[data-v-f72b3f52] { padding: 0 16px; } } .best-sellers__header[data-v-f72b3f52] { position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 24px; } @media (max-width: 720px) { .best-sellers__header[data-v-f72b3f52] { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } } .best-sellers__title-group[data-v-f72b3f52] { display: flex; flex-direction: column; gap: 8px; } .best-sellers__badge[data-v-f72b3f52] { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(184, 134, 11, 0.1) 100%); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 100px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 12px; font-weight: 600; color: #ffd700; } .best-sellers__badge svg[data-v-f72b3f52] { color: #ffd700; } @media (max-width: 720px) { .best-sellers__badge[data-v-f72b3f52] { position: absolute; top: -16px; right: 0; margin-bottom: 0; } } .best-sellers__title[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: #f8f9fb; margin: 0; line-height: 1.2; letter-spacing: -0.02em; } .best-sellers__subtitle[data-v-f72b3f52] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 16px; color: #cdd5e0; margin: 0; max-width: 400px; } .best-sellers__view-all[data-v-f72b3f52] { flex-shrink: 0; } @media (max-width: 720px) { .best-sellers__view-all[data-v-f72b3f52] { display: none; } } .best-sellers__mobile-cta[data-v-f72b3f52] { display: none; margin-top: 32px; } @media (max-width: 720px) { .best-sellers__mobile-cta[data-v-f72b3f52] { display: flex; } } .best-sellers__loading[data-v-f72b3f52] { padding: 40px 0; } .best-sellers__podium-skeleton[data-v-f72b3f52] { display: flex; justify-content: center; align-items: flex-end; gap: 24px; height: 400px; } .best-sellers__skeleton[data-v-f72b3f52] { background: linear-gradient(90deg, rgba(var(--secondary-700-rgb), 0.5) 25%, rgba(var(--secondary-600-rgb), 0.5) 50%, rgba(var(--secondary-700-rgb), 0.5) 75%); background-size: 200% 100%; animation: shimmer-f72b3f52 1.5s infinite; border-radius: 16px; width: 280px; } .best-sellers__skeleton--1[data-v-f72b3f52] { height: 380px; } .best-sellers__skeleton--2[data-v-f72b3f52] { height: 320px; } .best-sellers__skeleton--3[data-v-f72b3f52] { height: 280px; } @keyframes shimmer-f72b3f52 { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .best-sellers__mobile-list[data-v-f72b3f52] { display: none; } @media (max-width: 720px) { .best-sellers__mobile-list[data-v-f72b3f52] { display: flex; flex-direction: column; gap: 12px; } } .best-sellers__podium-section[data-v-f72b3f52] { margin-bottom: 32px; } @media (max-width: 720px) { .best-sellers__podium-section[data-v-f72b3f52] { display: none; } } .best-sellers__podium[data-v-f72b3f52] { display: flex; justify-content: center; align-items: flex-end; gap: 24px; padding-top: 24px; } @media (max-width: 1160px) { .best-sellers__podium[data-v-f72b3f52] { gap: 16px; } } .best-sellers__honorable[data-v-f72b3f52] { border-top: 1px solid var(--border-default); padding-top: 24px; } @media (max-width: 720px) { .best-sellers__honorable[data-v-f72b3f52] { display: none; } } .best-sellers__honorable-header[data-v-f72b3f52] { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 14px; font-weight: 600; color: #94a2b8; text-transform: uppercase; letter-spacing: 0.5px; } .best-sellers__honorable-header svg[data-v-f72b3f52] { color: var(--primary-400); } .best-sellers__honorable-list[data-v-f72b3f52] { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--secondary-600) transparent; } .best-sellers__honorable-list[data-v-f72b3f52]::-webkit-scrollbar { height: 6px; } .best-sellers__honorable-list[data-v-f72b3f52]::-webkit-scrollbar-track { background: transparent; } .best-sellers__honorable-list[data-v-f72b3f52]::-webkit-scrollbar-thumb { background: var(--secondary-600); border-radius: 3px; } @media (max-width: 720px) { .best-sellers__honorable-list[data-v-f72b3f52] { gap: 12px; } } .podium-card[data-v-f72b3f52] { position: relative; display: flex; flex-direction: column; background: rgba(var(--secondary-900-rgb), 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(var(--secondary-600-rgb), 0.5); border-radius: 20px; overflow: visible; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 280px; flex-shrink: 0; } .podium-card[data-v-f72b3f52]:hover { border-color: rgba(var(--primary-500-rgb), 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); background: rgba(var(--secondary-900-rgb), 0.95); } @media (max-width: 1160px) { .podium-card[data-v-f72b3f52] { width: 240px; } } .podium-card--first[data-v-f72b3f52] { border-color: rgba(255, 215, 0, 0.3); box-shadow: 0 8px 32px rgba(255, 215, 0, 0.15); } .podium-card--first[data-v-f72b3f52]:hover { border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 16px 48px rgba(255, 215, 0, 0.25); } .podium-card__crown[data-v-f72b3f52] { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4); z-index: 10; } .podium-card__crown svg[data-v-f72b3f52] { color: #ffffff; } .podium-card__rank[data-v-f72b3f52] { position: absolute; top: 16px; left: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--secondary-700); border-radius: 50%; z-index: 5; } .podium-card__rank--first[data-v-f72b3f52] { background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%); box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4); } .podium-card__rank-number[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 14px; font-weight: 700; color: #ffffff; } .podium-card--second .podium-card__rank[data-v-f72b3f52] { background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%); } .podium-card--third .podium-card__rank[data-v-f72b3f52] { background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%); } .podium-card__image[data-v-f72b3f52] { padding: 24px 24px 16px; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); border-radius: 20px 20px 0 0; } .podium-card__image img[data-v-f72b3f52] { width: 140px; height: 140px; object-fit: contain; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 720px) { .podium-card__image[data-v-f72b3f52] { padding: 20px 20px 12px; } .podium-card__image img[data-v-f72b3f52] { width: 120px; height: 120px; } } .podium-card--first .podium-card__image img[data-v-f72b3f52] { width: 160px; height: 160px; } @media (max-width: 720px) { .podium-card--first .podium-card__image img[data-v-f72b3f52] { width: 140px; height: 140px; } } .podium-card__content[data-v-f72b3f52] { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; text-align: center; } @media (max-width: 720px) { .podium-card__content[data-v-f72b3f52] { padding: 12px 16px; } } .podium-card__category[data-v-f72b3f52] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 10px; font-weight: 600; color: #94a2b8; text-transform: uppercase; letter-spacing: 0.5px; } .podium-card__name[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 16px; font-weight: 600; color: #f8f9fb; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .podium-card--first .podium-card__name[data-v-f72b3f52] { font-size: 18px; } .podium-card__price[data-v-f72b3f52] { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 4px; } .podium-card__price-old[data-v-f72b3f52] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; color: #94a2b8; text-decoration: line-through; } .podium-card__price-current[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 22px; font-weight: 700; color: #f8f9fb; } .podium-card__price-current--sale[data-v-f72b3f52] { color: #ff4d4d; } .podium-card--first .podium-card__price-current[data-v-f72b3f52] { font-size: 26px; } .podium-card__btn[data-v-f72b3f52] { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; margin: 0 16px 16px; background: var(--primary-500); border: none; border-radius: 12px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 14px; font-weight: 600; color: #ffffff; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .podium-card__btn[data-v-f72b3f52]:hover { background: var(--primary-400); } @media (max-width: 720px) { .podium-card__btn[data-v-f72b3f52] { padding: 12px 16px; margin: 0 12px 12px; font-size: 13px; } } .podium-card--first .podium-card__btn[data-v-f72b3f52] { background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%); } .podium-card--first .podium-card__btn[data-v-f72b3f52]:hover { background: linear-gradient(135deg, #ffdb1a 0%, #ffd700 100%); } .podium-card--second .podium-card__btn[data-v-f72b3f52] { background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%); } .podium-card--second .podium-card__btn[data-v-f72b3f52]:hover { background: linear-gradient(135deg, #cdcdcd 0%, #c0c0c0 100%); } .podium-card--third .podium-card__btn[data-v-f72b3f52] { background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%); } .podium-card--third .podium-card__btn[data-v-f72b3f52]:hover { background: linear-gradient(135deg, #d28c47 0%, #cd7f32 100%); } .podium-card__pedestal[data-v-f72b3f52] { display: flex; align-items: center; justify-content: center; background: var(--secondary-800); border-top: 1px solid var(--border-default); border-radius: 0 0 20px 20px; padding: 12px; margin-top: auto; } .podium-card__pedestal--first[data-v-f72b3f52] { background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%); border-top-color: rgba(255, 215, 0, 0.2); height: 60px; } .podium-card__pedestal--second[data-v-f72b3f52] { background: linear-gradient(180deg, rgba(192, 192, 192, 0.1) 0%, rgba(192, 192, 192, 0.05) 100%); border-top-color: rgba(192, 192, 192, 0.2); height: 48px; } .podium-card__pedestal--third[data-v-f72b3f52] { background: linear-gradient(180deg, rgba(205, 127, 50, 0.1) 0%, rgba(205, 127, 50, 0.05) 100%); border-top-color: rgba(205, 127, 50, 0.2); height: 40px; } .podium-card__pedestal-number[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 24px; font-weight: 700; opacity: 0.3; } .podium-card--first .podium-card__pedestal-number[data-v-f72b3f52] { color: #ffd700; opacity: 0.5; font-size: 28px; } .podium-card--second .podium-card__pedestal-number[data-v-f72b3f52] { color: #c0c0c0; opacity: 0.5; } .podium-card--third .podium-card__pedestal-number[data-v-f72b3f52] { color: #cd7f32; opacity: 0.5; } .honorable-card[data-v-f72b3f52] { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(var(--secondary-900-rgb), 0.8); backdrop-filter: blur(8px); border: 1px solid rgba(var(--secondary-600-rgb), 0.4); border-radius: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); min-width: 220px; flex-shrink: 0; } .honorable-card[data-v-f72b3f52]:hover { border-color: rgba(var(--primary-500-rgb), 0.3); background: rgba(var(--secondary-900-rgb), 0.95); } @media (max-width: 720px) { .honorable-card[data-v-f72b3f52] { min-width: 200px; padding: 10px 12px; gap: 10px; } } .honorable-card__rank[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 12px; font-weight: 700; color: #94a2b8; min-width: 24px; } .honorable-card__image[data-v-f72b3f52] { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); border-radius: 8px; padding: 4px; } .honorable-card__image img[data-v-f72b3f52] { max-width: 100%; max-height: 100%; object-fit: contain; } @media (max-width: 720px) { .honorable-card__image[data-v-f72b3f52] { width: 40px; height: 40px; } } .honorable-card__content[data-v-f72b3f52] { flex: 1; min-width: 0; } .honorable-card__name[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 14px; font-weight: 600; color: #f8f9fb; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .honorable-card__name[data-v-f72b3f52] { font-size: 13px; } } .honorable-card__price[data-v-f72b3f52] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; font-weight: 600; color: var(--primary-400); } @media (max-width: 720px) { .honorable-card__price[data-v-f72b3f52] { font-size: 12px; } } .honorable-card__btn[data-v-f72b3f52] { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--secondary-700); border: none; border-radius: 8px; color: #f8f9fb; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .honorable-card__btn[data-v-f72b3f52]:hover { background: var(--primary-500); color: #ffffff; } @media (max-width: 720px) { .honorable-card__btn[data-v-f72b3f52] { width: 32px; height: 32px; } } .mobile-item[data-v-f72b3f52] { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(var(--secondary-900-rgb), 0.8); border: 1px solid rgba(var(--secondary-600-rgb), 0.4); border-radius: 12px; cursor: pointer; } .mobile-item__rank[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 14px; font-weight: 700; color: #ffd700; min-width: 28px; } .mobile-item__image[data-v-f72b3f52] { width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); border-radius: 8px; } .mobile-item__image img[data-v-f72b3f52] { max-width: 90%; max-height: 90%; object-fit: contain; } .mobile-item__content[data-v-f72b3f52] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mobile-item__name[data-v-f72b3f52] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 14px; font-weight: 600; color: #f8f9fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-item__price[data-v-f72b3f52] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 14px; font-weight: 700; color: var(--primary-400); } .mobile-item__btn[data-v-f72b3f52] { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--primary-500); border: none; border-radius: 10px; color: #ffffff; cursor: pointer; flex-shrink: 0; } .mobile-item__btn[data-v-f72b3f52]:active { background: var(--primary-600); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-8b83a6b5]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-8b83a6b5] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-8b83a6b5] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-8b83a6b5]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-8b83a6b5], .theme-mode-light[data-v-8b83a6b5] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-8b83a6b5], .theme-mode-dark[data-v-8b83a6b5] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-8b83a6b5]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-8b83a6b5]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-8b83a6b5] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-8b83a6b5] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-8b83a6b5]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-8b83a6b5], input[disabled][data-v-8b83a6b5] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-8b83a6b5] { opacity: 0.9; } input[readonly][data-v-8b83a6b5] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-8b83a6b5] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-8b83a6b5]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-8b83a6b5]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-8b83a6b5]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-8b83a6b5] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-8b83a6b5]:nth-child(odd), .list-card-desktop__wrapper[data-v-8b83a6b5]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-8b83a6b5]:nth-child(even), .list-card-desktop__wrapper[data-v-8b83a6b5]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-8b83a6b5]:nth-child(odd), .listCardDesktopWrapper[data-v-8b83a6b5]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-8b83a6b5]:nth-child(even), .listCardDesktopWrapper[data-v-8b83a6b5]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-8b83a6b5] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-8b83a6b5] { cursor: pointer; } .card-layout--selectionnable[data-v-8b83a6b5]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-8b83a6b5] { cursor: auto; } .card-layout--drawer[data-v-8b83a6b5] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-8b83a6b5] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-8b83a6b5] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-8b83a6b5] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-8b83a6b5] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-8b83a6b5] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-8b83a6b5]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-8b83a6b5] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-8b83a6b5] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-8b83a6b5] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-8b83a6b5] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-8b83a6b5] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-8b83a6b5] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-8b83a6b5] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-8b83a6b5] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-8b83a6b5] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-8b83a6b5] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-8b83a6b5] { background-color: #eb1515; } .color-chip--dossiers[data-v-8b83a6b5] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-8b83a6b5] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-8b83a6b5] { background-color: #00a79b; } .color-chip--virements[data-v-8b83a6b5] { background-color: var(--secondary-400); } .color-chip--factures[data-v-8b83a6b5] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-8b83a6b5] { background-color: #eb1515; } .color-recherche-dossiers[data-v-8b83a6b5] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-8b83a6b5] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-8b83a6b5] { background-color: #00a79b; } .color-recherche-virements[data-v-8b83a6b5] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-8b83a6b5] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-8b83a6b5] { color: #00a79b; cursor: pointer; } .scrollable[data-v-8b83a6b5] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-8b83a6b5] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-8b83a6b5] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-8b83a6b5] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-8b83a6b5] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-8b83a6b5] { font-weight: 800; } .grid-cell--column[data-v-8b83a6b5] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-8b83a6b5] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-8b83a6b5] { fill: #00a79b; } .grid-cell--disabled[data-v-8b83a6b5] { color: #cccccc; } .grid-cell--disabled svg[data-v-8b83a6b5] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-8b83a6b5] { white-space: nowrap; } .grid-cell--danger svg[data-v-8b83a6b5] { fill: #eb1515; } .grid-cell--span-1[data-v-8b83a6b5] { grid-column: span 1; } .grid-cell--span-2[data-v-8b83a6b5] { grid-column: span 2; } .grid-cell--span-3[data-v-8b83a6b5] { grid-column: span 3; } .grid-cell--span-4[data-v-8b83a6b5] { grid-column: span 4; } .grid-cell--span-5[data-v-8b83a6b5] { grid-column: span 5; } .grid-cell--span-6[data-v-8b83a6b5] { grid-column: span 6; } .grid-cell--span-7[data-v-8b83a6b5] { grid-column: span 7; } .grid-cell--span-8[data-v-8b83a6b5] { grid-column: span 8; } .grid-cell--span-9[data-v-8b83a6b5] { grid-column: span 9; } .grid-cell--span-10[data-v-8b83a6b5] { grid-column: span 10; } .grid-cell--span-12[data-v-8b83a6b5] { grid-column: span 12; } .grid-cell--span-13[data-v-8b83a6b5] { grid-column: span 13; } .grid-cell--span-14[data-v-8b83a6b5] { grid-column: span 14; } .grid-cell--span-16[data-v-8b83a6b5] { grid-column: span 16; } .grid-cell--span-18[data-v-8b83a6b5] { grid-column: span 18; } .grid-cell--span-20[data-v-8b83a6b5] { grid-column: span 20; } .grid-cell--span-32[data-v-8b83a6b5] { grid-column: span 32; } .grid-cell--span-36[data-v-8b83a6b5] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-8b83a6b5] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-8b83a6b5] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-8b83a6b5] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-8b83a6b5] { justify-content: center !important; } .elem--bold span[data-v-8b83a6b5] { font-weight: 800; } .elem--column[data-v-8b83a6b5] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-8b83a6b5] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-8b83a6b5] { fill: #00a79b; } .elem--clickable[data-v-8b83a6b5]:hover { cursor: pointer; } .elem--disabled[data-v-8b83a6b5] { color: #cccccc; } .elem--disabled svg[data-v-8b83a6b5] { fill: #cccccc; } .elem--nowrap span[data-v-8b83a6b5] { white-space: nowrap; } .elem--danger svg[data-v-8b83a6b5] { fill: #eb1515; } .elem--span-1[data-v-8b83a6b5] { grid-column: span 1; } .elem--span-2[data-v-8b83a6b5] { grid-column: span 2; } .elem--span-3[data-v-8b83a6b5] { grid-column: span 3; } .elem--span-4[data-v-8b83a6b5] { grid-column: span 4; } .elem--span-5[data-v-8b83a6b5] { grid-column: span 5; } .elem--span-6[data-v-8b83a6b5] { grid-column: span 6; } .elem--span-7[data-v-8b83a6b5] { grid-column: span 7; } .elem--span-8[data-v-8b83a6b5] { grid-column: span 8; } .elem--span-9[data-v-8b83a6b5] { grid-column: span 9; } .elem--span-10[data-v-8b83a6b5] { grid-column: span 10; } .elem--span-12[data-v-8b83a6b5] { grid-column: span 12; } .elem--span-13[data-v-8b83a6b5] { grid-column: span 13; } .elem--span-14[data-v-8b83a6b5] { grid-column: span 14; } .elem--span-16[data-v-8b83a6b5] { grid-column: span 16; } .elem--span-18[data-v-8b83a6b5] { grid-column: span 18; } .elem--span-20[data-v-8b83a6b5] { grid-column: span 20; } .elem--span-32[data-v-8b83a6b5] { grid-column: span 32; } .elem--span-36[data-v-8b83a6b5] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-8b83a6b5] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-8b83a6b5] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-8b83a6b5]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-8b83a6b5] { display: flex; } /* flex-direction */ .flex-column[data-v-8b83a6b5] { flex-direction: column; } .flex-row[data-v-8b83a6b5] { flex-direction: row; } /* flex */ .flex-1[data-v-8b83a6b5] { flex: 1 !important; } .flex-2[data-v-8b83a6b5] { flex: 2; } .flex-3[data-v-8b83a6b5] { flex: 3; } .flex-3[data-v-8b83a6b5] { flex: 4; } .flex-5[data-v-8b83a6b5] { flex: 5; } .flex-auto[data-v-8b83a6b5] { flex: auto; } .flex-none[data-v-8b83a6b5] { flex: none; } .flex-content[data-v-8b83a6b5] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-8b83a6b5] { flex-wrap: wrap; } .flex-nowrap[data-v-8b83a6b5] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-8b83a6b5] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-8b83a6b5] { justify-content: flex-start; } .justify-content-end[data-v-8b83a6b5] { justify-content: flex-end; } .justify-content-baseline[data-v-8b83a6b5] { justify-content: baseline; } .justify-content-center[data-v-8b83a6b5] { justify-content: center; } .justify-content-space-between[data-v-8b83a6b5] { justify-content: space-between; } .justify-content-space-around[data-v-8b83a6b5] { justify-content: space-around; } .justify-content-space-evenly[data-v-8b83a6b5] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-8b83a6b5] { align-items: flex-start; } .align-items-flex-end[data-v-8b83a6b5] { align-items: flex-end; } .align-items-stretch[data-v-8b83a6b5] { align-items: stretch; } .align-items-baseline[data-v-8b83a6b5] { align-items: baseline; } .align-items-center[data-v-8b83a6b5] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-8b83a6b5] { align-content: flex-start; } .align-content-flex-end[data-v-8b83a6b5] { align-content: flex-end; } .align-content-center[data-v-8b83a6b5] { align-content: center; } .align-content-stretch[data-v-8b83a6b5] { align-content: stretch; } .align-content-space-between[data-v-8b83a6b5] { align-content: space-between; } .align-content-space-around[data-v-8b83a6b5] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-8b83a6b5] { align-self: flex-start; } .align-self-flex-end[data-v-8b83a6b5] { align-self: flex-end; } .align-self-stretch[data-v-8b83a6b5] { align-self: stretch; } .align-self-flex-baseline[data-v-8b83a6b5] { align-self: baseline; } .align-self-center[data-v-8b83a6b5] { align-self: center; } .align-self-auto[data-v-8b83a6b5] { align-self: auto; } .flex-gap-1[data-v-8b83a6b5] { gap: 4px; } .flex-gap-2[data-v-8b83a6b5] { gap: 8px; } .flex-gap-3[data-v-8b83a6b5] { gap: 12px; } .flex-gap-4[data-v-8b83a6b5] { gap: 16px; } .flex-gap-5[data-v-8b83a6b5] { gap: 20px; } .flex-gap-6[data-v-8b83a6b5] { gap: 24px; } .flex-gap-7[data-v-8b83a6b5] { gap: 28px; } .flex-gap-8[data-v-8b83a6b5] { gap: 32px; } .flex-gap-10[data-v-8b83a6b5] { gap: 40px; } .flex-gap-12[data-v-8b83a6b5] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-8b83a6b5] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-8b83a6b5] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-8b83a6b5] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-8b83a6b5] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-8b83a6b5] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-8b83a6b5] { display: none !important; } } .col-none[data-v-8b83a6b5] { display: none; } .col-auto[data-v-8b83a6b5] { grid-column: auto; } .col-1[data-v-8b83a6b5] { grid-column: span 1; } .col-2[data-v-8b83a6b5] { grid-column: span 2; } .col-3[data-v-8b83a6b5] { grid-column: span 3; } .col-4[data-v-8b83a6b5] { grid-column: span 4; } .col-5[data-v-8b83a6b5] { grid-column: span 5; } .col-6[data-v-8b83a6b5] { grid-column: span 6; } .col-7[data-v-8b83a6b5] { grid-column: span 7; } .col-8[data-v-8b83a6b5] { grid-column: span 8; } .col-9[data-v-8b83a6b5] { grid-column: span 9; } .col-10[data-v-8b83a6b5] { grid-column: span 10; } .col-12[data-v-8b83a6b5] { grid-column: span 12; } .col-13[data-v-8b83a6b5] { grid-column: span 13; } .col-14[data-v-8b83a6b5] { grid-column: span 14; } .col-15[data-v-8b83a6b5] { grid-column: span 15; } .col-16[data-v-8b83a6b5] { grid-column: span 16; } .col-18[data-v-8b83a6b5] { grid-column: span 18; } .col-20[data-v-8b83a6b5] { grid-column: span 20; } .col-22[data-v-8b83a6b5] { grid-column: span 22; } .col-24[data-v-8b83a6b5] { grid-column: span 24; } .col-26[data-v-8b83a6b5] { grid-column: span 26; } .col-27[data-v-8b83a6b5] { grid-column: span 27; } .col-28[data-v-8b83a6b5] { grid-column: span 28; } .col-30[data-v-8b83a6b5] { grid-column: span 30; } .col-36[data-v-8b83a6b5] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-8b83a6b5] { display: none; } .col-md-36[data-v-8b83a6b5] { grid-column: span 36; } .col-md-28[data-v-8b83a6b5] { grid-column: span 28; } .col-md-27[data-v-8b83a6b5] { grid-column: span 27; } .col-md-24[data-v-8b83a6b5] { grid-column: span 24; } .col-md-22[data-v-8b83a6b5] { grid-column: span 22; } .col-md-20[data-v-8b83a6b5] { grid-column: span 20; } .col-md-19[data-v-8b83a6b5] { grid-column: span 19; } .col-md-18[data-v-8b83a6b5] { grid-column: span 18; } .col-md-17[data-v-8b83a6b5] { grid-column: span 17; } .col-md-16[data-v-8b83a6b5] { grid-column: span 16; } .col-md-15[data-v-8b83a6b5] { grid-column: span 15; } .col-md-14[data-v-8b83a6b5] { grid-column: span 14; } .col-md-13[data-v-8b83a6b5] { grid-column: span 13; } .col-md-12[data-v-8b83a6b5] { grid-column: span 12; } .col-md-10[data-v-8b83a6b5] { grid-column: span 10; } .col-md-9[data-v-8b83a6b5] { grid-column: span 9; } .col-md-8[data-v-8b83a6b5] { grid-column: span 8; } .col-md-6[data-v-8b83a6b5] { grid-column: span 6; } .col-md-5[data-v-8b83a6b5] { grid-column: span 5; } .col-md-4[data-v-8b83a6b5] { grid-column: span 4; } .col-md-3[data-v-8b83a6b5] { grid-column: span 3; } .col-md-2[data-v-8b83a6b5] { grid-column: span 2; } .col-md-1[data-v-8b83a6b5] { grid-column: span 1; } .col-md-auto[data-v-8b83a6b5] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-8b83a6b5] { display: none; } .col-sm-36[data-v-8b83a6b5] { grid-column: span 36; } .col-sm-32[data-v-8b83a6b5] { grid-column: span 32; } .col-sm-28[data-v-8b83a6b5] { grid-column: span 28; } .col-sm-27[data-v-8b83a6b5] { grid-column: span 27; } .col-sm-24[data-v-8b83a6b5] { grid-column: span 24; } .col-sm-22[data-v-8b83a6b5] { grid-column: span 22; } .col-sm-20[data-v-8b83a6b5] { grid-column: span 20; } .col-sm-18[data-v-8b83a6b5] { grid-column: span 18; } .col-sm-16[data-v-8b83a6b5] { grid-column: span 16; } .col-sm-15[data-v-8b83a6b5] { grid-column: span 15; } .col-sm-14[data-v-8b83a6b5] { grid-column: span 14; } .col-sm-13[data-v-8b83a6b5] { grid-column: span 12; } .col-sm-12[data-v-8b83a6b5] { grid-column: span 12; } .col-sm-10[data-v-8b83a6b5] { grid-column: span 10; } .col-sm-9[data-v-8b83a6b5] { grid-column: span 8; } .col-sm-8[data-v-8b83a6b5] { grid-column: span 8; } .col-sm-6[data-v-8b83a6b5] { grid-column: span 6; } .col-sm-4[data-v-8b83a6b5] { grid-column: span 4; } .col-sm-auto[data-v-8b83a6b5] { grid-column: auto; } } .fade-enter-active[data-v-8b83a6b5] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-8b83a6b5] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-8b83a6b5], .fade-leave-to[data-v-8b83a6b5] { opacity: 0; } .btn[data-v-8b83a6b5] { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 14px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; } .btn svg[data-v-8b83a6b5] { width: 18px; height: 18px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn--primary[data-v-8b83a6b5] { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); color: white; box-shadow: 0 4px 20px rgba(var(--primary-600-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn--primary[data-v-8b83a6b5]:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--primary-600-rgb), 0.45); } .btn--primary:hover svg[data-v-8b83a6b5] { transform: translateX(4px); } .btn--ghost[data-v-8b83a6b5] { background: rgba(var(--secondary-700-rgb), 0.5); color: #edf1f5; border: 1px solid rgba(var(--neutral-300-rgb), 0.12); backdrop-filter: blur(10px); } .btn--ghost[data-v-8b83a6b5]:hover { background: rgba(var(--secondary-600-rgb), 0.6); border-color: rgba(var(--neutral-300-rgb), 0.2); transform: translateY(-2px); } .btn--white[data-v-8b83a6b5] { background: #f8f9fb; color: var(--secondary-900); box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15); } .btn--white[data-v-8b83a6b5]:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25); } .btn--white:hover svg[data-v-8b83a6b5] { transform: translateX(4px); } .btn--outline[data-v-8b83a6b5] { background: rgba(var(--neutral-100-rgb), 0.1); color: #edf1f5; border: 1px solid rgba(var(--neutral-100-rgb), 0.2); } .btn--outline[data-v-8b83a6b5]:hover { background: rgba(var(--neutral-100-rgb), 0.15); transform: translateY(-2px); } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-53e0036e]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-53e0036e] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-53e0036e] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-53e0036e]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-53e0036e], .theme-mode-light[data-v-53e0036e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-53e0036e], .theme-mode-dark[data-v-53e0036e] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-53e0036e]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-53e0036e]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-53e0036e] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-53e0036e] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-53e0036e]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-53e0036e], input[disabled][data-v-53e0036e] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-53e0036e] { opacity: 0.9; } input[readonly][data-v-53e0036e] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-53e0036e] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-53e0036e]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-53e0036e]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-53e0036e]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-53e0036e] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-53e0036e]:nth-child(odd), .list-card-desktop__wrapper[data-v-53e0036e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-53e0036e]:nth-child(even), .list-card-desktop__wrapper[data-v-53e0036e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-53e0036e]:nth-child(odd), .listCardDesktopWrapper[data-v-53e0036e]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-53e0036e]:nth-child(even), .listCardDesktopWrapper[data-v-53e0036e]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-53e0036e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-53e0036e] { cursor: pointer; } .card-layout--selectionnable[data-v-53e0036e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-53e0036e] { cursor: auto; } .card-layout--drawer[data-v-53e0036e] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-53e0036e] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-53e0036e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-53e0036e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-53e0036e] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-53e0036e] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-53e0036e]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-53e0036e] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-53e0036e] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-53e0036e] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-53e0036e] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-53e0036e] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-53e0036e] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-53e0036e] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-53e0036e] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-53e0036e] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-53e0036e] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-53e0036e] { background-color: #eb1515; } .color-chip--dossiers[data-v-53e0036e] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-53e0036e] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-53e0036e] { background-color: #00a79b; } .color-chip--virements[data-v-53e0036e] { background-color: var(--secondary-400); } .color-chip--factures[data-v-53e0036e] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-53e0036e] { background-color: #eb1515; } .color-recherche-dossiers[data-v-53e0036e] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-53e0036e] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-53e0036e] { background-color: #00a79b; } .color-recherche-virements[data-v-53e0036e] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-53e0036e] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-53e0036e] { color: #00a79b; cursor: pointer; } .scrollable[data-v-53e0036e] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-53e0036e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-53e0036e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-53e0036e] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-53e0036e] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-53e0036e] { font-weight: 800; } .grid-cell--column[data-v-53e0036e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-53e0036e] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-53e0036e] { fill: #00a79b; } .grid-cell--disabled[data-v-53e0036e] { color: #cccccc; } .grid-cell--disabled svg[data-v-53e0036e] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-53e0036e] { white-space: nowrap; } .grid-cell--danger svg[data-v-53e0036e] { fill: #eb1515; } .grid-cell--span-1[data-v-53e0036e] { grid-column: span 1; } .grid-cell--span-2[data-v-53e0036e] { grid-column: span 2; } .grid-cell--span-3[data-v-53e0036e] { grid-column: span 3; } .grid-cell--span-4[data-v-53e0036e] { grid-column: span 4; } .grid-cell--span-5[data-v-53e0036e] { grid-column: span 5; } .grid-cell--span-6[data-v-53e0036e] { grid-column: span 6; } .grid-cell--span-7[data-v-53e0036e] { grid-column: span 7; } .grid-cell--span-8[data-v-53e0036e] { grid-column: span 8; } .grid-cell--span-9[data-v-53e0036e] { grid-column: span 9; } .grid-cell--span-10[data-v-53e0036e] { grid-column: span 10; } .grid-cell--span-12[data-v-53e0036e] { grid-column: span 12; } .grid-cell--span-13[data-v-53e0036e] { grid-column: span 13; } .grid-cell--span-14[data-v-53e0036e] { grid-column: span 14; } .grid-cell--span-16[data-v-53e0036e] { grid-column: span 16; } .grid-cell--span-18[data-v-53e0036e] { grid-column: span 18; } .grid-cell--span-20[data-v-53e0036e] { grid-column: span 20; } .grid-cell--span-32[data-v-53e0036e] { grid-column: span 32; } .grid-cell--span-36[data-v-53e0036e] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-53e0036e] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-53e0036e] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-53e0036e] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-53e0036e] { justify-content: center !important; } .elem--bold span[data-v-53e0036e] { font-weight: 800; } .elem--column[data-v-53e0036e] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-53e0036e] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-53e0036e] { fill: #00a79b; } .elem--clickable[data-v-53e0036e]:hover { cursor: pointer; } .elem--disabled[data-v-53e0036e] { color: #cccccc; } .elem--disabled svg[data-v-53e0036e] { fill: #cccccc; } .elem--nowrap span[data-v-53e0036e] { white-space: nowrap; } .elem--danger svg[data-v-53e0036e] { fill: #eb1515; } .elem--span-1[data-v-53e0036e] { grid-column: span 1; } .elem--span-2[data-v-53e0036e] { grid-column: span 2; } .elem--span-3[data-v-53e0036e] { grid-column: span 3; } .elem--span-4[data-v-53e0036e] { grid-column: span 4; } .elem--span-5[data-v-53e0036e] { grid-column: span 5; } .elem--span-6[data-v-53e0036e] { grid-column: span 6; } .elem--span-7[data-v-53e0036e] { grid-column: span 7; } .elem--span-8[data-v-53e0036e] { grid-column: span 8; } .elem--span-9[data-v-53e0036e] { grid-column: span 9; } .elem--span-10[data-v-53e0036e] { grid-column: span 10; } .elem--span-12[data-v-53e0036e] { grid-column: span 12; } .elem--span-13[data-v-53e0036e] { grid-column: span 13; } .elem--span-14[data-v-53e0036e] { grid-column: span 14; } .elem--span-16[data-v-53e0036e] { grid-column: span 16; } .elem--span-18[data-v-53e0036e] { grid-column: span 18; } .elem--span-20[data-v-53e0036e] { grid-column: span 20; } .elem--span-32[data-v-53e0036e] { grid-column: span 32; } .elem--span-36[data-v-53e0036e] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-53e0036e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-53e0036e] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-53e0036e]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-53e0036e] { display: flex; } /* flex-direction */ .flex-column[data-v-53e0036e] { flex-direction: column; } .flex-row[data-v-53e0036e] { flex-direction: row; } /* flex */ .flex-1[data-v-53e0036e] { flex: 1 !important; } .flex-2[data-v-53e0036e] { flex: 2; } .flex-3[data-v-53e0036e] { flex: 3; } .flex-3[data-v-53e0036e] { flex: 4; } .flex-5[data-v-53e0036e] { flex: 5; } .flex-auto[data-v-53e0036e] { flex: auto; } .flex-none[data-v-53e0036e] { flex: none; } .flex-content[data-v-53e0036e] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-53e0036e] { flex-wrap: wrap; } .flex-nowrap[data-v-53e0036e] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-53e0036e] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-53e0036e] { justify-content: flex-start; } .justify-content-end[data-v-53e0036e] { justify-content: flex-end; } .justify-content-baseline[data-v-53e0036e] { justify-content: baseline; } .justify-content-center[data-v-53e0036e] { justify-content: center; } .justify-content-space-between[data-v-53e0036e] { justify-content: space-between; } .justify-content-space-around[data-v-53e0036e] { justify-content: space-around; } .justify-content-space-evenly[data-v-53e0036e] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-53e0036e] { align-items: flex-start; } .align-items-flex-end[data-v-53e0036e] { align-items: flex-end; } .align-items-stretch[data-v-53e0036e] { align-items: stretch; } .align-items-baseline[data-v-53e0036e] { align-items: baseline; } .align-items-center[data-v-53e0036e] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-53e0036e] { align-content: flex-start; } .align-content-flex-end[data-v-53e0036e] { align-content: flex-end; } .align-content-center[data-v-53e0036e] { align-content: center; } .align-content-stretch[data-v-53e0036e] { align-content: stretch; } .align-content-space-between[data-v-53e0036e] { align-content: space-between; } .align-content-space-around[data-v-53e0036e] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-53e0036e] { align-self: flex-start; } .align-self-flex-end[data-v-53e0036e] { align-self: flex-end; } .align-self-stretch[data-v-53e0036e] { align-self: stretch; } .align-self-flex-baseline[data-v-53e0036e] { align-self: baseline; } .align-self-center[data-v-53e0036e] { align-self: center; } .align-self-auto[data-v-53e0036e] { align-self: auto; } .flex-gap-1[data-v-53e0036e] { gap: 4px; } .flex-gap-2[data-v-53e0036e] { gap: 8px; } .flex-gap-3[data-v-53e0036e] { gap: 12px; } .flex-gap-4[data-v-53e0036e] { gap: 16px; } .flex-gap-5[data-v-53e0036e] { gap: 20px; } .flex-gap-6[data-v-53e0036e] { gap: 24px; } .flex-gap-7[data-v-53e0036e] { gap: 28px; } .flex-gap-8[data-v-53e0036e] { gap: 32px; } .flex-gap-10[data-v-53e0036e] { gap: 40px; } .flex-gap-12[data-v-53e0036e] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-53e0036e] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-53e0036e] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-53e0036e] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-53e0036e] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-53e0036e] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-53e0036e] { display: none !important; } } .col-none[data-v-53e0036e] { display: none; } .col-auto[data-v-53e0036e] { grid-column: auto; } .col-1[data-v-53e0036e] { grid-column: span 1; } .col-2[data-v-53e0036e] { grid-column: span 2; } .col-3[data-v-53e0036e] { grid-column: span 3; } .col-4[data-v-53e0036e] { grid-column: span 4; } .col-5[data-v-53e0036e] { grid-column: span 5; } .col-6[data-v-53e0036e] { grid-column: span 6; } .col-7[data-v-53e0036e] { grid-column: span 7; } .col-8[data-v-53e0036e] { grid-column: span 8; } .col-9[data-v-53e0036e] { grid-column: span 9; } .col-10[data-v-53e0036e] { grid-column: span 10; } .col-12[data-v-53e0036e] { grid-column: span 12; } .col-13[data-v-53e0036e] { grid-column: span 13; } .col-14[data-v-53e0036e] { grid-column: span 14; } .col-15[data-v-53e0036e] { grid-column: span 15; } .col-16[data-v-53e0036e] { grid-column: span 16; } .col-18[data-v-53e0036e] { grid-column: span 18; } .col-20[data-v-53e0036e] { grid-column: span 20; } .col-22[data-v-53e0036e] { grid-column: span 22; } .col-24[data-v-53e0036e] { grid-column: span 24; } .col-26[data-v-53e0036e] { grid-column: span 26; } .col-27[data-v-53e0036e] { grid-column: span 27; } .col-28[data-v-53e0036e] { grid-column: span 28; } .col-30[data-v-53e0036e] { grid-column: span 30; } .col-36[data-v-53e0036e] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-53e0036e] { display: none; } .col-md-36[data-v-53e0036e] { grid-column: span 36; } .col-md-28[data-v-53e0036e] { grid-column: span 28; } .col-md-27[data-v-53e0036e] { grid-column: span 27; } .col-md-24[data-v-53e0036e] { grid-column: span 24; } .col-md-22[data-v-53e0036e] { grid-column: span 22; } .col-md-20[data-v-53e0036e] { grid-column: span 20; } .col-md-19[data-v-53e0036e] { grid-column: span 19; } .col-md-18[data-v-53e0036e] { grid-column: span 18; } .col-md-17[data-v-53e0036e] { grid-column: span 17; } .col-md-16[data-v-53e0036e] { grid-column: span 16; } .col-md-15[data-v-53e0036e] { grid-column: span 15; } .col-md-14[data-v-53e0036e] { grid-column: span 14; } .col-md-13[data-v-53e0036e] { grid-column: span 13; } .col-md-12[data-v-53e0036e] { grid-column: span 12; } .col-md-10[data-v-53e0036e] { grid-column: span 10; } .col-md-9[data-v-53e0036e] { grid-column: span 9; } .col-md-8[data-v-53e0036e] { grid-column: span 8; } .col-md-6[data-v-53e0036e] { grid-column: span 6; } .col-md-5[data-v-53e0036e] { grid-column: span 5; } .col-md-4[data-v-53e0036e] { grid-column: span 4; } .col-md-3[data-v-53e0036e] { grid-column: span 3; } .col-md-2[data-v-53e0036e] { grid-column: span 2; } .col-md-1[data-v-53e0036e] { grid-column: span 1; } .col-md-auto[data-v-53e0036e] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-53e0036e] { display: none; } .col-sm-36[data-v-53e0036e] { grid-column: span 36; } .col-sm-32[data-v-53e0036e] { grid-column: span 32; } .col-sm-28[data-v-53e0036e] { grid-column: span 28; } .col-sm-27[data-v-53e0036e] { grid-column: span 27; } .col-sm-24[data-v-53e0036e] { grid-column: span 24; } .col-sm-22[data-v-53e0036e] { grid-column: span 22; } .col-sm-20[data-v-53e0036e] { grid-column: span 20; } .col-sm-18[data-v-53e0036e] { grid-column: span 18; } .col-sm-16[data-v-53e0036e] { grid-column: span 16; } .col-sm-15[data-v-53e0036e] { grid-column: span 15; } .col-sm-14[data-v-53e0036e] { grid-column: span 14; } .col-sm-13[data-v-53e0036e] { grid-column: span 12; } .col-sm-12[data-v-53e0036e] { grid-column: span 12; } .col-sm-10[data-v-53e0036e] { grid-column: span 10; } .col-sm-9[data-v-53e0036e] { grid-column: span 8; } .col-sm-8[data-v-53e0036e] { grid-column: span 8; } .col-sm-6[data-v-53e0036e] { grid-column: span 6; } .col-sm-4[data-v-53e0036e] { grid-column: span 4; } .col-sm-auto[data-v-53e0036e] { grid-column: auto; } } .fade-enter-active[data-v-53e0036e] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-53e0036e] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-53e0036e], .fade-leave-to[data-v-53e0036e] { opacity: 0; } .cta[data-v-53e0036e] { display: grid; grid-template-columns: 60% 40%; gap: 32px; align-items: center; width: 100%; max-width: 100%; overflow: hidden; } .cta__content[data-v-53e0036e] { display: flex; flex-direction: column; gap: 20px; } .cta__content h2[data-v-53e0036e] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: clamp(32px, 4vw, 48px); font-weight: 600; color: #f8f9fb; margin: 0; line-height: 1.15; letter-spacing: -0.02em; } .cta__content h2 span[data-v-53e0036e] { background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-300) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cta__content p[data-v-53e0036e] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 17px; line-height: 1.7; color: #cdd5e0; margin: 0; max-width: 520px; } .cta__actions[data-v-53e0036e] { display: flex; gap: 16px; margin-top: 8px; } .cta__disclaimer[data-v-53e0036e] { display: flex; flex-direction: column; gap: 16px; max-width: 280px; padding: 20px; background: rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.2); border-radius: 16px; align-self: center; } .cta__disclaimer-badge[data-v-53e0036e] { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(249, 115, 22, 0.15); border-radius: 8px; width: fit-content; } .cta__disclaimer-badge svg[data-v-53e0036e] { color: #fb923c; } .cta__disclaimer-badge span[data-v-53e0036e] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 11px; font-weight: 600; color: #fb923c; text-transform: uppercase; letter-spacing: 0.5px; } .cta__disclaimer-content[data-v-53e0036e] { display: flex; flex-direction: column; gap: 8px; } .cta__disclaimer-title[data-v-53e0036e] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 14px; font-weight: 600; color: #f8f9fb; margin: 0; } .cta__disclaimer-text[data-v-53e0036e] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; line-height: 1.6; color: #94a2b8; margin: 0; } @media (max-width: 1160px) { .cta[data-v-53e0036e] { grid-template-columns: 1fr; text-align: center; gap: 32px; } .cta__content[data-v-53e0036e] { align-items: center; } .cta__actions[data-v-53e0036e] { justify-content: center; } .cta__disclaimer[data-v-53e0036e] { max-width: 480px; margin: 0 auto; text-align: left; } } @media (max-width: 720px) { .cta[data-v-53e0036e] { gap: 20px; } .cta__content[data-v-53e0036e] { gap: 12px; } .cta__content p[data-v-53e0036e] { display: none; } .cta__actions button[data-v-53e0036e]:nth-child(2) { display: none; } .cta__disclaimer[data-v-53e0036e] { display: none; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-81a6adf0]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-81a6adf0] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-81a6adf0] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-81a6adf0]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-81a6adf0], .theme-mode-light[data-v-81a6adf0] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-81a6adf0], .theme-mode-dark[data-v-81a6adf0] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-81a6adf0]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-81a6adf0]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-81a6adf0] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-81a6adf0] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-81a6adf0]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-81a6adf0], input[disabled][data-v-81a6adf0] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-81a6adf0] { opacity: 0.9; } input[readonly][data-v-81a6adf0] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-81a6adf0] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-81a6adf0]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-81a6adf0]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-81a6adf0]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-81a6adf0] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-81a6adf0]:nth-child(odd), .list-card-desktop__wrapper[data-v-81a6adf0]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-81a6adf0]:nth-child(even), .list-card-desktop__wrapper[data-v-81a6adf0]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-81a6adf0]:nth-child(odd), .listCardDesktopWrapper[data-v-81a6adf0]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-81a6adf0]:nth-child(even), .listCardDesktopWrapper[data-v-81a6adf0]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-81a6adf0] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-81a6adf0] { cursor: pointer; } .card-layout--selectionnable[data-v-81a6adf0]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-81a6adf0] { cursor: auto; } .card-layout--drawer[data-v-81a6adf0] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-81a6adf0] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-81a6adf0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-81a6adf0] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-81a6adf0] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-81a6adf0] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-81a6adf0]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-81a6adf0] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-81a6adf0] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-81a6adf0] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-81a6adf0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-81a6adf0] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-81a6adf0] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-81a6adf0] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-81a6adf0] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-81a6adf0] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-81a6adf0] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-81a6adf0] { background-color: #eb1515; } .color-chip--dossiers[data-v-81a6adf0] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-81a6adf0] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-81a6adf0] { background-color: #00a79b; } .color-chip--virements[data-v-81a6adf0] { background-color: var(--secondary-400); } .color-chip--factures[data-v-81a6adf0] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-81a6adf0] { background-color: #eb1515; } .color-recherche-dossiers[data-v-81a6adf0] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-81a6adf0] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-81a6adf0] { background-color: #00a79b; } .color-recherche-virements[data-v-81a6adf0] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-81a6adf0] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-81a6adf0] { color: #00a79b; cursor: pointer; } .scrollable[data-v-81a6adf0] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-81a6adf0] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-81a6adf0] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-81a6adf0] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-81a6adf0] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-81a6adf0] { font-weight: 800; } .grid-cell--column[data-v-81a6adf0] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-81a6adf0] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-81a6adf0] { fill: #00a79b; } .grid-cell--disabled[data-v-81a6adf0] { color: #cccccc; } .grid-cell--disabled svg[data-v-81a6adf0] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-81a6adf0] { white-space: nowrap; } .grid-cell--danger svg[data-v-81a6adf0] { fill: #eb1515; } .grid-cell--span-1[data-v-81a6adf0] { grid-column: span 1; } .grid-cell--span-2[data-v-81a6adf0] { grid-column: span 2; } .grid-cell--span-3[data-v-81a6adf0] { grid-column: span 3; } .grid-cell--span-4[data-v-81a6adf0] { grid-column: span 4; } .grid-cell--span-5[data-v-81a6adf0] { grid-column: span 5; } .grid-cell--span-6[data-v-81a6adf0] { grid-column: span 6; } .grid-cell--span-7[data-v-81a6adf0] { grid-column: span 7; } .grid-cell--span-8[data-v-81a6adf0] { grid-column: span 8; } .grid-cell--span-9[data-v-81a6adf0] { grid-column: span 9; } .grid-cell--span-10[data-v-81a6adf0] { grid-column: span 10; } .grid-cell--span-12[data-v-81a6adf0] { grid-column: span 12; } .grid-cell--span-13[data-v-81a6adf0] { grid-column: span 13; } .grid-cell--span-14[data-v-81a6adf0] { grid-column: span 14; } .grid-cell--span-16[data-v-81a6adf0] { grid-column: span 16; } .grid-cell--span-18[data-v-81a6adf0] { grid-column: span 18; } .grid-cell--span-20[data-v-81a6adf0] { grid-column: span 20; } .grid-cell--span-32[data-v-81a6adf0] { grid-column: span 32; } .grid-cell--span-36[data-v-81a6adf0] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-81a6adf0] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-81a6adf0] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-81a6adf0] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-81a6adf0] { justify-content: center !important; } .elem--bold span[data-v-81a6adf0] { font-weight: 800; } .elem--column[data-v-81a6adf0] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-81a6adf0] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-81a6adf0] { fill: #00a79b; } .elem--clickable[data-v-81a6adf0]:hover { cursor: pointer; } .elem--disabled[data-v-81a6adf0] { color: #cccccc; } .elem--disabled svg[data-v-81a6adf0] { fill: #cccccc; } .elem--nowrap span[data-v-81a6adf0] { white-space: nowrap; } .elem--danger svg[data-v-81a6adf0] { fill: #eb1515; } .elem--span-1[data-v-81a6adf0] { grid-column: span 1; } .elem--span-2[data-v-81a6adf0] { grid-column: span 2; } .elem--span-3[data-v-81a6adf0] { grid-column: span 3; } .elem--span-4[data-v-81a6adf0] { grid-column: span 4; } .elem--span-5[data-v-81a6adf0] { grid-column: span 5; } .elem--span-6[data-v-81a6adf0] { grid-column: span 6; } .elem--span-7[data-v-81a6adf0] { grid-column: span 7; } .elem--span-8[data-v-81a6adf0] { grid-column: span 8; } .elem--span-9[data-v-81a6adf0] { grid-column: span 9; } .elem--span-10[data-v-81a6adf0] { grid-column: span 10; } .elem--span-12[data-v-81a6adf0] { grid-column: span 12; } .elem--span-13[data-v-81a6adf0] { grid-column: span 13; } .elem--span-14[data-v-81a6adf0] { grid-column: span 14; } .elem--span-16[data-v-81a6adf0] { grid-column: span 16; } .elem--span-18[data-v-81a6adf0] { grid-column: span 18; } .elem--span-20[data-v-81a6adf0] { grid-column: span 20; } .elem--span-32[data-v-81a6adf0] { grid-column: span 32; } .elem--span-36[data-v-81a6adf0] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-81a6adf0] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-81a6adf0] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-81a6adf0]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-81a6adf0] { display: flex; } /* flex-direction */ .flex-column[data-v-81a6adf0] { flex-direction: column; } .flex-row[data-v-81a6adf0] { flex-direction: row; } /* flex */ .flex-1[data-v-81a6adf0] { flex: 1 !important; } .flex-2[data-v-81a6adf0] { flex: 2; } .flex-3[data-v-81a6adf0] { flex: 3; } .flex-3[data-v-81a6adf0] { flex: 4; } .flex-5[data-v-81a6adf0] { flex: 5; } .flex-auto[data-v-81a6adf0] { flex: auto; } .flex-none[data-v-81a6adf0] { flex: none; } .flex-content[data-v-81a6adf0] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-81a6adf0] { flex-wrap: wrap; } .flex-nowrap[data-v-81a6adf0] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-81a6adf0] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-81a6adf0] { justify-content: flex-start; } .justify-content-end[data-v-81a6adf0] { justify-content: flex-end; } .justify-content-baseline[data-v-81a6adf0] { justify-content: baseline; } .justify-content-center[data-v-81a6adf0] { justify-content: center; } .justify-content-space-between[data-v-81a6adf0] { justify-content: space-between; } .justify-content-space-around[data-v-81a6adf0] { justify-content: space-around; } .justify-content-space-evenly[data-v-81a6adf0] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-81a6adf0] { align-items: flex-start; } .align-items-flex-end[data-v-81a6adf0] { align-items: flex-end; } .align-items-stretch[data-v-81a6adf0] { align-items: stretch; } .align-items-baseline[data-v-81a6adf0] { align-items: baseline; } .align-items-center[data-v-81a6adf0] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-81a6adf0] { align-content: flex-start; } .align-content-flex-end[data-v-81a6adf0] { align-content: flex-end; } .align-content-center[data-v-81a6adf0] { align-content: center; } .align-content-stretch[data-v-81a6adf0] { align-content: stretch; } .align-content-space-between[data-v-81a6adf0] { align-content: space-between; } .align-content-space-around[data-v-81a6adf0] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-81a6adf0] { align-self: flex-start; } .align-self-flex-end[data-v-81a6adf0] { align-self: flex-end; } .align-self-stretch[data-v-81a6adf0] { align-self: stretch; } .align-self-flex-baseline[data-v-81a6adf0] { align-self: baseline; } .align-self-center[data-v-81a6adf0] { align-self: center; } .align-self-auto[data-v-81a6adf0] { align-self: auto; } .flex-gap-1[data-v-81a6adf0] { gap: 4px; } .flex-gap-2[data-v-81a6adf0] { gap: 8px; } .flex-gap-3[data-v-81a6adf0] { gap: 12px; } .flex-gap-4[data-v-81a6adf0] { gap: 16px; } .flex-gap-5[data-v-81a6adf0] { gap: 20px; } .flex-gap-6[data-v-81a6adf0] { gap: 24px; } .flex-gap-7[data-v-81a6adf0] { gap: 28px; } .flex-gap-8[data-v-81a6adf0] { gap: 32px; } .flex-gap-10[data-v-81a6adf0] { gap: 40px; } .flex-gap-12[data-v-81a6adf0] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-81a6adf0] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-81a6adf0] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-81a6adf0] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-81a6adf0] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-81a6adf0] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-81a6adf0] { display: none !important; } } .col-none[data-v-81a6adf0] { display: none; } .col-auto[data-v-81a6adf0] { grid-column: auto; } .col-1[data-v-81a6adf0] { grid-column: span 1; } .col-2[data-v-81a6adf0] { grid-column: span 2; } .col-3[data-v-81a6adf0] { grid-column: span 3; } .col-4[data-v-81a6adf0] { grid-column: span 4; } .col-5[data-v-81a6adf0] { grid-column: span 5; } .col-6[data-v-81a6adf0] { grid-column: span 6; } .col-7[data-v-81a6adf0] { grid-column: span 7; } .col-8[data-v-81a6adf0] { grid-column: span 8; } .col-9[data-v-81a6adf0] { grid-column: span 9; } .col-10[data-v-81a6adf0] { grid-column: span 10; } .col-12[data-v-81a6adf0] { grid-column: span 12; } .col-13[data-v-81a6adf0] { grid-column: span 13; } .col-14[data-v-81a6adf0] { grid-column: span 14; } .col-15[data-v-81a6adf0] { grid-column: span 15; } .col-16[data-v-81a6adf0] { grid-column: span 16; } .col-18[data-v-81a6adf0] { grid-column: span 18; } .col-20[data-v-81a6adf0] { grid-column: span 20; } .col-22[data-v-81a6adf0] { grid-column: span 22; } .col-24[data-v-81a6adf0] { grid-column: span 24; } .col-26[data-v-81a6adf0] { grid-column: span 26; } .col-27[data-v-81a6adf0] { grid-column: span 27; } .col-28[data-v-81a6adf0] { grid-column: span 28; } .col-30[data-v-81a6adf0] { grid-column: span 30; } .col-36[data-v-81a6adf0] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-81a6adf0] { display: none; } .col-md-36[data-v-81a6adf0] { grid-column: span 36; } .col-md-28[data-v-81a6adf0] { grid-column: span 28; } .col-md-27[data-v-81a6adf0] { grid-column: span 27; } .col-md-24[data-v-81a6adf0] { grid-column: span 24; } .col-md-22[data-v-81a6adf0] { grid-column: span 22; } .col-md-20[data-v-81a6adf0] { grid-column: span 20; } .col-md-19[data-v-81a6adf0] { grid-column: span 19; } .col-md-18[data-v-81a6adf0] { grid-column: span 18; } .col-md-17[data-v-81a6adf0] { grid-column: span 17; } .col-md-16[data-v-81a6adf0] { grid-column: span 16; } .col-md-15[data-v-81a6adf0] { grid-column: span 15; } .col-md-14[data-v-81a6adf0] { grid-column: span 14; } .col-md-13[data-v-81a6adf0] { grid-column: span 13; } .col-md-12[data-v-81a6adf0] { grid-column: span 12; } .col-md-10[data-v-81a6adf0] { grid-column: span 10; } .col-md-9[data-v-81a6adf0] { grid-column: span 9; } .col-md-8[data-v-81a6adf0] { grid-column: span 8; } .col-md-6[data-v-81a6adf0] { grid-column: span 6; } .col-md-5[data-v-81a6adf0] { grid-column: span 5; } .col-md-4[data-v-81a6adf0] { grid-column: span 4; } .col-md-3[data-v-81a6adf0] { grid-column: span 3; } .col-md-2[data-v-81a6adf0] { grid-column: span 2; } .col-md-1[data-v-81a6adf0] { grid-column: span 1; } .col-md-auto[data-v-81a6adf0] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-81a6adf0] { display: none; } .col-sm-36[data-v-81a6adf0] { grid-column: span 36; } .col-sm-32[data-v-81a6adf0] { grid-column: span 32; } .col-sm-28[data-v-81a6adf0] { grid-column: span 28; } .col-sm-27[data-v-81a6adf0] { grid-column: span 27; } .col-sm-24[data-v-81a6adf0] { grid-column: span 24; } .col-sm-22[data-v-81a6adf0] { grid-column: span 22; } .col-sm-20[data-v-81a6adf0] { grid-column: span 20; } .col-sm-18[data-v-81a6adf0] { grid-column: span 18; } .col-sm-16[data-v-81a6adf0] { grid-column: span 16; } .col-sm-15[data-v-81a6adf0] { grid-column: span 15; } .col-sm-14[data-v-81a6adf0] { grid-column: span 14; } .col-sm-13[data-v-81a6adf0] { grid-column: span 12; } .col-sm-12[data-v-81a6adf0] { grid-column: span 12; } .col-sm-10[data-v-81a6adf0] { grid-column: span 10; } .col-sm-9[data-v-81a6adf0] { grid-column: span 8; } .col-sm-8[data-v-81a6adf0] { grid-column: span 8; } .col-sm-6[data-v-81a6adf0] { grid-column: span 6; } .col-sm-4[data-v-81a6adf0] { grid-column: span 4; } .col-sm-auto[data-v-81a6adf0] { grid-column: auto; } } .fade-enter-active[data-v-81a6adf0] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-81a6adf0] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-81a6adf0], .fade-leave-to[data-v-81a6adf0] { opacity: 0; } .hero[data-v-81a6adf0] { position: relative; width: 100%; min-height: 500px; overflow: hidden; background: #020202; } .hero__bg[data-v-81a6adf0] { position: absolute; inset: 0; z-index: 0; } .hero__bg-overlay[data-v-81a6adf0] { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 2, 2, 0.9) 0%, rgba(2, 2, 2, 0.7) 25%, rgba(2, 2, 2, 0.2) 50%, rgba(2, 2, 2, 0.1) 70%, rgba(2, 2, 2, 0.5) 95%, rgba(2, 2, 2, 0.9) 100%); } .hero__bg-overlay[data-v-81a6adf0]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 2, 2, 0.6) 0%, transparent 15%, transparent 85%, rgba(2, 2, 2, 0.6) 100%); } .hero__bg-grid[data-v-81a6adf0] { position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--primary-500-rgb), 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-500-rgb), 0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 60% 60% at 30% 50%, black 0%, transparent 70%); pointer-events: none; } .hero__image-wrapper[data-v-81a6adf0] { position: absolute; inset: 0; display: flex; justify-content: center; z-index: 1; } .hero__image[data-v-81a6adf0] { width: 100%; max-width: 1300px; height: 100%; object-fit: cover; object-position: center right; } .hero__content[data-v-81a6adf0] { position: relative; z-index: 2; display: flex; flex-direction: column; max-width: 1200px; min-height: 500px; margin: 0 auto; padding: 40px; } .hero__header[data-v-81a6adf0] { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .hero__badge[data-v-81a6adf0] { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(var(--primary-700-rgb), 0.25); border: 1px solid rgba(var(--primary-500-rgb), 0.3); border-radius: 100px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; color: var(--primary-300); backdrop-filter: blur(10px); } .hero__badge-dot[data-v-81a6adf0] { width: 8px; height: 8px; background: #2cbb66; border-radius: 50%; } .hero__badge-sep[data-v-81a6adf0] { color: #94a2b8; } .hero__title[data-v-81a6adf0] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: clamp(36px, 4.5vw, 54px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: #f8f9fb; margin: 0; } .hero__title span[data-v-81a6adf0] { display: block; } .hero__title-accent[data-v-81a6adf0] { background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-300) 50%, var(--primary-500) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__footer[data-v-81a6adf0] { display: flex; flex-direction: column; gap: 24px; max-width: 550px; margin-top: auto; } .hero__actions[data-v-81a6adf0] { display: flex; gap: 16px; margin-top: 8px; } .hero__trust[data-v-81a6adf0] { display: flex; gap: 24px; margin-top: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .hero__trust-item[data-v-81a6adf0] { display: flex; align-items: center; gap: 8px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; color: #b4bfce; } .hero__trust-item svg[data-v-81a6adf0] { width: 18px; height: 18px; color: #2cbb66; } .hero__bottom-row[data-v-81a6adf0] { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 12px; } .hero__bottom-row .hero__badge--mobile[data-v-81a6adf0] { align-self: flex-end; } @media (max-width: 1160px) { .hero__image[data-v-81a6adf0] { object-position: 70% center; } .hero__bg-overlay[data-v-81a6adf0] { background: linear-gradient(90deg, rgba(2, 2, 2, 0.97) 0%, rgba(2, 2, 2, 0.85) 30%, rgba(2, 2, 2, 0.5) 60%, rgba(2, 2, 2, 0.7) 100%); } .hero__content[data-v-81a6adf0] { padding: 24px 20px; } .hero__footer[data-v-81a6adf0] { max-width: 500px; } } @media (max-width: 720px) { .hero[data-v-81a6adf0] { min-height: 480px; } .hero__bg-image[data-v-81a6adf0] { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero__bg-overlay[data-v-81a6adf0] { background: linear-gradient(180deg, rgba(2, 2, 2, 0.85) 0%, rgba(2, 2, 2, 0.3) 25%, rgba(2, 2, 2, 0.2) 50%, rgba(2, 2, 2, 0.5) 75%, rgba(2, 2, 2, 0.95) 100%); } .hero__bg-overlay[data-v-81a6adf0]::after { display: none; } .hero__content[data-v-81a6adf0] { min-height: 450px; padding: 20px; padding-top: 35px; } .hero__footer[data-v-81a6adf0] { gap: 12px; } .hero__title[data-v-81a6adf0] { font-size: 28px; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } .hero__title-accent[data-v-81a6adf0] { font-size: 32px; } .hero__badge[data-v-81a6adf0] { padding: 6px 12px; font-size: 11px; background: rgba(0, 0, 0, 0.5); } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-2767dbb6]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-2767dbb6] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-2767dbb6] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-2767dbb6]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-2767dbb6], .theme-mode-light[data-v-2767dbb6] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-2767dbb6], .theme-mode-dark[data-v-2767dbb6] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-2767dbb6]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-2767dbb6]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-2767dbb6] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-2767dbb6] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-2767dbb6]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-2767dbb6], input[disabled][data-v-2767dbb6] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-2767dbb6] { opacity: 0.9; } input[readonly][data-v-2767dbb6] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-2767dbb6] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-2767dbb6]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-2767dbb6]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-2767dbb6]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-2767dbb6] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-2767dbb6]:nth-child(odd), .list-card-desktop__wrapper[data-v-2767dbb6]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-2767dbb6]:nth-child(even), .list-card-desktop__wrapper[data-v-2767dbb6]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-2767dbb6]:nth-child(odd), .listCardDesktopWrapper[data-v-2767dbb6]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-2767dbb6]:nth-child(even), .listCardDesktopWrapper[data-v-2767dbb6]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-2767dbb6] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-2767dbb6] { cursor: pointer; } .card-layout--selectionnable[data-v-2767dbb6]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-2767dbb6] { cursor: auto; } .card-layout--drawer[data-v-2767dbb6] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-2767dbb6] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-2767dbb6] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-2767dbb6] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-2767dbb6] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-2767dbb6] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-2767dbb6]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-2767dbb6] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-2767dbb6] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-2767dbb6] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-2767dbb6] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-2767dbb6] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-2767dbb6] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-2767dbb6] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-2767dbb6] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-2767dbb6] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-2767dbb6] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-2767dbb6] { background-color: #eb1515; } .color-chip--dossiers[data-v-2767dbb6] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-2767dbb6] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-2767dbb6] { background-color: #00a79b; } .color-chip--virements[data-v-2767dbb6] { background-color: var(--secondary-400); } .color-chip--factures[data-v-2767dbb6] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-2767dbb6] { background-color: #eb1515; } .color-recherche-dossiers[data-v-2767dbb6] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-2767dbb6] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-2767dbb6] { background-color: #00a79b; } .color-recherche-virements[data-v-2767dbb6] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-2767dbb6] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-2767dbb6] { color: #00a79b; cursor: pointer; } .scrollable[data-v-2767dbb6] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-2767dbb6] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-2767dbb6] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-2767dbb6] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-2767dbb6] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-2767dbb6] { font-weight: 800; } .grid-cell--column[data-v-2767dbb6] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-2767dbb6] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-2767dbb6] { fill: #00a79b; } .grid-cell--disabled[data-v-2767dbb6] { color: #cccccc; } .grid-cell--disabled svg[data-v-2767dbb6] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-2767dbb6] { white-space: nowrap; } .grid-cell--danger svg[data-v-2767dbb6] { fill: #eb1515; } .grid-cell--span-1[data-v-2767dbb6] { grid-column: span 1; } .grid-cell--span-2[data-v-2767dbb6] { grid-column: span 2; } .grid-cell--span-3[data-v-2767dbb6] { grid-column: span 3; } .grid-cell--span-4[data-v-2767dbb6] { grid-column: span 4; } .grid-cell--span-5[data-v-2767dbb6] { grid-column: span 5; } .grid-cell--span-6[data-v-2767dbb6] { grid-column: span 6; } .grid-cell--span-7[data-v-2767dbb6] { grid-column: span 7; } .grid-cell--span-8[data-v-2767dbb6] { grid-column: span 8; } .grid-cell--span-9[data-v-2767dbb6] { grid-column: span 9; } .grid-cell--span-10[data-v-2767dbb6] { grid-column: span 10; } .grid-cell--span-12[data-v-2767dbb6] { grid-column: span 12; } .grid-cell--span-13[data-v-2767dbb6] { grid-column: span 13; } .grid-cell--span-14[data-v-2767dbb6] { grid-column: span 14; } .grid-cell--span-16[data-v-2767dbb6] { grid-column: span 16; } .grid-cell--span-18[data-v-2767dbb6] { grid-column: span 18; } .grid-cell--span-20[data-v-2767dbb6] { grid-column: span 20; } .grid-cell--span-32[data-v-2767dbb6] { grid-column: span 32; } .grid-cell--span-36[data-v-2767dbb6] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-2767dbb6] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-2767dbb6] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-2767dbb6] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-2767dbb6] { justify-content: center !important; } .elem--bold span[data-v-2767dbb6] { font-weight: 800; } .elem--column[data-v-2767dbb6] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-2767dbb6] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-2767dbb6] { fill: #00a79b; } .elem--clickable[data-v-2767dbb6]:hover { cursor: pointer; } .elem--disabled[data-v-2767dbb6] { color: #cccccc; } .elem--disabled svg[data-v-2767dbb6] { fill: #cccccc; } .elem--nowrap span[data-v-2767dbb6] { white-space: nowrap; } .elem--danger svg[data-v-2767dbb6] { fill: #eb1515; } .elem--span-1[data-v-2767dbb6] { grid-column: span 1; } .elem--span-2[data-v-2767dbb6] { grid-column: span 2; } .elem--span-3[data-v-2767dbb6] { grid-column: span 3; } .elem--span-4[data-v-2767dbb6] { grid-column: span 4; } .elem--span-5[data-v-2767dbb6] { grid-column: span 5; } .elem--span-6[data-v-2767dbb6] { grid-column: span 6; } .elem--span-7[data-v-2767dbb6] { grid-column: span 7; } .elem--span-8[data-v-2767dbb6] { grid-column: span 8; } .elem--span-9[data-v-2767dbb6] { grid-column: span 9; } .elem--span-10[data-v-2767dbb6] { grid-column: span 10; } .elem--span-12[data-v-2767dbb6] { grid-column: span 12; } .elem--span-13[data-v-2767dbb6] { grid-column: span 13; } .elem--span-14[data-v-2767dbb6] { grid-column: span 14; } .elem--span-16[data-v-2767dbb6] { grid-column: span 16; } .elem--span-18[data-v-2767dbb6] { grid-column: span 18; } .elem--span-20[data-v-2767dbb6] { grid-column: span 20; } .elem--span-32[data-v-2767dbb6] { grid-column: span 32; } .elem--span-36[data-v-2767dbb6] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-2767dbb6] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-2767dbb6] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-2767dbb6]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-2767dbb6] { display: flex; } /* flex-direction */ .flex-column[data-v-2767dbb6] { flex-direction: column; } .flex-row[data-v-2767dbb6] { flex-direction: row; } /* flex */ .flex-1[data-v-2767dbb6] { flex: 1 !important; } .flex-2[data-v-2767dbb6] { flex: 2; } .flex-3[data-v-2767dbb6] { flex: 3; } .flex-3[data-v-2767dbb6] { flex: 4; } .flex-5[data-v-2767dbb6] { flex: 5; } .flex-auto[data-v-2767dbb6] { flex: auto; } .flex-none[data-v-2767dbb6] { flex: none; } .flex-content[data-v-2767dbb6] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-2767dbb6] { flex-wrap: wrap; } .flex-nowrap[data-v-2767dbb6] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-2767dbb6] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-2767dbb6] { justify-content: flex-start; } .justify-content-end[data-v-2767dbb6] { justify-content: flex-end; } .justify-content-baseline[data-v-2767dbb6] { justify-content: baseline; } .justify-content-center[data-v-2767dbb6] { justify-content: center; } .justify-content-space-between[data-v-2767dbb6] { justify-content: space-between; } .justify-content-space-around[data-v-2767dbb6] { justify-content: space-around; } .justify-content-space-evenly[data-v-2767dbb6] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-2767dbb6] { align-items: flex-start; } .align-items-flex-end[data-v-2767dbb6] { align-items: flex-end; } .align-items-stretch[data-v-2767dbb6] { align-items: stretch; } .align-items-baseline[data-v-2767dbb6] { align-items: baseline; } .align-items-center[data-v-2767dbb6] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-2767dbb6] { align-content: flex-start; } .align-content-flex-end[data-v-2767dbb6] { align-content: flex-end; } .align-content-center[data-v-2767dbb6] { align-content: center; } .align-content-stretch[data-v-2767dbb6] { align-content: stretch; } .align-content-space-between[data-v-2767dbb6] { align-content: space-between; } .align-content-space-around[data-v-2767dbb6] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-2767dbb6] { align-self: flex-start; } .align-self-flex-end[data-v-2767dbb6] { align-self: flex-end; } .align-self-stretch[data-v-2767dbb6] { align-self: stretch; } .align-self-flex-baseline[data-v-2767dbb6] { align-self: baseline; } .align-self-center[data-v-2767dbb6] { align-self: center; } .align-self-auto[data-v-2767dbb6] { align-self: auto; } .flex-gap-1[data-v-2767dbb6] { gap: 4px; } .flex-gap-2[data-v-2767dbb6] { gap: 8px; } .flex-gap-3[data-v-2767dbb6] { gap: 12px; } .flex-gap-4[data-v-2767dbb6] { gap: 16px; } .flex-gap-5[data-v-2767dbb6] { gap: 20px; } .flex-gap-6[data-v-2767dbb6] { gap: 24px; } .flex-gap-7[data-v-2767dbb6] { gap: 28px; } .flex-gap-8[data-v-2767dbb6] { gap: 32px; } .flex-gap-10[data-v-2767dbb6] { gap: 40px; } .flex-gap-12[data-v-2767dbb6] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-2767dbb6] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-2767dbb6] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-2767dbb6] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-2767dbb6] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-2767dbb6] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-2767dbb6] { display: none !important; } } .col-none[data-v-2767dbb6] { display: none; } .col-auto[data-v-2767dbb6] { grid-column: auto; } .col-1[data-v-2767dbb6] { grid-column: span 1; } .col-2[data-v-2767dbb6] { grid-column: span 2; } .col-3[data-v-2767dbb6] { grid-column: span 3; } .col-4[data-v-2767dbb6] { grid-column: span 4; } .col-5[data-v-2767dbb6] { grid-column: span 5; } .col-6[data-v-2767dbb6] { grid-column: span 6; } .col-7[data-v-2767dbb6] { grid-column: span 7; } .col-8[data-v-2767dbb6] { grid-column: span 8; } .col-9[data-v-2767dbb6] { grid-column: span 9; } .col-10[data-v-2767dbb6] { grid-column: span 10; } .col-12[data-v-2767dbb6] { grid-column: span 12; } .col-13[data-v-2767dbb6] { grid-column: span 13; } .col-14[data-v-2767dbb6] { grid-column: span 14; } .col-15[data-v-2767dbb6] { grid-column: span 15; } .col-16[data-v-2767dbb6] { grid-column: span 16; } .col-18[data-v-2767dbb6] { grid-column: span 18; } .col-20[data-v-2767dbb6] { grid-column: span 20; } .col-22[data-v-2767dbb6] { grid-column: span 22; } .col-24[data-v-2767dbb6] { grid-column: span 24; } .col-26[data-v-2767dbb6] { grid-column: span 26; } .col-27[data-v-2767dbb6] { grid-column: span 27; } .col-28[data-v-2767dbb6] { grid-column: span 28; } .col-30[data-v-2767dbb6] { grid-column: span 30; } .col-36[data-v-2767dbb6] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-2767dbb6] { display: none; } .col-md-36[data-v-2767dbb6] { grid-column: span 36; } .col-md-28[data-v-2767dbb6] { grid-column: span 28; } .col-md-27[data-v-2767dbb6] { grid-column: span 27; } .col-md-24[data-v-2767dbb6] { grid-column: span 24; } .col-md-22[data-v-2767dbb6] { grid-column: span 22; } .col-md-20[data-v-2767dbb6] { grid-column: span 20; } .col-md-19[data-v-2767dbb6] { grid-column: span 19; } .col-md-18[data-v-2767dbb6] { grid-column: span 18; } .col-md-17[data-v-2767dbb6] { grid-column: span 17; } .col-md-16[data-v-2767dbb6] { grid-column: span 16; } .col-md-15[data-v-2767dbb6] { grid-column: span 15; } .col-md-14[data-v-2767dbb6] { grid-column: span 14; } .col-md-13[data-v-2767dbb6] { grid-column: span 13; } .col-md-12[data-v-2767dbb6] { grid-column: span 12; } .col-md-10[data-v-2767dbb6] { grid-column: span 10; } .col-md-9[data-v-2767dbb6] { grid-column: span 9; } .col-md-8[data-v-2767dbb6] { grid-column: span 8; } .col-md-6[data-v-2767dbb6] { grid-column: span 6; } .col-md-5[data-v-2767dbb6] { grid-column: span 5; } .col-md-4[data-v-2767dbb6] { grid-column: span 4; } .col-md-3[data-v-2767dbb6] { grid-column: span 3; } .col-md-2[data-v-2767dbb6] { grid-column: span 2; } .col-md-1[data-v-2767dbb6] { grid-column: span 1; } .col-md-auto[data-v-2767dbb6] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-2767dbb6] { display: none; } .col-sm-36[data-v-2767dbb6] { grid-column: span 36; } .col-sm-32[data-v-2767dbb6] { grid-column: span 32; } .col-sm-28[data-v-2767dbb6] { grid-column: span 28; } .col-sm-27[data-v-2767dbb6] { grid-column: span 27; } .col-sm-24[data-v-2767dbb6] { grid-column: span 24; } .col-sm-22[data-v-2767dbb6] { grid-column: span 22; } .col-sm-20[data-v-2767dbb6] { grid-column: span 20; } .col-sm-18[data-v-2767dbb6] { grid-column: span 18; } .col-sm-16[data-v-2767dbb6] { grid-column: span 16; } .col-sm-15[data-v-2767dbb6] { grid-column: span 15; } .col-sm-14[data-v-2767dbb6] { grid-column: span 14; } .col-sm-13[data-v-2767dbb6] { grid-column: span 12; } .col-sm-12[data-v-2767dbb6] { grid-column: span 12; } .col-sm-10[data-v-2767dbb6] { grid-column: span 10; } .col-sm-9[data-v-2767dbb6] { grid-column: span 8; } .col-sm-8[data-v-2767dbb6] { grid-column: span 8; } .col-sm-6[data-v-2767dbb6] { grid-column: span 6; } .col-sm-4[data-v-2767dbb6] { grid-column: span 4; } .col-sm-auto[data-v-2767dbb6] { grid-column: auto; } } .fade-enter-active[data-v-2767dbb6] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-2767dbb6] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-2767dbb6], .fade-leave-to[data-v-2767dbb6] { opacity: 0; } .layout-section__container[data-v-2767dbb6] { max-width: 1200px; margin: 0 auto; padding: 0 50px; } .layout-section__inner--two-cols[data-v-2767dbb6] { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .quality__content[data-v-2767dbb6] { display: flex; flex-direction: column; gap: 24px; } .quality__badge[data-v-2767dbb6] { display: inline-block; padding: 6px 14px; background: rgba(44, 187, 102, 0.15); border-radius: 100px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #2cbb66; width: fit-content; } .quality__title[data-v-2767dbb6] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: clamp(36px, 4vw, 52px); font-weight: 600; color: #f8f9fb; margin: 0; line-height: 1.1; letter-spacing: -0.02em; } .quality__title span[data-v-2767dbb6] { background: linear-gradient(135deg, #2cbb66 0%, var(--primary-400) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .quality__desc[data-v-2767dbb6] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 17px; line-height: 1.7; color: #cdd5e0; margin: 0; } .quality__features[data-v-2767dbb6] { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; } .quality__feature[data-v-2767dbb6] { display: flex; gap: 16px; align-items: flex-start; } .quality__feature--success .quality__feature-icon[data-v-2767dbb6] { background: rgba(44, 187, 102, 0.15); color: #2cbb66; } .quality__feature--primary .quality__feature-icon[data-v-2767dbb6] { background: rgba(var(--primary-500-rgb), 0.15); color: var(--primary-400); } .quality__feature--warning .quality__feature-icon[data-v-2767dbb6] { background: rgba(249, 115, 22, 0.15); color: #f97316; } .quality__feature--info .quality__feature-icon[data-v-2767dbb6] { background: rgba(20, 173, 255, 0.15); color: #14adff; } .quality__feature-icon[data-v-2767dbb6] { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .quality__feature-icon svg[data-v-2767dbb6] { width: 22px; height: 22px; } .quality__feature-text h4[data-v-2767dbb6] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 16px; font-weight: 600; color: #f8f9fb; margin: 0 0 4px; } .quality__feature-text p[data-v-2767dbb6] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 14px; color: #94a2b8; margin: 0; line-height: 1.5; } .quality__visual[data-v-2767dbb6] { display: flex; justify-content: center; align-items: center; } .quality__coa-scroll[data-v-2767dbb6] { position: relative; width: 280px; height: 500px; border-radius: 20px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); } .quality__coa-scroll[data-v-2767dbb6]::-webkit-scrollbar { display: none; } .quality__coa-track[data-v-2767dbb6] { display: flex; flex-direction: column; gap: 12px; padding: 16px 8px; } .coa-card[data-v-2767dbb6] { flex-shrink: 0; width: 260px; margin: 0 auto; overflow: hidden; padding: 0 !important; } .coa-card__header[data-v-2767dbb6] { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); } .coa-card__badge[data-v-2767dbb6] { padding: 2px 6px; background: rgba(44, 187, 102, 0.2); border-radius: 4px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #2cbb66; } .coa-card__title[data-v-2767dbb6] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 12px; font-weight: 600; color: #f8f9fb; } .coa-card__body[data-v-2767dbb6] { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .coa-card__row[data-v-2767dbb6] { display: flex; justify-content: space-between; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 11px; } .coa-card__row span[data-v-2767dbb6]:first-child { color: #94a2b8; } .coa-card__row span[data-v-2767dbb6]:last-child { color: #f8f9fb; font-weight: 500; } .coa-card__row--highlight[data-v-2767dbb6] { padding: 8px; margin: 2px -6px; background: rgba(44, 187, 102, 0.1); border-radius: 6px; } .coa-card__row--highlight span[data-v-2767dbb6]:last-child { color: #2cbb66; font-weight: 700; font-size: 12px; } .coa-card__footer[data-v-2767dbb6] { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 8px 12px; background: rgba(44, 187, 102, 0.08); border: none; border-top: 1px solid var(--border-default); font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 11px; font-weight: 500; color: #2cbb66; cursor: pointer; transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .coa-card__footer svg[data-v-2767dbb6] { width: 14px; height: 14px; } .coa-card__footer[data-v-2767dbb6]:hover { background: rgba(44, 187, 102, 0.15); } @media (max-width: 1160px) { .layout-section__container[data-v-2767dbb6] { padding: 0 16px; } .layout-section__inner--two-cols[data-v-2767dbb6] { grid-template-columns: 1fr; gap: 24px; } .quality__content[data-v-2767dbb6] { text-align: center; align-items: center; } .quality__desc[data-v-2767dbb6] { font-size: 14px; } .quality__features[data-v-2767dbb6] { display: none; } .quality__visual[data-v-2767dbb6] { order: 1; margin-left: -50px; margin-right: -50px; } .quality__coa-scroll[data-v-2767dbb6] { flex: 1; max-width: 800px; margin: 0 auto; height: auto; overflow-x: auto; overflow-y: hidden; border-radius: 0; padding: 0 24px; mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); } .quality__coa-track[data-v-2767dbb6] { flex-direction: row; padding: 8px 0; gap: 12px; width: max-content; } .coa-card[data-v-2767dbb6] { width: 220px; flex-shrink: 0; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-6a63a1db]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-6a63a1db] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-6a63a1db] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-6a63a1db]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-6a63a1db], .theme-mode-light[data-v-6a63a1db] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-6a63a1db], .theme-mode-dark[data-v-6a63a1db] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-6a63a1db]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-6a63a1db]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-6a63a1db] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-6a63a1db] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-6a63a1db]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-6a63a1db], input[disabled][data-v-6a63a1db] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-6a63a1db] { opacity: 0.9; } input[readonly][data-v-6a63a1db] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-6a63a1db] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-6a63a1db]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-6a63a1db]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-6a63a1db]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-6a63a1db] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-6a63a1db]:nth-child(odd), .list-card-desktop__wrapper[data-v-6a63a1db]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-6a63a1db]:nth-child(even), .list-card-desktop__wrapper[data-v-6a63a1db]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-6a63a1db]:nth-child(odd), .listCardDesktopWrapper[data-v-6a63a1db]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-6a63a1db]:nth-child(even), .listCardDesktopWrapper[data-v-6a63a1db]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-6a63a1db] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-6a63a1db] { cursor: pointer; } .card-layout--selectionnable[data-v-6a63a1db]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-6a63a1db] { cursor: auto; } .card-layout--drawer[data-v-6a63a1db] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-6a63a1db] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-6a63a1db] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-6a63a1db] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-6a63a1db] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-6a63a1db] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-6a63a1db]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-6a63a1db] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-6a63a1db] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-6a63a1db] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-6a63a1db] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-6a63a1db] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-6a63a1db] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-6a63a1db] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-6a63a1db] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-6a63a1db] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-6a63a1db] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-6a63a1db] { background-color: #eb1515; } .color-chip--dossiers[data-v-6a63a1db] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-6a63a1db] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-6a63a1db] { background-color: #00a79b; } .color-chip--virements[data-v-6a63a1db] { background-color: var(--secondary-400); } .color-chip--factures[data-v-6a63a1db] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-6a63a1db] { background-color: #eb1515; } .color-recherche-dossiers[data-v-6a63a1db] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-6a63a1db] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-6a63a1db] { background-color: #00a79b; } .color-recherche-virements[data-v-6a63a1db] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-6a63a1db] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-6a63a1db] { color: #00a79b; cursor: pointer; } .scrollable[data-v-6a63a1db] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-6a63a1db] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-6a63a1db] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-6a63a1db] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-6a63a1db] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-6a63a1db] { font-weight: 800; } .grid-cell--column[data-v-6a63a1db] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-6a63a1db] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-6a63a1db] { fill: #00a79b; } .grid-cell--disabled[data-v-6a63a1db] { color: #cccccc; } .grid-cell--disabled svg[data-v-6a63a1db] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-6a63a1db] { white-space: nowrap; } .grid-cell--danger svg[data-v-6a63a1db] { fill: #eb1515; } .grid-cell--span-1[data-v-6a63a1db] { grid-column: span 1; } .grid-cell--span-2[data-v-6a63a1db] { grid-column: span 2; } .grid-cell--span-3[data-v-6a63a1db] { grid-column: span 3; } .grid-cell--span-4[data-v-6a63a1db] { grid-column: span 4; } .grid-cell--span-5[data-v-6a63a1db] { grid-column: span 5; } .grid-cell--span-6[data-v-6a63a1db] { grid-column: span 6; } .grid-cell--span-7[data-v-6a63a1db] { grid-column: span 7; } .grid-cell--span-8[data-v-6a63a1db] { grid-column: span 8; } .grid-cell--span-9[data-v-6a63a1db] { grid-column: span 9; } .grid-cell--span-10[data-v-6a63a1db] { grid-column: span 10; } .grid-cell--span-12[data-v-6a63a1db] { grid-column: span 12; } .grid-cell--span-13[data-v-6a63a1db] { grid-column: span 13; } .grid-cell--span-14[data-v-6a63a1db] { grid-column: span 14; } .grid-cell--span-16[data-v-6a63a1db] { grid-column: span 16; } .grid-cell--span-18[data-v-6a63a1db] { grid-column: span 18; } .grid-cell--span-20[data-v-6a63a1db] { grid-column: span 20; } .grid-cell--span-32[data-v-6a63a1db] { grid-column: span 32; } .grid-cell--span-36[data-v-6a63a1db] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-6a63a1db] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-6a63a1db] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-6a63a1db] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-6a63a1db] { justify-content: center !important; } .elem--bold span[data-v-6a63a1db] { font-weight: 800; } .elem--column[data-v-6a63a1db] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-6a63a1db] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-6a63a1db] { fill: #00a79b; } .elem--clickable[data-v-6a63a1db]:hover { cursor: pointer; } .elem--disabled[data-v-6a63a1db] { color: #cccccc; } .elem--disabled svg[data-v-6a63a1db] { fill: #cccccc; } .elem--nowrap span[data-v-6a63a1db] { white-space: nowrap; } .elem--danger svg[data-v-6a63a1db] { fill: #eb1515; } .elem--span-1[data-v-6a63a1db] { grid-column: span 1; } .elem--span-2[data-v-6a63a1db] { grid-column: span 2; } .elem--span-3[data-v-6a63a1db] { grid-column: span 3; } .elem--span-4[data-v-6a63a1db] { grid-column: span 4; } .elem--span-5[data-v-6a63a1db] { grid-column: span 5; } .elem--span-6[data-v-6a63a1db] { grid-column: span 6; } .elem--span-7[data-v-6a63a1db] { grid-column: span 7; } .elem--span-8[data-v-6a63a1db] { grid-column: span 8; } .elem--span-9[data-v-6a63a1db] { grid-column: span 9; } .elem--span-10[data-v-6a63a1db] { grid-column: span 10; } .elem--span-12[data-v-6a63a1db] { grid-column: span 12; } .elem--span-13[data-v-6a63a1db] { grid-column: span 13; } .elem--span-14[data-v-6a63a1db] { grid-column: span 14; } .elem--span-16[data-v-6a63a1db] { grid-column: span 16; } .elem--span-18[data-v-6a63a1db] { grid-column: span 18; } .elem--span-20[data-v-6a63a1db] { grid-column: span 20; } .elem--span-32[data-v-6a63a1db] { grid-column: span 32; } .elem--span-36[data-v-6a63a1db] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-6a63a1db] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-6a63a1db] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-6a63a1db]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-6a63a1db] { display: flex; } /* flex-direction */ .flex-column[data-v-6a63a1db] { flex-direction: column; } .flex-row[data-v-6a63a1db] { flex-direction: row; } /* flex */ .flex-1[data-v-6a63a1db] { flex: 1 !important; } .flex-2[data-v-6a63a1db] { flex: 2; } .flex-3[data-v-6a63a1db] { flex: 3; } .flex-3[data-v-6a63a1db] { flex: 4; } .flex-5[data-v-6a63a1db] { flex: 5; } .flex-auto[data-v-6a63a1db] { flex: auto; } .flex-none[data-v-6a63a1db] { flex: none; } .flex-content[data-v-6a63a1db] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-6a63a1db] { flex-wrap: wrap; } .flex-nowrap[data-v-6a63a1db] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-6a63a1db] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-6a63a1db] { justify-content: flex-start; } .justify-content-end[data-v-6a63a1db] { justify-content: flex-end; } .justify-content-baseline[data-v-6a63a1db] { justify-content: baseline; } .justify-content-center[data-v-6a63a1db] { justify-content: center; } .justify-content-space-between[data-v-6a63a1db] { justify-content: space-between; } .justify-content-space-around[data-v-6a63a1db] { justify-content: space-around; } .justify-content-space-evenly[data-v-6a63a1db] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-6a63a1db] { align-items: flex-start; } .align-items-flex-end[data-v-6a63a1db] { align-items: flex-end; } .align-items-stretch[data-v-6a63a1db] { align-items: stretch; } .align-items-baseline[data-v-6a63a1db] { align-items: baseline; } .align-items-center[data-v-6a63a1db] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-6a63a1db] { align-content: flex-start; } .align-content-flex-end[data-v-6a63a1db] { align-content: flex-end; } .align-content-center[data-v-6a63a1db] { align-content: center; } .align-content-stretch[data-v-6a63a1db] { align-content: stretch; } .align-content-space-between[data-v-6a63a1db] { align-content: space-between; } .align-content-space-around[data-v-6a63a1db] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-6a63a1db] { align-self: flex-start; } .align-self-flex-end[data-v-6a63a1db] { align-self: flex-end; } .align-self-stretch[data-v-6a63a1db] { align-self: stretch; } .align-self-flex-baseline[data-v-6a63a1db] { align-self: baseline; } .align-self-center[data-v-6a63a1db] { align-self: center; } .align-self-auto[data-v-6a63a1db] { align-self: auto; } .flex-gap-1[data-v-6a63a1db] { gap: 4px; } .flex-gap-2[data-v-6a63a1db] { gap: 8px; } .flex-gap-3[data-v-6a63a1db] { gap: 12px; } .flex-gap-4[data-v-6a63a1db] { gap: 16px; } .flex-gap-5[data-v-6a63a1db] { gap: 20px; } .flex-gap-6[data-v-6a63a1db] { gap: 24px; } .flex-gap-7[data-v-6a63a1db] { gap: 28px; } .flex-gap-8[data-v-6a63a1db] { gap: 32px; } .flex-gap-10[data-v-6a63a1db] { gap: 40px; } .flex-gap-12[data-v-6a63a1db] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-6a63a1db] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-6a63a1db] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-6a63a1db] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-6a63a1db] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-6a63a1db] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-6a63a1db] { display: none !important; } } .col-none[data-v-6a63a1db] { display: none; } .col-auto[data-v-6a63a1db] { grid-column: auto; } .col-1[data-v-6a63a1db] { grid-column: span 1; } .col-2[data-v-6a63a1db] { grid-column: span 2; } .col-3[data-v-6a63a1db] { grid-column: span 3; } .col-4[data-v-6a63a1db] { grid-column: span 4; } .col-5[data-v-6a63a1db] { grid-column: span 5; } .col-6[data-v-6a63a1db] { grid-column: span 6; } .col-7[data-v-6a63a1db] { grid-column: span 7; } .col-8[data-v-6a63a1db] { grid-column: span 8; } .col-9[data-v-6a63a1db] { grid-column: span 9; } .col-10[data-v-6a63a1db] { grid-column: span 10; } .col-12[data-v-6a63a1db] { grid-column: span 12; } .col-13[data-v-6a63a1db] { grid-column: span 13; } .col-14[data-v-6a63a1db] { grid-column: span 14; } .col-15[data-v-6a63a1db] { grid-column: span 15; } .col-16[data-v-6a63a1db] { grid-column: span 16; } .col-18[data-v-6a63a1db] { grid-column: span 18; } .col-20[data-v-6a63a1db] { grid-column: span 20; } .col-22[data-v-6a63a1db] { grid-column: span 22; } .col-24[data-v-6a63a1db] { grid-column: span 24; } .col-26[data-v-6a63a1db] { grid-column: span 26; } .col-27[data-v-6a63a1db] { grid-column: span 27; } .col-28[data-v-6a63a1db] { grid-column: span 28; } .col-30[data-v-6a63a1db] { grid-column: span 30; } .col-36[data-v-6a63a1db] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-6a63a1db] { display: none; } .col-md-36[data-v-6a63a1db] { grid-column: span 36; } .col-md-28[data-v-6a63a1db] { grid-column: span 28; } .col-md-27[data-v-6a63a1db] { grid-column: span 27; } .col-md-24[data-v-6a63a1db] { grid-column: span 24; } .col-md-22[data-v-6a63a1db] { grid-column: span 22; } .col-md-20[data-v-6a63a1db] { grid-column: span 20; } .col-md-19[data-v-6a63a1db] { grid-column: span 19; } .col-md-18[data-v-6a63a1db] { grid-column: span 18; } .col-md-17[data-v-6a63a1db] { grid-column: span 17; } .col-md-16[data-v-6a63a1db] { grid-column: span 16; } .col-md-15[data-v-6a63a1db] { grid-column: span 15; } .col-md-14[data-v-6a63a1db] { grid-column: span 14; } .col-md-13[data-v-6a63a1db] { grid-column: span 13; } .col-md-12[data-v-6a63a1db] { grid-column: span 12; } .col-md-10[data-v-6a63a1db] { grid-column: span 10; } .col-md-9[data-v-6a63a1db] { grid-column: span 9; } .col-md-8[data-v-6a63a1db] { grid-column: span 8; } .col-md-6[data-v-6a63a1db] { grid-column: span 6; } .col-md-5[data-v-6a63a1db] { grid-column: span 5; } .col-md-4[data-v-6a63a1db] { grid-column: span 4; } .col-md-3[data-v-6a63a1db] { grid-column: span 3; } .col-md-2[data-v-6a63a1db] { grid-column: span 2; } .col-md-1[data-v-6a63a1db] { grid-column: span 1; } .col-md-auto[data-v-6a63a1db] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-6a63a1db] { display: none; } .col-sm-36[data-v-6a63a1db] { grid-column: span 36; } .col-sm-32[data-v-6a63a1db] { grid-column: span 32; } .col-sm-28[data-v-6a63a1db] { grid-column: span 28; } .col-sm-27[data-v-6a63a1db] { grid-column: span 27; } .col-sm-24[data-v-6a63a1db] { grid-column: span 24; } .col-sm-22[data-v-6a63a1db] { grid-column: span 22; } .col-sm-20[data-v-6a63a1db] { grid-column: span 20; } .col-sm-18[data-v-6a63a1db] { grid-column: span 18; } .col-sm-16[data-v-6a63a1db] { grid-column: span 16; } .col-sm-15[data-v-6a63a1db] { grid-column: span 15; } .col-sm-14[data-v-6a63a1db] { grid-column: span 14; } .col-sm-13[data-v-6a63a1db] { grid-column: span 12; } .col-sm-12[data-v-6a63a1db] { grid-column: span 12; } .col-sm-10[data-v-6a63a1db] { grid-column: span 10; } .col-sm-9[data-v-6a63a1db] { grid-column: span 8; } .col-sm-8[data-v-6a63a1db] { grid-column: span 8; } .col-sm-6[data-v-6a63a1db] { grid-column: span 6; } .col-sm-4[data-v-6a63a1db] { grid-column: span 4; } .col-sm-auto[data-v-6a63a1db] { grid-column: auto; } } .fade-enter-active[data-v-6a63a1db] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-6a63a1db] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-6a63a1db], .fade-leave-to[data-v-6a63a1db] { opacity: 0; } .home[data-v-6a63a1db] { display: flex; flex-direction: column; gap: 60px; overflow-x: hidden; padding-bottom: 60px; } .home__block--limited[data-v-6a63a1db] { max-width: 1200px; width: calc(100% - 32px); align-self: center; } .home__cta[data-v-6a63a1db] { max-width: 1000px; width: calc(100% - 32px); align-self: center; } .home__block--category[data-v-6a63a1db] { max-width: 1200px; width: calc(100% - 32px); align-self: center; border-radius: 24px; overflow: hidden; } .home__disclaimer[data-v-6a63a1db] { display: flex; align-items: flex-start; gap: 12px; margin: 0 16px; padding: 16px; background: rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.2); border-radius: 12px; } .home__disclaimer-icon[data-v-6a63a1db] { flex-shrink: 0; width: 20px; height: 20px; color: #f97316; } .home__disclaimer-icon svg[data-v-6a63a1db] { width: 100%; height: 100%; } .home__disclaimer-text[data-v-6a63a1db] { font-size: 12px; color: #b94808; margin: 0; line-height: 1.6; } @media (max-width: 1160px) { .home[data-v-6a63a1db] { gap: 40px; padding-bottom: 40px; } } @media (max-width: 720px) { .home[data-v-6a63a1db] { gap: 24px; padding-bottom: 24px; } .home__block--limited[data-v-6a63a1db], .home__cta[data-v-6a63a1db] { width: 100%; max-width: 100%; border-radius: 0; } .home__block--category[data-v-6a63a1db] { width: 100%; max-width: 100%; border-radius: 0; } } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-96074ced]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-96074ced] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-96074ced] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-96074ced]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-96074ced], .theme-mode-light[data-v-96074ced] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-96074ced], .theme-mode-dark[data-v-96074ced] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-96074ced]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-96074ced]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-96074ced] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-96074ced] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-96074ced]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-96074ced], input[disabled][data-v-96074ced] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-96074ced] { opacity: 0.9; } input[readonly][data-v-96074ced] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-96074ced] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-96074ced]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-96074ced]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-96074ced]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-96074ced] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-96074ced]:nth-child(odd), .list-card-desktop__wrapper[data-v-96074ced]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-96074ced]:nth-child(even), .list-card-desktop__wrapper[data-v-96074ced]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-96074ced]:nth-child(odd), .listCardDesktopWrapper[data-v-96074ced]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-96074ced]:nth-child(even), .listCardDesktopWrapper[data-v-96074ced]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-96074ced] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-96074ced] { cursor: pointer; } .card-layout--selectionnable[data-v-96074ced]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-96074ced] { cursor: auto; } .card-layout--drawer[data-v-96074ced] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-96074ced] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-96074ced] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-96074ced] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-96074ced] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-96074ced] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-96074ced]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-96074ced] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-96074ced] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-96074ced] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-96074ced] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-96074ced] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-96074ced] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-96074ced] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-96074ced] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-96074ced] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-96074ced] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-96074ced] { background-color: #eb1515; } .color-chip--dossiers[data-v-96074ced] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-96074ced] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-96074ced] { background-color: #00a79b; } .color-chip--virements[data-v-96074ced] { background-color: var(--secondary-400); } .color-chip--factures[data-v-96074ced] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-96074ced] { background-color: #eb1515; } .color-recherche-dossiers[data-v-96074ced] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-96074ced] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-96074ced] { background-color: #00a79b; } .color-recherche-virements[data-v-96074ced] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-96074ced] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-96074ced] { color: #00a79b; cursor: pointer; } .scrollable[data-v-96074ced] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-96074ced] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-96074ced] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-96074ced] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-96074ced] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-96074ced] { font-weight: 800; } .grid-cell--column[data-v-96074ced] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-96074ced] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-96074ced] { fill: #00a79b; } .grid-cell--disabled[data-v-96074ced] { color: #cccccc; } .grid-cell--disabled svg[data-v-96074ced] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-96074ced] { white-space: nowrap; } .grid-cell--danger svg[data-v-96074ced] { fill: #eb1515; } .grid-cell--span-1[data-v-96074ced] { grid-column: span 1; } .grid-cell--span-2[data-v-96074ced] { grid-column: span 2; } .grid-cell--span-3[data-v-96074ced] { grid-column: span 3; } .grid-cell--span-4[data-v-96074ced] { grid-column: span 4; } .grid-cell--span-5[data-v-96074ced] { grid-column: span 5; } .grid-cell--span-6[data-v-96074ced] { grid-column: span 6; } .grid-cell--span-7[data-v-96074ced] { grid-column: span 7; } .grid-cell--span-8[data-v-96074ced] { grid-column: span 8; } .grid-cell--span-9[data-v-96074ced] { grid-column: span 9; } .grid-cell--span-10[data-v-96074ced] { grid-column: span 10; } .grid-cell--span-12[data-v-96074ced] { grid-column: span 12; } .grid-cell--span-13[data-v-96074ced] { grid-column: span 13; } .grid-cell--span-14[data-v-96074ced] { grid-column: span 14; } .grid-cell--span-16[data-v-96074ced] { grid-column: span 16; } .grid-cell--span-18[data-v-96074ced] { grid-column: span 18; } .grid-cell--span-20[data-v-96074ced] { grid-column: span 20; } .grid-cell--span-32[data-v-96074ced] { grid-column: span 32; } .grid-cell--span-36[data-v-96074ced] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-96074ced] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-96074ced] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-96074ced] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-96074ced] { justify-content: center !important; } .elem--bold span[data-v-96074ced] { font-weight: 800; } .elem--column[data-v-96074ced] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-96074ced] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-96074ced] { fill: #00a79b; } .elem--clickable[data-v-96074ced]:hover { cursor: pointer; } .elem--disabled[data-v-96074ced] { color: #cccccc; } .elem--disabled svg[data-v-96074ced] { fill: #cccccc; } .elem--nowrap span[data-v-96074ced] { white-space: nowrap; } .elem--danger svg[data-v-96074ced] { fill: #eb1515; } .elem--span-1[data-v-96074ced] { grid-column: span 1; } .elem--span-2[data-v-96074ced] { grid-column: span 2; } .elem--span-3[data-v-96074ced] { grid-column: span 3; } .elem--span-4[data-v-96074ced] { grid-column: span 4; } .elem--span-5[data-v-96074ced] { grid-column: span 5; } .elem--span-6[data-v-96074ced] { grid-column: span 6; } .elem--span-7[data-v-96074ced] { grid-column: span 7; } .elem--span-8[data-v-96074ced] { grid-column: span 8; } .elem--span-9[data-v-96074ced] { grid-column: span 9; } .elem--span-10[data-v-96074ced] { grid-column: span 10; } .elem--span-12[data-v-96074ced] { grid-column: span 12; } .elem--span-13[data-v-96074ced] { grid-column: span 13; } .elem--span-14[data-v-96074ced] { grid-column: span 14; } .elem--span-16[data-v-96074ced] { grid-column: span 16; } .elem--span-18[data-v-96074ced] { grid-column: span 18; } .elem--span-20[data-v-96074ced] { grid-column: span 20; } .elem--span-32[data-v-96074ced] { grid-column: span 32; } .elem--span-36[data-v-96074ced] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-96074ced] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-96074ced] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-96074ced]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-96074ced] { display: flex; } /* flex-direction */ .flex-column[data-v-96074ced] { flex-direction: column; } .flex-row[data-v-96074ced] { flex-direction: row; } /* flex */ .flex-1[data-v-96074ced] { flex: 1 !important; } .flex-2[data-v-96074ced] { flex: 2; } .flex-3[data-v-96074ced] { flex: 3; } .flex-3[data-v-96074ced] { flex: 4; } .flex-5[data-v-96074ced] { flex: 5; } .flex-auto[data-v-96074ced] { flex: auto; } .flex-none[data-v-96074ced] { flex: none; } .flex-content[data-v-96074ced] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-96074ced] { flex-wrap: wrap; } .flex-nowrap[data-v-96074ced] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-96074ced] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-96074ced] { justify-content: flex-start; } .justify-content-end[data-v-96074ced] { justify-content: flex-end; } .justify-content-baseline[data-v-96074ced] { justify-content: baseline; } .justify-content-center[data-v-96074ced] { justify-content: center; } .justify-content-space-between[data-v-96074ced] { justify-content: space-between; } .justify-content-space-around[data-v-96074ced] { justify-content: space-around; } .justify-content-space-evenly[data-v-96074ced] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-96074ced] { align-items: flex-start; } .align-items-flex-end[data-v-96074ced] { align-items: flex-end; } .align-items-stretch[data-v-96074ced] { align-items: stretch; } .align-items-baseline[data-v-96074ced] { align-items: baseline; } .align-items-center[data-v-96074ced] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-96074ced] { align-content: flex-start; } .align-content-flex-end[data-v-96074ced] { align-content: flex-end; } .align-content-center[data-v-96074ced] { align-content: center; } .align-content-stretch[data-v-96074ced] { align-content: stretch; } .align-content-space-between[data-v-96074ced] { align-content: space-between; } .align-content-space-around[data-v-96074ced] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-96074ced] { align-self: flex-start; } .align-self-flex-end[data-v-96074ced] { align-self: flex-end; } .align-self-stretch[data-v-96074ced] { align-self: stretch; } .align-self-flex-baseline[data-v-96074ced] { align-self: baseline; } .align-self-center[data-v-96074ced] { align-self: center; } .align-self-auto[data-v-96074ced] { align-self: auto; } .flex-gap-1[data-v-96074ced] { gap: 4px; } .flex-gap-2[data-v-96074ced] { gap: 8px; } .flex-gap-3[data-v-96074ced] { gap: 12px; } .flex-gap-4[data-v-96074ced] { gap: 16px; } .flex-gap-5[data-v-96074ced] { gap: 20px; } .flex-gap-6[data-v-96074ced] { gap: 24px; } .flex-gap-7[data-v-96074ced] { gap: 28px; } .flex-gap-8[data-v-96074ced] { gap: 32px; } .flex-gap-10[data-v-96074ced] { gap: 40px; } .flex-gap-12[data-v-96074ced] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-96074ced] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-96074ced] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-96074ced] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-96074ced] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-96074ced] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-96074ced] { display: none !important; } } .col-none[data-v-96074ced] { display: none; } .col-auto[data-v-96074ced] { grid-column: auto; } .col-1[data-v-96074ced] { grid-column: span 1; } .col-2[data-v-96074ced] { grid-column: span 2; } .col-3[data-v-96074ced] { grid-column: span 3; } .col-4[data-v-96074ced] { grid-column: span 4; } .col-5[data-v-96074ced] { grid-column: span 5; } .col-6[data-v-96074ced] { grid-column: span 6; } .col-7[data-v-96074ced] { grid-column: span 7; } .col-8[data-v-96074ced] { grid-column: span 8; } .col-9[data-v-96074ced] { grid-column: span 9; } .col-10[data-v-96074ced] { grid-column: span 10; } .col-12[data-v-96074ced] { grid-column: span 12; } .col-13[data-v-96074ced] { grid-column: span 13; } .col-14[data-v-96074ced] { grid-column: span 14; } .col-15[data-v-96074ced] { grid-column: span 15; } .col-16[data-v-96074ced] { grid-column: span 16; } .col-18[data-v-96074ced] { grid-column: span 18; } .col-20[data-v-96074ced] { grid-column: span 20; } .col-22[data-v-96074ced] { grid-column: span 22; } .col-24[data-v-96074ced] { grid-column: span 24; } .col-26[data-v-96074ced] { grid-column: span 26; } .col-27[data-v-96074ced] { grid-column: span 27; } .col-28[data-v-96074ced] { grid-column: span 28; } .col-30[data-v-96074ced] { grid-column: span 30; } .col-36[data-v-96074ced] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-96074ced] { display: none; } .col-md-36[data-v-96074ced] { grid-column: span 36; } .col-md-28[data-v-96074ced] { grid-column: span 28; } .col-md-27[data-v-96074ced] { grid-column: span 27; } .col-md-24[data-v-96074ced] { grid-column: span 24; } .col-md-22[data-v-96074ced] { grid-column: span 22; } .col-md-20[data-v-96074ced] { grid-column: span 20; } .col-md-19[data-v-96074ced] { grid-column: span 19; } .col-md-18[data-v-96074ced] { grid-column: span 18; } .col-md-17[data-v-96074ced] { grid-column: span 17; } .col-md-16[data-v-96074ced] { grid-column: span 16; } .col-md-15[data-v-96074ced] { grid-column: span 15; } .col-md-14[data-v-96074ced] { grid-column: span 14; } .col-md-13[data-v-96074ced] { grid-column: span 13; } .col-md-12[data-v-96074ced] { grid-column: span 12; } .col-md-10[data-v-96074ced] { grid-column: span 10; } .col-md-9[data-v-96074ced] { grid-column: span 9; } .col-md-8[data-v-96074ced] { grid-column: span 8; } .col-md-6[data-v-96074ced] { grid-column: span 6; } .col-md-5[data-v-96074ced] { grid-column: span 5; } .col-md-4[data-v-96074ced] { grid-column: span 4; } .col-md-3[data-v-96074ced] { grid-column: span 3; } .col-md-2[data-v-96074ced] { grid-column: span 2; } .col-md-1[data-v-96074ced] { grid-column: span 1; } .col-md-auto[data-v-96074ced] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-96074ced] { display: none; } .col-sm-36[data-v-96074ced] { grid-column: span 36; } .col-sm-32[data-v-96074ced] { grid-column: span 32; } .col-sm-28[data-v-96074ced] { grid-column: span 28; } .col-sm-27[data-v-96074ced] { grid-column: span 27; } .col-sm-24[data-v-96074ced] { grid-column: span 24; } .col-sm-22[data-v-96074ced] { grid-column: span 22; } .col-sm-20[data-v-96074ced] { grid-column: span 20; } .col-sm-18[data-v-96074ced] { grid-column: span 18; } .col-sm-16[data-v-96074ced] { grid-column: span 16; } .col-sm-15[data-v-96074ced] { grid-column: span 15; } .col-sm-14[data-v-96074ced] { grid-column: span 14; } .col-sm-13[data-v-96074ced] { grid-column: span 12; } .col-sm-12[data-v-96074ced] { grid-column: span 12; } .col-sm-10[data-v-96074ced] { grid-column: span 10; } .col-sm-9[data-v-96074ced] { grid-column: span 8; } .col-sm-8[data-v-96074ced] { grid-column: span 8; } .col-sm-6[data-v-96074ced] { grid-column: span 6; } .col-sm-4[data-v-96074ced] { grid-column: span 4; } .col-sm-auto[data-v-96074ced] { grid-column: auto; } } .fade-enter-active[data-v-96074ced] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-96074ced] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-96074ced], .fade-leave-to[data-v-96074ced] { opacity: 0; } .password-strength[data-v-96074ced] { --transition-duration: 0.3s; --transition-easing: cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-radius: 12px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--transition-duration) var(--transition-easing), max-height var(--transition-duration) var(--transition-easing), padding var(--transition-duration) var(--transition-easing), margin var(--transition-duration) var(--transition-easing); margin-top: 0; padding: 0 16px; } .password-strength--visible[data-v-96074ced] { opacity: 1; max-height: 300px; padding: 16px; margin-top: 12px; } .password-strength__bar[data-v-96074ced] { height: 6px; background: var(--color-neutral-200); border-radius: 3px; overflow: hidden; } .password-strength__fill[data-v-96074ced] { height: 100%; border-radius: 3px; transition: width 0.4s var(--transition-easing), background 0.3s var(--transition-easing); } .password-strength__header[data-v-96074ced] { display: flex; justify-content: space-between; align-items: center; } .password-strength__label[data-v-96074ced] { font-size: 13px; font-weight: 600; transition: color 0.3s var(--transition-easing); } .password-strength__dots[data-v-96074ced] { display: flex; gap: 4px; } .password-strength__dot[data-v-96074ced] { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-300); transition: background 0.3s var(--transition-easing), transform 0.3s var(--transition-easing); } .password-strength__checklist[data-v-96074ced] { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-neutral-200); } .password-strength__criterion[data-v-96074ced] { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-neutral-500); transition: color 0.3s var(--transition-easing); } .password-strength__criterion--valid[data-v-96074ced] { color: var(--color-success-600); } .password-strength__criterion--valid .password-strength__criterion-icon[data-v-96074ced] { background: var(--color-success-100); color: var(--color-success-600); } .password-strength__criterion-icon[data-v-96074ced] { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--color-neutral-200); border-radius: 50%; color: var(--color-neutral-400); transition: background 0.3s var(--transition-easing), color 0.3s var(--transition-easing); } .password-strength__criterion-icon svg[data-v-96074ced] { width: 12px; height: 12px; } .password-strength__criterion-text[data-v-96074ced] { flex: 1; } .expand-enter-active[data-v-96074ced], .expand-leave-active[data-v-96074ced] { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .expand-enter-from[data-v-96074ced], .expand-leave-to[data-v-96074ced] { opacity: 0; max-height: 0; padding-top: 0; } .scale-enter-active[data-v-96074ced], .scale-leave-active[data-v-96074ced] { transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .scale-enter-from[data-v-96074ced], .scale-leave-to[data-v-96074ced] { transform: scale(0); opacity: 0; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-cd9a8fd0]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-cd9a8fd0] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-cd9a8fd0] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-cd9a8fd0]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-cd9a8fd0], .theme-mode-light[data-v-cd9a8fd0] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-cd9a8fd0], .theme-mode-dark[data-v-cd9a8fd0] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-cd9a8fd0]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-cd9a8fd0]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-cd9a8fd0] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-cd9a8fd0] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-cd9a8fd0]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-cd9a8fd0], input[disabled][data-v-cd9a8fd0] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-cd9a8fd0] { opacity: 0.9; } input[readonly][data-v-cd9a8fd0] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-cd9a8fd0] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-cd9a8fd0]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-cd9a8fd0]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-cd9a8fd0]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-cd9a8fd0] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-cd9a8fd0]:nth-child(odd), .list-card-desktop__wrapper[data-v-cd9a8fd0]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-cd9a8fd0]:nth-child(even), .list-card-desktop__wrapper[data-v-cd9a8fd0]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-cd9a8fd0]:nth-child(odd), .listCardDesktopWrapper[data-v-cd9a8fd0]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-cd9a8fd0]:nth-child(even), .listCardDesktopWrapper[data-v-cd9a8fd0]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-cd9a8fd0] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-cd9a8fd0] { cursor: pointer; } .card-layout--selectionnable[data-v-cd9a8fd0]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-cd9a8fd0] { cursor: auto; } .card-layout--drawer[data-v-cd9a8fd0] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-cd9a8fd0] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-cd9a8fd0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-cd9a8fd0] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-cd9a8fd0] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-cd9a8fd0] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-cd9a8fd0]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-cd9a8fd0] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-cd9a8fd0] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-cd9a8fd0] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-cd9a8fd0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-cd9a8fd0] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-cd9a8fd0] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-cd9a8fd0] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-cd9a8fd0] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-cd9a8fd0] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-cd9a8fd0] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-cd9a8fd0] { background-color: #eb1515; } .color-chip--dossiers[data-v-cd9a8fd0] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-cd9a8fd0] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-cd9a8fd0] { background-color: #00a79b; } .color-chip--virements[data-v-cd9a8fd0] { background-color: var(--secondary-400); } .color-chip--factures[data-v-cd9a8fd0] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-cd9a8fd0] { background-color: #eb1515; } .color-recherche-dossiers[data-v-cd9a8fd0] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-cd9a8fd0] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-cd9a8fd0] { background-color: #00a79b; } .color-recherche-virements[data-v-cd9a8fd0] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-cd9a8fd0] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-cd9a8fd0] { color: #00a79b; cursor: pointer; } .scrollable[data-v-cd9a8fd0] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-cd9a8fd0] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-cd9a8fd0] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-cd9a8fd0] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-cd9a8fd0] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-cd9a8fd0] { font-weight: 800; } .grid-cell--column[data-v-cd9a8fd0] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-cd9a8fd0] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-cd9a8fd0] { fill: #00a79b; } .grid-cell--disabled[data-v-cd9a8fd0] { color: #cccccc; } .grid-cell--disabled svg[data-v-cd9a8fd0] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-cd9a8fd0] { white-space: nowrap; } .grid-cell--danger svg[data-v-cd9a8fd0] { fill: #eb1515; } .grid-cell--span-1[data-v-cd9a8fd0] { grid-column: span 1; } .grid-cell--span-2[data-v-cd9a8fd0] { grid-column: span 2; } .grid-cell--span-3[data-v-cd9a8fd0] { grid-column: span 3; } .grid-cell--span-4[data-v-cd9a8fd0] { grid-column: span 4; } .grid-cell--span-5[data-v-cd9a8fd0] { grid-column: span 5; } .grid-cell--span-6[data-v-cd9a8fd0] { grid-column: span 6; } .grid-cell--span-7[data-v-cd9a8fd0] { grid-column: span 7; } .grid-cell--span-8[data-v-cd9a8fd0] { grid-column: span 8; } .grid-cell--span-9[data-v-cd9a8fd0] { grid-column: span 9; } .grid-cell--span-10[data-v-cd9a8fd0] { grid-column: span 10; } .grid-cell--span-12[data-v-cd9a8fd0] { grid-column: span 12; } .grid-cell--span-13[data-v-cd9a8fd0] { grid-column: span 13; } .grid-cell--span-14[data-v-cd9a8fd0] { grid-column: span 14; } .grid-cell--span-16[data-v-cd9a8fd0] { grid-column: span 16; } .grid-cell--span-18[data-v-cd9a8fd0] { grid-column: span 18; } .grid-cell--span-20[data-v-cd9a8fd0] { grid-column: span 20; } .grid-cell--span-32[data-v-cd9a8fd0] { grid-column: span 32; } .grid-cell--span-36[data-v-cd9a8fd0] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-cd9a8fd0] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-cd9a8fd0] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-cd9a8fd0] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-cd9a8fd0] { justify-content: center !important; } .elem--bold span[data-v-cd9a8fd0] { font-weight: 800; } .elem--column[data-v-cd9a8fd0] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-cd9a8fd0] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-cd9a8fd0] { fill: #00a79b; } .elem--clickable[data-v-cd9a8fd0]:hover { cursor: pointer; } .elem--disabled[data-v-cd9a8fd0] { color: #cccccc; } .elem--disabled svg[data-v-cd9a8fd0] { fill: #cccccc; } .elem--nowrap span[data-v-cd9a8fd0] { white-space: nowrap; } .elem--danger svg[data-v-cd9a8fd0] { fill: #eb1515; } .elem--span-1[data-v-cd9a8fd0] { grid-column: span 1; } .elem--span-2[data-v-cd9a8fd0] { grid-column: span 2; } .elem--span-3[data-v-cd9a8fd0] { grid-column: span 3; } .elem--span-4[data-v-cd9a8fd0] { grid-column: span 4; } .elem--span-5[data-v-cd9a8fd0] { grid-column: span 5; } .elem--span-6[data-v-cd9a8fd0] { grid-column: span 6; } .elem--span-7[data-v-cd9a8fd0] { grid-column: span 7; } .elem--span-8[data-v-cd9a8fd0] { grid-column: span 8; } .elem--span-9[data-v-cd9a8fd0] { grid-column: span 9; } .elem--span-10[data-v-cd9a8fd0] { grid-column: span 10; } .elem--span-12[data-v-cd9a8fd0] { grid-column: span 12; } .elem--span-13[data-v-cd9a8fd0] { grid-column: span 13; } .elem--span-14[data-v-cd9a8fd0] { grid-column: span 14; } .elem--span-16[data-v-cd9a8fd0] { grid-column: span 16; } .elem--span-18[data-v-cd9a8fd0] { grid-column: span 18; } .elem--span-20[data-v-cd9a8fd0] { grid-column: span 20; } .elem--span-32[data-v-cd9a8fd0] { grid-column: span 32; } .elem--span-36[data-v-cd9a8fd0] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-cd9a8fd0] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-cd9a8fd0] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-cd9a8fd0]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-cd9a8fd0] { display: flex; } /* flex-direction */ .flex-column[data-v-cd9a8fd0] { flex-direction: column; } .flex-row[data-v-cd9a8fd0] { flex-direction: row; } /* flex */ .flex-1[data-v-cd9a8fd0] { flex: 1 !important; } .flex-2[data-v-cd9a8fd0] { flex: 2; } .flex-3[data-v-cd9a8fd0] { flex: 3; } .flex-3[data-v-cd9a8fd0] { flex: 4; } .flex-5[data-v-cd9a8fd0] { flex: 5; } .flex-auto[data-v-cd9a8fd0] { flex: auto; } .flex-none[data-v-cd9a8fd0] { flex: none; } .flex-content[data-v-cd9a8fd0] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-cd9a8fd0] { flex-wrap: wrap; } .flex-nowrap[data-v-cd9a8fd0] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-cd9a8fd0] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-cd9a8fd0] { justify-content: flex-start; } .justify-content-end[data-v-cd9a8fd0] { justify-content: flex-end; } .justify-content-baseline[data-v-cd9a8fd0] { justify-content: baseline; } .justify-content-center[data-v-cd9a8fd0] { justify-content: center; } .justify-content-space-between[data-v-cd9a8fd0] { justify-content: space-between; } .justify-content-space-around[data-v-cd9a8fd0] { justify-content: space-around; } .justify-content-space-evenly[data-v-cd9a8fd0] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-cd9a8fd0] { align-items: flex-start; } .align-items-flex-end[data-v-cd9a8fd0] { align-items: flex-end; } .align-items-stretch[data-v-cd9a8fd0] { align-items: stretch; } .align-items-baseline[data-v-cd9a8fd0] { align-items: baseline; } .align-items-center[data-v-cd9a8fd0] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-cd9a8fd0] { align-content: flex-start; } .align-content-flex-end[data-v-cd9a8fd0] { align-content: flex-end; } .align-content-center[data-v-cd9a8fd0] { align-content: center; } .align-content-stretch[data-v-cd9a8fd0] { align-content: stretch; } .align-content-space-between[data-v-cd9a8fd0] { align-content: space-between; } .align-content-space-around[data-v-cd9a8fd0] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-cd9a8fd0] { align-self: flex-start; } .align-self-flex-end[data-v-cd9a8fd0] { align-self: flex-end; } .align-self-stretch[data-v-cd9a8fd0] { align-self: stretch; } .align-self-flex-baseline[data-v-cd9a8fd0] { align-self: baseline; } .align-self-center[data-v-cd9a8fd0] { align-self: center; } .align-self-auto[data-v-cd9a8fd0] { align-self: auto; } .flex-gap-1[data-v-cd9a8fd0] { gap: 4px; } .flex-gap-2[data-v-cd9a8fd0] { gap: 8px; } .flex-gap-3[data-v-cd9a8fd0] { gap: 12px; } .flex-gap-4[data-v-cd9a8fd0] { gap: 16px; } .flex-gap-5[data-v-cd9a8fd0] { gap: 20px; } .flex-gap-6[data-v-cd9a8fd0] { gap: 24px; } .flex-gap-7[data-v-cd9a8fd0] { gap: 28px; } .flex-gap-8[data-v-cd9a8fd0] { gap: 32px; } .flex-gap-10[data-v-cd9a8fd0] { gap: 40px; } .flex-gap-12[data-v-cd9a8fd0] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-cd9a8fd0] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-cd9a8fd0] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-cd9a8fd0] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-cd9a8fd0] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-cd9a8fd0] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-cd9a8fd0] { display: none !important; } } .col-none[data-v-cd9a8fd0] { display: none; } .col-auto[data-v-cd9a8fd0] { grid-column: auto; } .col-1[data-v-cd9a8fd0] { grid-column: span 1; } .col-2[data-v-cd9a8fd0] { grid-column: span 2; } .col-3[data-v-cd9a8fd0] { grid-column: span 3; } .col-4[data-v-cd9a8fd0] { grid-column: span 4; } .col-5[data-v-cd9a8fd0] { grid-column: span 5; } .col-6[data-v-cd9a8fd0] { grid-column: span 6; } .col-7[data-v-cd9a8fd0] { grid-column: span 7; } .col-8[data-v-cd9a8fd0] { grid-column: span 8; } .col-9[data-v-cd9a8fd0] { grid-column: span 9; } .col-10[data-v-cd9a8fd0] { grid-column: span 10; } .col-12[data-v-cd9a8fd0] { grid-column: span 12; } .col-13[data-v-cd9a8fd0] { grid-column: span 13; } .col-14[data-v-cd9a8fd0] { grid-column: span 14; } .col-15[data-v-cd9a8fd0] { grid-column: span 15; } .col-16[data-v-cd9a8fd0] { grid-column: span 16; } .col-18[data-v-cd9a8fd0] { grid-column: span 18; } .col-20[data-v-cd9a8fd0] { grid-column: span 20; } .col-22[data-v-cd9a8fd0] { grid-column: span 22; } .col-24[data-v-cd9a8fd0] { grid-column: span 24; } .col-26[data-v-cd9a8fd0] { grid-column: span 26; } .col-27[data-v-cd9a8fd0] { grid-column: span 27; } .col-28[data-v-cd9a8fd0] { grid-column: span 28; } .col-30[data-v-cd9a8fd0] { grid-column: span 30; } .col-36[data-v-cd9a8fd0] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-cd9a8fd0] { display: none; } .col-md-36[data-v-cd9a8fd0] { grid-column: span 36; } .col-md-28[data-v-cd9a8fd0] { grid-column: span 28; } .col-md-27[data-v-cd9a8fd0] { grid-column: span 27; } .col-md-24[data-v-cd9a8fd0] { grid-column: span 24; } .col-md-22[data-v-cd9a8fd0] { grid-column: span 22; } .col-md-20[data-v-cd9a8fd0] { grid-column: span 20; } .col-md-19[data-v-cd9a8fd0] { grid-column: span 19; } .col-md-18[data-v-cd9a8fd0] { grid-column: span 18; } .col-md-17[data-v-cd9a8fd0] { grid-column: span 17; } .col-md-16[data-v-cd9a8fd0] { grid-column: span 16; } .col-md-15[data-v-cd9a8fd0] { grid-column: span 15; } .col-md-14[data-v-cd9a8fd0] { grid-column: span 14; } .col-md-13[data-v-cd9a8fd0] { grid-column: span 13; } .col-md-12[data-v-cd9a8fd0] { grid-column: span 12; } .col-md-10[data-v-cd9a8fd0] { grid-column: span 10; } .col-md-9[data-v-cd9a8fd0] { grid-column: span 9; } .col-md-8[data-v-cd9a8fd0] { grid-column: span 8; } .col-md-6[data-v-cd9a8fd0] { grid-column: span 6; } .col-md-5[data-v-cd9a8fd0] { grid-column: span 5; } .col-md-4[data-v-cd9a8fd0] { grid-column: span 4; } .col-md-3[data-v-cd9a8fd0] { grid-column: span 3; } .col-md-2[data-v-cd9a8fd0] { grid-column: span 2; } .col-md-1[data-v-cd9a8fd0] { grid-column: span 1; } .col-md-auto[data-v-cd9a8fd0] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-cd9a8fd0] { display: none; } .col-sm-36[data-v-cd9a8fd0] { grid-column: span 36; } .col-sm-32[data-v-cd9a8fd0] { grid-column: span 32; } .col-sm-28[data-v-cd9a8fd0] { grid-column: span 28; } .col-sm-27[data-v-cd9a8fd0] { grid-column: span 27; } .col-sm-24[data-v-cd9a8fd0] { grid-column: span 24; } .col-sm-22[data-v-cd9a8fd0] { grid-column: span 22; } .col-sm-20[data-v-cd9a8fd0] { grid-column: span 20; } .col-sm-18[data-v-cd9a8fd0] { grid-column: span 18; } .col-sm-16[data-v-cd9a8fd0] { grid-column: span 16; } .col-sm-15[data-v-cd9a8fd0] { grid-column: span 15; } .col-sm-14[data-v-cd9a8fd0] { grid-column: span 14; } .col-sm-13[data-v-cd9a8fd0] { grid-column: span 12; } .col-sm-12[data-v-cd9a8fd0] { grid-column: span 12; } .col-sm-10[data-v-cd9a8fd0] { grid-column: span 10; } .col-sm-9[data-v-cd9a8fd0] { grid-column: span 8; } .col-sm-8[data-v-cd9a8fd0] { grid-column: span 8; } .col-sm-6[data-v-cd9a8fd0] { grid-column: span 6; } .col-sm-4[data-v-cd9a8fd0] { grid-column: span 4; } .col-sm-auto[data-v-cd9a8fd0] { grid-column: auto; } } .fade-enter-active[data-v-cd9a8fd0] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-cd9a8fd0] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-cd9a8fd0], .fade-leave-to[data-v-cd9a8fd0] { opacity: 0; } .toast-container[data-v-cd9a8fd0] { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 5000; pointer-events: none; } .toast-container[data-v-cd9a8fd0] > * { pointer-events: auto; } /* ══════════════════════════════════════════════════════════════ COLORS SYSTEM — FastPeptides Design Tokens ══════════════════════════════════════════════════════════════ Ce fichier définit toutes les couleurs du design system. Chaque couleur a une variable LESS (@color) et une variable CSS (--color). Les variantes RGB (--color-rgb) permettent l'utilisation avec rgba(). Usage: - LESS: background: @danger-500; - CSS: background: var(--danger-500); - RGBA: background: rgba(var(--danger-500-rgb), 0.5); ══════════════════════════════════════════════════════════════ */ /* Thèmes CSS (primary/secondary colors: blue/brown) */ /* THEMES — Variables regroupées dans des classes */ /* Utility mixin for exporting RGB triplets */ /* Primary — Neural Blue */ /* Primary — Beige / Marron clair */ /* Thème par défaut (aucune classe sur ) */ [data-v-d4382f28]:root { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BLUE */ .theme-blue[data-v-d4382f28] { /* Primary */ /* Secondary — Neural Black & Dark */ /* Export en variables CSS */ --primary-950: #0e2a8c; --primary-900: #1439b8; --primary-800: #1b48d9; --primary-700: #2664ec; --primary-600: #3d75ee; --primary-500: #5e8cf1; --primary-400: #8daef5; --primary-300: #bccff9; --primary-200: #ebf1fd; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 14, 42, 140; --primary-900-rgb: 20, 57, 184; --primary-800-rgb: 27, 72, 217; --primary-700-rgb: 38, 100, 236; --primary-600-rgb: 61.447033898305094, 116.74788135593214, 238.05296610169492; --primary-500-rgb: 94.2728813559322, 140.19491525423723, 240.92711864406778; --primary-400-rgb: 141.16694915254234, 173.69067796610165, 245.03305084745762; --primary-300-rgb: 188.06101694915247, 207.18644067796603, 249.1389830508475; --primary-200-rgb: 234.9550847457627, 240.6822033898305, 253.24491525423733; --primary-100-rgb: 255, 255, 254.99999999999997; --primary-50-rgb: 255, 255, 254.99999999999997; --primary-0-rgb: 255, 255, 254.99999999999997; --secondary-1000: #000000; --secondary-950: #0a0d14; --secondary-900: #111727; --secondary-800: #1a243c; --secondary-700: #243052; --secondary-600: #2d3d67; --secondary-500: #384b80; --secondary-400: #4760a3; --secondary-300: #637bbb; --secondary-200: #8699ca; --secondary-100: #aab7da; --secondary-50: #cdd5e9; --secondary-0: #cdd5e9; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 10, 13, 20; --secondary-900-rgb: 17, 23, 39; --secondary-800-rgb: 26.289285714285715, 35.567857142857136, 60.31071428571428; --secondary-700-rgb: 35.578571428571436, 48.13571428571428, 81.62142857142857; --secondary-600-rgb: 44.86785714285715, 60.703571428571415, 102.93214285714285; --secondary-500-rgb: 55.705357142857146, 75.36607142857142, 127.79464285714286; --secondary-400-rgb: 71.1875, 96.31249999999997, 163.3125; --secondary-300-rgb: 98.65178571428571, 122.70535714285711, 186.8482142857143; --secondary-200-rgb: 134.16964285714286, 152.75892857142856, 202.3303571428572; --secondary-100-rgb: 169.68750000000003, 182.8125, 217.81249999999997; --secondary-50-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; --secondary-0-rgb: 205.2053571428572, 212.86607142857147, 233.29464285714283; } /* Thème BROWN */ .theme-brown[data-v-d4382f28] { /* Primary */ /* Secondary — Brun foncé neutre */ /* Export en variables CSS */ --primary-950: #5c4326; --primary-900: #775c38; --primary-800: #a07a4f; --primary-700: #c9a97a; --primary-600: #d0b58c; --primary-500: #dbc5a6; --primary-400: #e9ddca; --primary-300: #f8f4ee; --primary-200: #ffffff; --primary-100: #ffffff; --primary-50: #ffffff; --primary-0: #ffffff; --primary-950-rgb: 92, 67, 38; --primary-900-rgb: 119, 92, 56; --primary-800-rgb: 160, 122, 79; --primary-700-rgb: 201, 169, 122; --primary-600-rgb: 208.36363636363637, 180.72727272727272, 140.13636363636363; --primary-500-rgb: 218.67272727272731, 197.14545454545453, 165.52727272727267; --primary-400-rgb: 233.4, 220.59999999999997, 201.79999999999998; --primary-300-rgb: 248.12727272727275, 244.05454545454546, 238.07272727272726; --primary-200-rgb: 255, 255, 255; --primary-100-rgb: 255, 255, 255; --primary-50-rgb: 255, 255, 255; --primary-0-rgb: 255, 255, 255; --secondary-1000: #000000; --secondary-950: #1e140d; --secondary-900: #2f2115; --secondary-800: #4b3424; --secondary-700: #6d4c35; --secondary-600: #895f42; --secondary-500: #a5724f; --secondary-400: #b98d6d; --secondary-300: #caa890; --secondary-200: #dac3b2; --secondary-100: #ebded5; --secondary-50: #faf6f4; --secondary-0: #faf6f4; --secondary-1000-rgb: 0, 0, 0; --secondary-950-rgb: 30, 20, 13; --secondary-900-rgb: 47, 33, 21; --secondary-800-rgb: 75, 52, 36; --secondary-700-rgb: 109.45945945945945, 75.89189189189189, 52.54054054054054; --secondary-600-rgb: 137.02702702702703, 95.0054054054054, 65.77297297297297; --secondary-500-rgb: 164.5945945945946, 114.11891891891892, 79.0054054054054; --secondary-400-rgb: 185.14054054054054, 140.5081081081081, 109.45945945945947; --secondary-300-rgb: 201.68108108108106, 167.61621621621626, 143.91891891891896; --secondary-200-rgb: 218.22162162162164, 194.72432432432433, 178.3783783783784; --secondary-100-rgb: 234.76216216216216, 221.83243243243243, 212.83783783783787; --secondary-50-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; --secondary-0-rgb: 249.64864864864867, 246.22972972972974, 243.85135135135135; } /* Thème sémantique (light/dark mode) */ /* ══════════════════════════════════════════════════════════════ SEMANTIC THEME SYSTEM — Light/Dark Mode ══════════════════════════════════════════════════════════════ Ce fichier définit les variables sémantiques qui s'adaptent automatiquement au thème light/dark via l'attribut data-theme sur l'élément . Usage: - CSS: color: var(--text-primary); - CSS: background: var(--bg-surface); - CSS: border-color: var(--border-default); Structure: - html[data-theme="light"] → Variables pour thème clair - html[data-theme="dark"] → Variables pour thème sombre - :root (fallback) → Thème clair par défaut ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ MIXIN — Theme Definition ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — Default Theme (Light) ══════════════════════════════════════════════════════════════ */ [data-v-d4382f28]:root { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } /* ══════════════════════════════════════════════════════════════ THEME SELECTORS ══════════════════════════════════════════════════════════════ */ html[data-theme="light"][data-v-d4382f28], .theme-mode-light[data-v-d4382f28] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Light Mode ═══════════════════════════════════════════════════════════════ En light mode, la page est blanche et les cards sont légèrement grisées pour créer du contraste visible. Hiérarchie (de page vers floating) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (white) │ │ └─ Level 1 : Cards, ContentBlocks (neutral-50, grisé) │ │ └─ Level 2 : Nested elements (neutral-100) │ │ └─ Level 3 : Inputs, Dropdowns (white + focus) │ └─────────────────────────────────────────────────────────────┘ Règle : Cards grisées sur fond blanc = contraste visible. ═══════════════════════════════════════════════════════════════ */ --surface-0: #ffffff; --surface-1: #edf1f5; --surface-2: #e2e7ef; --surface-3: #ffffff; /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.15; --bg-image-opacity-quality: 0.12; --bg-image-opacity-newsletter: 0.15; --bg-image-opacity-cta: 0.2; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #2b303a; --text-secondary: #4d5462; --text-tertiary: #647184; --text-muted: #647184; --text-disabled: #94a2b8; --text-inverse: #ffffff; --text-primary-rgb: 43, 48, 58; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: #e2e7ef; --bg-surface-tertiary: #cdd5e0; --bg-elevated: var(--surface-1); --bg-inverse: #2b303a; --bg-subtle: #e2e7ef; --bg-page-rgb: 255, 255, 255; --bg-surface-rgb: 237, 241, 245; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.04); --border-default: #e2e7ef; --border-strong: #cdd5e0; --border-inverse: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.4); --selection-bg: rgba(var(--primary-500-rgb), 0.15); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: #edf1f5; --input-border: #cdd5e0; --input-border-hover: #b4bfce; --input-border-focus: var(--primary-500); --input-text: #2b303a; --input-placeholder: #94a2b8; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: #e2e7ef; --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --dropdown-item-hover: #f8f9fb; --dropdown-item-active: rgba(var(--primary-500-rgb), 0.1); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.5); --modal-bg: var(--surface-1); --modal-header-bg: var(--surface-2); --modal-border: #e2e7ef; /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: #cdd5e0; --scrollbar-thumb-hover: #b4bfce; /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: #e2e7ef; --skeleton-shine: #edf1f5; /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En light mode: légèrement plus clair mais reste sombre ───────────────────────────────────────────────────────────── */ --chrome-bg: #1d2438; --chrome-bg-secondary: #293149; --chrome-bg-gradient-start: #1d2438; --chrome-bg-gradient-end: #111727; --chrome-text: #edf1f5; --chrome-text-muted: rgba(255, 255, 255, 0.55); --chrome-text-subtle: rgba(255, 255, 255, 0.4); --chrome-border: rgba(255, 255, 255, 0.08); --chrome-border-subtle: rgba(255, 255, 255, 0.05); --chrome-hover: rgba(255, 255, 255, 0.06); --chrome-active: rgba(255, 255, 255, 0.1); --chrome-glow: rgba(var(--primary-500-rgb), 0.15); --footer-bg-start: #111727; --footer-bg-end: #0a0d14; } html[data-theme="dark"][data-v-d4382f28], .theme-mode-dark[data-v-d4382f28] { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } /* ══════════════════════════════════════════════════════════════ SYSTEM PREFERENCE — Auto detect ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html[data-v-d4382f28]:not([data-theme]) { /* ═══════════════════════════════════════════════════════════════ SURFACE ELEVATION SYSTEM — Dark Mode ═══════════════════════════════════════════════════════════════ Système de niveaux de surface pour gérer automatiquement le contraste entre conteneurs imbriqués. Hiérarchie (du plus foncé au plus clair) : ┌─────────────────────────────────────────────────────────────┐ │ Level 0 : Page background (le plus foncé) │ │ └─ Level 1 : Cards, ContentBlocks, Modals │ │ └─ Level 2 : Éléments imbriqués, nested cards │ │ └─ Level 3 : Inputs, Dropdowns, Floating (↑) │ └─────────────────────────────────────────────────────────────┘ Règle : Chaque niveau est PLUS CLAIR que son parent. ═══════════════════════════════════════════════════════════════ */ --surface-0: var(--secondary-950); --surface-1: var(--secondary-800); --surface-2: var(--secondary-600); --surface-3: var(--secondary-500); /* ───────────────────────────────────────────────────────────── BACKGROUND IMAGE OPACITY — Per Section Ces variables contrôlent l'opacité des images de fond ───────────────────────────────────────────────────────────── */ --bg-image-opacity-podium: 0.4; --bg-image-opacity-quality: 0.35; --bg-image-opacity-newsletter: 0.4; --bg-image-opacity-cta: 0.5; /* ───────────────────────────────────────────────────────────── TEXT COLORS ───────────────────────────────────────────────────────────── */ --text-primary: #f8f9fb; --text-secondary: #e2e7ef; --text-tertiary: #cdd5e0; --text-muted: #cdd5e0; --text-disabled: #b4bfce; --text-inverse: #2b303a; --text-primary-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── BACKGROUND COLORS — Mapped to Surface System ───────────────────────────────────────────────────────────── */ --bg-page: var(--surface-0); --bg-surface: var(--surface-1); --bg-surface-secondary: var(--secondary-700); --bg-surface-tertiary: var(--surface-2); --bg-elevated: var(--surface-2); --bg-inverse: #ffffff; --bg-subtle: rgba(255, 255, 255, 0.03); --bg-page-rgb: 10, 13, 20; --bg-surface-rgb: 29, 36, 56; /* ───────────────────────────────────────────────────────────── BORDER COLORS ───────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-inverse: rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────────────────────────── SHADOW COLORS ───────────────────────────────────────────────────────────── */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* ───────────────────────────────────────────────────────────── INTERACTIVE STATES ───────────────────────────────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(var(--primary-500-rgb), 0.5); --selection-bg: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── INPUT COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --input-bg: var(--surface-3); --input-bg-disabled: var(--surface-1); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); --input-border-focus: var(--primary-500); --input-text: #f8f9fb; --input-placeholder: #b4bfce; /* ───────────────────────────────────────────────────────────── DROPDOWN/MENU COLORS — Uses Surface Level 3 (floating) ───────────────────────────────────────────────────────────── */ --dropdown-bg: var(--surface-3); --dropdown-border: rgba(255, 255, 255, 0.12); --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --dropdown-item-hover: rgba(255, 255, 255, 0.08); --dropdown-item-active: rgba(var(--primary-500-rgb), 0.25); /* ───────────────────────────────────────────────────────────── MODAL COLORS — Uses Surface Levels ───────────────────────────────────────────────────────────── */ --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-bg: var(--surface-1); --modal-header-bg: var(--secondary-900); --modal-border: rgba(255, 255, 255, 0.1); /* ───────────────────────────────────────────────────────────── SCROLLBAR COLORS ───────────────────────────────────────────────────────────── */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); /* ───────────────────────────────────────────────────────────── SKELETON/LOADING ───────────────────────────────────────────────────────────── */ --skeleton-base: var(--secondary-700); --skeleton-shine: var(--secondary-600); /* ───────────────────────────────────────────────────────────── CHROME (Header/Footer) — Subtle Shift Approach En dark mode: plus profond et contrasté ───────────────────────────────────────────────────────────── */ --chrome-bg: var(--secondary-950); --chrome-bg-secondary: var(--secondary-900); --chrome-bg-gradient-start: var(--secondary-900); --chrome-bg-gradient-end: var(--secondary-950); --chrome-text: #f8f9fb; --chrome-text-muted: rgba(255, 255, 255, 0.75); --chrome-text-subtle: rgba(255, 255, 255, 0.6); --chrome-border: rgba(255, 255, 255, 0.1); --chrome-border-subtle: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-active: rgba(255, 255, 255, 0.12); --chrome-glow: rgba(var(--primary-500-rgb), 0.2); --footer-bg-start: #08080c; --footer-bg-end: #040406; } } /* ══════════════════════════════════════════════════════════════ UTILITY MIXIN — Generate RGB variables ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ ROOT — CSS Custom Properties ══════════════════════════════════════════════════════════════ */ [data-v-d4382f28]:root { /* ───────────────────────────────────────────────────────────── DANGER (Red) ───────────────────────────────────────────────────────────── */ --danger-900: #881414; --danger-900-rgb: 136, 20, 20; --danger-800: #a50f0f; --danger-800-rgb: 165, 15, 15; --danger-700: #993a3a; --danger-700-rgb: 153, 58, 58; --danger-600: #eb1515; --danger-600-rgb: 235, 21, 21; --danger-500: #ff4d4d; --danger-500-rgb: 255, 77, 77; --danger-400: #ff6464; --danger-400-rgb: 255, 100, 100; --danger-300: #ff9d9d; --danger-300-rgb: 255, 157, 157; --danger-200: #ffc5c5; --danger-200-rgb: 255, 197, 197; --danger-100: #ffdfdf; --danger-100-rgb: 255, 223, 223; --danger-50: #fff1f1; --danger-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── WARNING (Orange) ───────────────────────────────────────────────────────────── */ --warning-900: #7a2e05; --warning-900-rgb: 122, 46, 5; --warning-800: #9a3b07; --warning-800-rgb: 154, 59, 7; --warning-700: #b94808; --warning-700-rgb: 185, 72, 8; --warning-600: #d9580a; --warning-600-rgb: 217, 88, 10; --warning-500: #f97316; --warning-500-rgb: 249, 115, 22; --warning-400: #fb923c; --warning-400-rgb: 251, 146, 60; --warning-300: #fdba74; --warning-300-rgb: 253, 186, 116; --warning-200: #fed7aa; --warning-200-rgb: 254, 215, 170; --warning-100: #ffedd5; --warning-100-rgb: 255, 237, 213; --warning-50: #fff7ed; --warning-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── NEUTRAL (Neural Gray) ───────────────────────────────────────────────────────────── */ --neutral-950: #1a1e26; --neutral-950-rgb: 26, 30, 38; --neutral-900: #2b303a; --neutral-900-rgb: 43, 48, 58; --neutral-800: #3c414c; --neutral-800-rgb: 60, 65, 76; --neutral-700: #4d5462; --neutral-700-rgb: 77, 84, 98; --neutral-600: #647184; --neutral-600-rgb: 100, 113, 132; --neutral-500: #94a2b8; --neutral-500-rgb: 148, 162, 184; --neutral-400: #b4bfce; --neutral-400-rgb: 180, 191, 206; --neutral-300: #cdd5e0; --neutral-300-rgb: 205, 213, 224; --neutral-200: #e2e7ef; --neutral-200-rgb: 226, 231, 239; --neutral-100: #edf1f5; --neutral-100-rgb: 237, 241, 245; --neutral-50: #f8f9fb; --neutral-50-rgb: 248, 249, 251; /* ───────────────────────────────────────────────────────────── SUCCESS (Green) ───────────────────────────────────────────────────────────── */ --success-900: #184f30; --success-900-rgb: 24, 79, 48; --success-800: #1b6038; --success-800-rgb: 27, 96, 56; --success-700: #1c7942; --success-700-rgb: 28, 121, 66; --success-600: #1f9a50; --success-600-rgb: 31, 154, 80; --success-500: #2cbb66; --success-500-rgb: 44, 187, 102; --success-400: #3ccf77; --success-400-rgb: 60, 207, 119; --success-300: #8de8b1; --success-300-rgb: 141, 232, 177; --success-200: #bff3d3; --success-200-rgb: 191, 243, 211; --success-100: #ddfae6; --success-100-rgb: 221, 250, 230; --success-50: #f1fcf4; --success-50-rgb: 241, 252, 244; /* ───────────────────────────────────────────────────────────── INFO (Blue) ───────────────────────────────────────────────────────────── */ --info-950: #0a2647; --info-950-rgb: 10, 38, 71; --info-900: #064874; --info-900-rgb: 6, 72, 116; --info-800: #00568d; --info-800-rgb: 0, 86, 141; --info-700: #046498; --info-700-rgb: 4, 100, 152; --info-600: #0080d4; --info-600-rgb: 0, 128, 212; --info-500: #14adff; --info-500-rgb: 20, 173, 255; --info-400: #2cbaff; --info-400-rgb: 44, 186, 255; --info-300: #75d1ff; --info-300-rgb: 117, 209, 255; --info-200: #b6e4ff; --info-200-rgb: 182, 228, 255; --info-100: #d7edff; --info-100-rgb: 215, 237, 255; --info-50: #eff8ff; --info-50-rgb: 239, 248, 255; /* ───────────────────────────────────────────────────────────── PERSIAN GREEN ───────────────────────────────────────────────────────────── */ --persian-950: #003333; --persian-950-rgb: 0, 51, 51; --persian-900: #0d5450; --persian-900-rgb: 13, 84, 80; --persian-800: #0a6561; --persian-800-rgb: 10, 101, 97; --persian-700: #058078; --persian-700-rgb: 5, 128, 120; --persian-600: #00a79b; --persian-600-rgb: 0, 167, 155; --persian-500: #04c8b5; --persian-500-rgb: 4, 200, 181; --persian-400: #1de4ce; --persian-400-rgb: 29, 228, 206; --persian-300: #51f7e0; --persian-300-rgb: 81, 247, 224; --persian-200: #90ffeb; --persian-200-rgb: 144, 255, 235; --persian-100: #c7fff5; --persian-100-rgb: 199, 255, 245; --persian-50: #effefb; --persian-50-rgb: 239, 254, 251; /* ───────────────────────────────────────────────────────────── INDIGO ───────────────────────────────────────────────────────────── */ --indigo-950: #10343c; --indigo-950-rgb: 16, 52, 60; --indigo-900: #1d4851; --indigo-900-rgb: 29, 72, 81; --indigo-800: #215f69; --indigo-800-rgb: 33, 95, 105; --indigo-700: #1f747f; --indigo-700-rgb: 31, 116, 127; --indigo-600: #1e919c; --indigo-600-rgb: 30, 145, 156; --indigo-500: #20b2ba; --indigo-500-rgb: 32, 178, 186; --indigo-400: #3ccfd4; --indigo-400-rgb: 60, 207, 212; --indigo-300: #7ae5e6; --indigo-300-rgb: 122, 229, 230; --indigo-200: #b0f0f1; --indigo-200-rgb: 176, 240, 241; --indigo-100: #d5f8f8; --indigo-100-rgb: 213, 248, 248; --indigo-50: #eefdfd; --indigo-50-rgb: 238, 253, 253; /* ───────────────────────────────────────────────────────────── PINK ───────────────────────────────────────────────────────────── */ --pink-950: #4e031d; --pink-950-rgb: 78, 3, 29; --pink-900: #8b103f; --pink-900-rgb: 139, 16, 63; --pink-800: #a30e42; --pink-800-rgb: 163, 14, 66; --pink-700: #c30d46; --pink-700-rgb: 195, 13, 70; --pink-600: #e71754; --pink-600-rgb: 231, 23, 84; --pink-500: #f93a69; --pink-500-rgb: 249, 58, 105; --pink-400: #ff708f; --pink-400-rgb: 255, 112, 143; --pink-300: #ffa1b4; --pink-300-rgb: 255, 161, 180; --pink-200: #ffccd6; --pink-200-rgb: 255, 204, 214; --pink-100: #ffe3e7; --pink-100-rgb: 255, 227, 231; --pink-50: #fff1f3; --pink-50-rgb: 255, 241, 243; /* ───────────────────────────────────────────────────────────── BLUE (Ghost) ───────────────────────────────────────────────────────────── */ --blue-900: #012133; --blue-900-rgb: 1, 33, 51; --blue-800: #034366; --blue-800-rgb: 3, 67, 102; --blue-700: #046498; --blue-700-rgb: 4, 100, 152; --blue-600: #0686cb; --blue-600-rgb: 6, 134, 203; --blue-500: #07a7fe; --blue-500-rgb: 7, 167, 254; --blue-400: #39b9fe; --blue-400-rgb: 57, 185, 254; --blue-300: #6acafe; --blue-300-rgb: 106, 202, 254; --blue-200: #9cdcff; --blue-200-rgb: 156, 220, 255; --blue-100: #ceeeff; --blue-100-rgb: 206, 238, 255; --blue-50: #e7f7ff; --blue-50-rgb: 231, 247, 255; /* ───────────────────────────────────────────────────────────── ORANGE ───────────────────────────────────────────────────────────── */ --orange-950: #451205; --orange-950-rgb: 69, 18, 5; --orange-900: #7f290f; --orange-900-rgb: 127, 41, 15; --orange-800: #9e2f0e; --orange-800-rgb: 158, 47, 14; --orange-700: #c73b07; --orange-700-rgb: 199, 59, 7; --orange-600: #f05106; --orange-600-rgb: 240, 81, 6; --orange-500: #ff6707; --orange-500-rgb: 255, 103, 7; --orange-400: #ff8c37; --orange-400-rgb: 255, 140, 55; --orange-300: #ffb770; --orange-300-rgb: 255, 183, 112; --orange-200: #ffd5a8; --orange-200-rgb: 255, 213, 168; --orange-100: #ffecd4; --orange-100-rgb: 255, 236, 212; --orange-50: #fff7ed; --orange-50-rgb: 255, 247, 237; /* ───────────────────────────────────────────────────────────── YELLOW ───────────────────────────────────────────────────────────── */ --yellow-950: #481b00; --yellow-950-rgb: 72, 27, 0; --yellow-900: #7c360b; --yellow-900-rgb: 124, 54, 11; --yellow-800: #984208; --yellow-800-rgb: 152, 66, 8; --yellow-700: #bb5602; --yellow-700-rgb: 187, 86, 2; --yellow-600: #e27d00; --yellow-600-rgb: 226, 125, 0; --yellow-500: #ffa807; --yellow-500-rgb: 255, 168, 7; --yellow-400: #ffc81b; --yellow-400-rgb: 255, 200, 27; --yellow-300: #ffdb46; --yellow-300-rgb: 255, 219, 70; --yellow-200: #ffec85; --yellow-200-rgb: 255, 236, 133; --yellow-100: #fff5c5; --yellow-100-rgb: 255, 245, 197; --yellow-50: #fffcea; --yellow-50-rgb: 255, 252, 234; /* ───────────────────────────────────────────────────────────── PURPLE / VIOLET ───────────────────────────────────────────────────────────── */ --purple-950: #2e1065; --purple-950-rgb: 46, 16, 101; --purple-900: #4c1d95; --purple-900-rgb: 76, 29, 149; --purple-800: #5b21b6; --purple-800-rgb: 91, 33, 182; --purple-700: #6d28d9; --purple-700-rgb: 109, 40, 217; --purple-600: #7c3aed; --purple-600-rgb: 124, 58, 237; --purple-500: #8b5cf6; --purple-500-rgb: 139, 92, 246; --purple-400: #a78bfa; --purple-400-rgb: 167, 139, 250; --purple-300: #c4b5fd; --purple-300-rgb: 196, 181, 253; --purple-200: #ddd6fe; --purple-200-rgb: 221, 214, 254; --purple-100: #ede9fe; --purple-100-rgb: 237, 233, 254; --purple-50: #f5f3ff; --purple-50-rgb: 245, 243, 255; /* ───────────────────────────────────────────────────────────── BRICK RED ───────────────────────────────────────────────────────────── */ --brick-red-950: #430e1d; --brick-red-950-rgb: 67, 14, 29; --brick-red-900: #79223d; --brick-red-900-rgb: 121, 34, 61; --brick-red-800: #8d2440; --brick-red-800-rgb: 141, 36, 64; --brick-red-700: #a82846; --brick-red-700-rgb: 168, 40, 70; --brick-red-600: #c93857; --brick-red-600-rgb: 201, 56, 87; --brick-red-500: #dd566c; --brick-red-500-rgb: 221, 86, 108; --brick-red-400: #e98391; --brick-red-400-rgb: 233, 131, 145; --brick-red-300: #f2afb8; --brick-red-300-rgb: 242, 175, 184; --brick-red-200: #f8d3d8; --brick-red-200-rgb: 248, 211, 216; --brick-red-100: #fce7e9; --brick-red-100-rgb: 252, 231, 233; --brick-red-50: #fdf3f4; --brick-red-50-rgb: 253, 243, 244; /* ───────────────────────────────────────────────────────────── GREY ───────────────────────────────────────────────────────────── */ --grey-950: #30323b; --grey-950-rgb: 48, 50, 59; --grey-900: #4b4f5d; --grey-900-rgb: 75, 79, 93; --grey-800: #5a5f73; --grey-800-rgb: 90, 95, 115; --grey-700: #6b718a; --grey-700-rgb: 107, 113, 138; --grey-600: #788098; --grey-600-rgb: 120, 128, 152; --grey-500: #8993a8; --grey-500-rgb: 137, 147, 168; --grey-400: #a0aaba; --grey-400-rgb: 160, 170, 186; --grey-300: #bfc7d1; --grey-300-rgb: 191, 199, 209; --grey-200: #d0d5dd; --grey-200-rgb: 208, 213, 221; --grey-100: #eaecef; --grey-100-rgb: 234, 236, 239; --grey-50: #f6f7f8; --grey-50-rgb: 246, 247, 248; /* ───────────────────────────────────────────────────────────── RED (alias for danger) ───────────────────────────────────────────────────────────── */ --red-900: #881414; --red-900-rgb: 136, 20, 20; --red-800: #a50f0f; --red-800-rgb: 165, 15, 15; --red-700: #993a3a; --red-700-rgb: 153, 58, 58; --red-600: #eb1515; --red-600-rgb: 235, 21, 21; --red-500: #ff4d4d; --red-500-rgb: 255, 77, 77; --red-400: #ff6464; --red-400-rgb: 255, 100, 100; --red-300: #ff9d9d; --red-300-rgb: 255, 157, 157; --red-200: #ffc5c5; --red-200-rgb: 255, 197, 197; --red-100: #ffdfdf; --red-100-rgb: 255, 223, 223; --red-50: #fff1f1; --red-50-rgb: 255, 241, 241; /* ───────────────────────────────────────────────────────────── BASICS ───────────────────────────────────────────────────────────── */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --light-blue: #f6fbff; --light-blue-rgb: 246, 251, 255; --dark-jungle-green: #0d1e22; --dark-jungle-green-rgb: 13, 30, 34; } /* ══════════════════════════════════════════════════════════════ LESS VARIABLES — For direct usage in LESS files ══════════════════════════════════════════════════════════════ */ /* Danger */ /* Warning (Status Orange) */ /* Neutral — Neural Gray */ /* Persian Green */ /* Indigo */ /* Pink */ /* Blue (Ghost) */ /* Blue (Info) */ /* Info (Blue) */ /* Success (Green) */ /* Green (alias) */ /* Orange */ /* Yellow */ /* Purple / Violet */ /* Brick Red */ /* Grey */ /* Red */ /* Error (alias for danger) */ /* Primary — Neural Blue (default theme) */ /* Secondary — Neural Black & Dark (default theme) */ /* Basics */ /* ══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ══════════════════════════════════════════════════════════════ Ces variables mappent les couleurs fonctionnelles pour une utilisation cohérente dans l'application. ══════════════════════════════════════════════════════════════ */ /* Text Colors */ /* Background Colors */ /* Border Colors */ /* Interactive States */ /* Status Colors (semantic) */ html body[data-v-d4382f28] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-d4382f28] { width: 100%; min-width: 0; background: var(--input-bg); color: var(--input-text); font-weight: 600; caret-color: var(--primary-600); transition: border-color 0.2s, box-shadow 0.2s; outline: none; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } input[data-v-d4382f28]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-d4382f28], input[disabled][data-v-d4382f28] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-d4382f28] { opacity: 0.9; } input[readonly][data-v-d4382f28] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-d4382f28] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-d4382f28]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-d4382f28]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-d4382f28]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-d4382f28] { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } /* ══════════════════════════════════════════════════════════════ ADMIN GRID — Styles partagés pour les listes admin (BEM) ══════════════════════════════════════════════════════════════ */ /* Alternance de couleurs pour les lignes */ .grid-elem__wrapper[data-v-d4382f28]:nth-child(odd), .list-card-desktop__wrapper[data-v-d4382f28]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-d4382f28]:nth-child(even), .list-card-desktop__wrapper[data-v-d4382f28]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-d4382f28]:nth-child(odd), .listCardDesktopWrapper[data-v-d4382f28]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-d4382f28]:nth-child(even), .listCardDesktopWrapper[data-v-d4382f28]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-d4382f28] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .card-layout--selectionnable[data-v-d4382f28] { cursor: pointer; } .card-layout--selectionnable[data-v-d4382f28]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-d4382f28] { cursor: auto; } .card-layout--drawer[data-v-d4382f28] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-d4382f28] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-d4382f28] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-d4382f28] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } /* Legacy alias (rétro-compatibilité) */ .cardLayoutWrapper[data-v-d4382f28] { position: relative; display: grid; align-items: center; grid-template-columns: repeat(36, 1fr); padding: 12px; border-bottom: 1px solid var(--admin-border-subtle, #e2e7ef); transition: background-color 0.15s ease; } .cardLayoutWrapper--selectionnable[data-v-d4382f28] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-d4382f28]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-d4382f28] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-d4382f28] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-d4382f28] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-d4382f28] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-d4382f28] { border-radius: 12px 12px 0px 0px; background: var(--admin-bg-header, #1d4851); border-bottom: 1px solid var(--admin-border, transparent); } .cardLayoutWrapper--header .elem[data-v-d4382f28] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-d4382f28] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-d4382f28] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-d4382f28] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-d4382f28] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-d4382f28] { background-color: #eb1515; } .color-chip--dossiers[data-v-d4382f28] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-d4382f28] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-d4382f28] { background-color: #00a79b; } .color-chip--virements[data-v-d4382f28] { background-color: var(--secondary-400); } .color-chip--factures[data-v-d4382f28] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-d4382f28] { background-color: #eb1515; } .color-recherche-dossiers[data-v-d4382f28] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-d4382f28] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-d4382f28] { background-color: #00a79b; } .color-recherche-virements[data-v-d4382f28] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-d4382f28] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-d4382f28] { color: #00a79b; cursor: pointer; } .scrollable[data-v-d4382f28] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-d4382f28] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-d4382f28] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-d4382f28] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-d4382f28] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-d4382f28] { font-weight: 800; } .grid-cell--column[data-v-d4382f28] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-d4382f28] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-d4382f28] { fill: #00a79b; } .grid-cell--disabled[data-v-d4382f28] { color: #cccccc; } .grid-cell--disabled svg[data-v-d4382f28] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-d4382f28] { white-space: nowrap; } .grid-cell--danger svg[data-v-d4382f28] { fill: #eb1515; } .grid-cell--span-1[data-v-d4382f28] { grid-column: span 1; } .grid-cell--span-2[data-v-d4382f28] { grid-column: span 2; } .grid-cell--span-3[data-v-d4382f28] { grid-column: span 3; } .grid-cell--span-4[data-v-d4382f28] { grid-column: span 4; } .grid-cell--span-5[data-v-d4382f28] { grid-column: span 5; } .grid-cell--span-6[data-v-d4382f28] { grid-column: span 6; } .grid-cell--span-7[data-v-d4382f28] { grid-column: span 7; } .grid-cell--span-8[data-v-d4382f28] { grid-column: span 8; } .grid-cell--span-9[data-v-d4382f28] { grid-column: span 9; } .grid-cell--span-10[data-v-d4382f28] { grid-column: span 10; } .grid-cell--span-12[data-v-d4382f28] { grid-column: span 12; } .grid-cell--span-13[data-v-d4382f28] { grid-column: span 13; } .grid-cell--span-14[data-v-d4382f28] { grid-column: span 14; } .grid-cell--span-16[data-v-d4382f28] { grid-column: span 16; } .grid-cell--span-18[data-v-d4382f28] { grid-column: span 18; } .grid-cell--span-20[data-v-d4382f28] { grid-column: span 20; } .grid-cell--span-32[data-v-d4382f28] { grid-column: span 32; } .grid-cell--span-36[data-v-d4382f28] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-d4382f28] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-d4382f28] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-d4382f28] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-d4382f28] { justify-content: center !important; } .elem--bold span[data-v-d4382f28] { font-weight: 800; } .elem--column[data-v-d4382f28] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-d4382f28] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-d4382f28] { fill: #00a79b; } .elem--clickable[data-v-d4382f28]:hover { cursor: pointer; } .elem--disabled[data-v-d4382f28] { color: #cccccc; } .elem--disabled svg[data-v-d4382f28] { fill: #cccccc; } .elem--nowrap span[data-v-d4382f28] { white-space: nowrap; } .elem--danger svg[data-v-d4382f28] { fill: #eb1515; } .elem--span-1[data-v-d4382f28] { grid-column: span 1; } .elem--span-2[data-v-d4382f28] { grid-column: span 2; } .elem--span-3[data-v-d4382f28] { grid-column: span 3; } .elem--span-4[data-v-d4382f28] { grid-column: span 4; } .elem--span-5[data-v-d4382f28] { grid-column: span 5; } .elem--span-6[data-v-d4382f28] { grid-column: span 6; } .elem--span-7[data-v-d4382f28] { grid-column: span 7; } .elem--span-8[data-v-d4382f28] { grid-column: span 8; } .elem--span-9[data-v-d4382f28] { grid-column: span 9; } .elem--span-10[data-v-d4382f28] { grid-column: span 10; } .elem--span-12[data-v-d4382f28] { grid-column: span 12; } .elem--span-13[data-v-d4382f28] { grid-column: span 13; } .elem--span-14[data-v-d4382f28] { grid-column: span 14; } .elem--span-16[data-v-d4382f28] { grid-column: span 16; } .elem--span-18[data-v-d4382f28] { grid-column: span 18; } .elem--span-20[data-v-d4382f28] { grid-column: span 20; } .elem--span-32[data-v-d4382f28] { grid-column: span 32; } .elem--span-36[data-v-d4382f28] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-d4382f28] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-d4382f28] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-d4382f28]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-d4382f28] { display: flex; } /* flex-direction */ .flex-column[data-v-d4382f28] { flex-direction: column; } .flex-row[data-v-d4382f28] { flex-direction: row; } /* flex */ .flex-1[data-v-d4382f28] { flex: 1 !important; } .flex-2[data-v-d4382f28] { flex: 2; } .flex-3[data-v-d4382f28] { flex: 3; } .flex-3[data-v-d4382f28] { flex: 4; } .flex-5[data-v-d4382f28] { flex: 5; } .flex-auto[data-v-d4382f28] { flex: auto; } .flex-none[data-v-d4382f28] { flex: none; } .flex-content[data-v-d4382f28] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-d4382f28] { flex-wrap: wrap; } .flex-nowrap[data-v-d4382f28] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-d4382f28] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-d4382f28] { justify-content: flex-start; } .justify-content-end[data-v-d4382f28] { justify-content: flex-end; } .justify-content-baseline[data-v-d4382f28] { justify-content: baseline; } .justify-content-center[data-v-d4382f28] { justify-content: center; } .justify-content-space-between[data-v-d4382f28] { justify-content: space-between; } .justify-content-space-around[data-v-d4382f28] { justify-content: space-around; } .justify-content-space-evenly[data-v-d4382f28] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-d4382f28] { align-items: flex-start; } .align-items-flex-end[data-v-d4382f28] { align-items: flex-end; } .align-items-stretch[data-v-d4382f28] { align-items: stretch; } .align-items-baseline[data-v-d4382f28] { align-items: baseline; } .align-items-center[data-v-d4382f28] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-d4382f28] { align-content: flex-start; } .align-content-flex-end[data-v-d4382f28] { align-content: flex-end; } .align-content-center[data-v-d4382f28] { align-content: center; } .align-content-stretch[data-v-d4382f28] { align-content: stretch; } .align-content-space-between[data-v-d4382f28] { align-content: space-between; } .align-content-space-around[data-v-d4382f28] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-d4382f28] { align-self: flex-start; } .align-self-flex-end[data-v-d4382f28] { align-self: flex-end; } .align-self-stretch[data-v-d4382f28] { align-self: stretch; } .align-self-flex-baseline[data-v-d4382f28] { align-self: baseline; } .align-self-center[data-v-d4382f28] { align-self: center; } .align-self-auto[data-v-d4382f28] { align-self: auto; } .flex-gap-1[data-v-d4382f28] { gap: 4px; } .flex-gap-2[data-v-d4382f28] { gap: 8px; } .flex-gap-3[data-v-d4382f28] { gap: 12px; } .flex-gap-4[data-v-d4382f28] { gap: 16px; } .flex-gap-5[data-v-d4382f28] { gap: 20px; } .flex-gap-6[data-v-d4382f28] { gap: 24px; } .flex-gap-7[data-v-d4382f28] { gap: 28px; } .flex-gap-8[data-v-d4382f28] { gap: 32px; } .flex-gap-10[data-v-d4382f28] { gap: 40px; } .flex-gap-12[data-v-d4382f28] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-d4382f28] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-d4382f28] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-d4382f28] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-d4382f28] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-d4382f28] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-d4382f28] { display: none !important; } } .col-none[data-v-d4382f28] { display: none; } .col-auto[data-v-d4382f28] { grid-column: auto; } .col-1[data-v-d4382f28] { grid-column: span 1; } .col-2[data-v-d4382f28] { grid-column: span 2; } .col-3[data-v-d4382f28] { grid-column: span 3; } .col-4[data-v-d4382f28] { grid-column: span 4; } .col-5[data-v-d4382f28] { grid-column: span 5; } .col-6[data-v-d4382f28] { grid-column: span 6; } .col-7[data-v-d4382f28] { grid-column: span 7; } .col-8[data-v-d4382f28] { grid-column: span 8; } .col-9[data-v-d4382f28] { grid-column: span 9; } .col-10[data-v-d4382f28] { grid-column: span 10; } .col-12[data-v-d4382f28] { grid-column: span 12; } .col-13[data-v-d4382f28] { grid-column: span 13; } .col-14[data-v-d4382f28] { grid-column: span 14; } .col-15[data-v-d4382f28] { grid-column: span 15; } .col-16[data-v-d4382f28] { grid-column: span 16; } .col-18[data-v-d4382f28] { grid-column: span 18; } .col-20[data-v-d4382f28] { grid-column: span 20; } .col-22[data-v-d4382f28] { grid-column: span 22; } .col-24[data-v-d4382f28] { grid-column: span 24; } .col-26[data-v-d4382f28] { grid-column: span 26; } .col-27[data-v-d4382f28] { grid-column: span 27; } .col-28[data-v-d4382f28] { grid-column: span 28; } .col-30[data-v-d4382f28] { grid-column: span 30; } .col-36[data-v-d4382f28] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-d4382f28] { display: none; } .col-md-36[data-v-d4382f28] { grid-column: span 36; } .col-md-28[data-v-d4382f28] { grid-column: span 28; } .col-md-27[data-v-d4382f28] { grid-column: span 27; } .col-md-24[data-v-d4382f28] { grid-column: span 24; } .col-md-22[data-v-d4382f28] { grid-column: span 22; } .col-md-20[data-v-d4382f28] { grid-column: span 20; } .col-md-19[data-v-d4382f28] { grid-column: span 19; } .col-md-18[data-v-d4382f28] { grid-column: span 18; } .col-md-17[data-v-d4382f28] { grid-column: span 17; } .col-md-16[data-v-d4382f28] { grid-column: span 16; } .col-md-15[data-v-d4382f28] { grid-column: span 15; } .col-md-14[data-v-d4382f28] { grid-column: span 14; } .col-md-13[data-v-d4382f28] { grid-column: span 13; } .col-md-12[data-v-d4382f28] { grid-column: span 12; } .col-md-10[data-v-d4382f28] { grid-column: span 10; } .col-md-9[data-v-d4382f28] { grid-column: span 9; } .col-md-8[data-v-d4382f28] { grid-column: span 8; } .col-md-6[data-v-d4382f28] { grid-column: span 6; } .col-md-5[data-v-d4382f28] { grid-column: span 5; } .col-md-4[data-v-d4382f28] { grid-column: span 4; } .col-md-3[data-v-d4382f28] { grid-column: span 3; } .col-md-2[data-v-d4382f28] { grid-column: span 2; } .col-md-1[data-v-d4382f28] { grid-column: span 1; } .col-md-auto[data-v-d4382f28] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-d4382f28] { display: none; } .col-sm-36[data-v-d4382f28] { grid-column: span 36; } .col-sm-32[data-v-d4382f28] { grid-column: span 32; } .col-sm-28[data-v-d4382f28] { grid-column: span 28; } .col-sm-27[data-v-d4382f28] { grid-column: span 27; } .col-sm-24[data-v-d4382f28] { grid-column: span 24; } .col-sm-22[data-v-d4382f28] { grid-column: span 22; } .col-sm-20[data-v-d4382f28] { grid-column: span 20; } .col-sm-18[data-v-d4382f28] { grid-column: span 18; } .col-sm-16[data-v-d4382f28] { grid-column: span 16; } .col-sm-15[data-v-d4382f28] { grid-column: span 15; } .col-sm-14[data-v-d4382f28] { grid-column: span 14; } .col-sm-13[data-v-d4382f28] { grid-column: span 12; } .col-sm-12[data-v-d4382f28] { grid-column: span 12; } .col-sm-10[data-v-d4382f28] { grid-column: span 10; } .col-sm-9[data-v-d4382f28] { grid-column: span 8; } .col-sm-8[data-v-d4382f28] { grid-column: span 8; } .col-sm-6[data-v-d4382f28] { grid-column: span 6; } .col-sm-4[data-v-d4382f28] { grid-column: span 4; } .col-sm-auto[data-v-d4382f28] { grid-column: auto; } } .fade-enter-active[data-v-d4382f28] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-d4382f28] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-d4382f28], .fade-leave-to[data-v-d4382f28] { opacity: 0; } .validation-icon[data-v-d4382f28] { --size: 20px; --transition-duration: 0.25s; --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1); width: var(--size); height: var(--size); flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); transition: opacity var(--transition-duration) ease, transform var(--transition-duration) var(--transition-easing); } .validation-icon--visible[data-v-d4382f28] { opacity: 1; transform: scale(1); } .validation-icon--validating[data-v-d4382f28] { color: var(--color-primary-500); } .validation-icon--valid[data-v-d4382f28] { color: var(--color-success-500); } .validation-icon--invalid[data-v-d4382f28] { color: var(--color-danger-500); } .validation-icon svg[data-v-d4382f28] { width: 100%; height: 100%; } .validation-icon__spinner[data-v-d4382f28] { animation: spin-d4382f28 1s linear infinite; } .validation-icon__spinner circle[data-v-d4382f28] { transform-origin: center; } .validation-icon__check .validation-icon__circle[data-v-d4382f28] { animation: scaleIn-d4382f28 0.3s var(--transition-easing) forwards; } .validation-icon__check .validation-icon__checkmark[data-v-d4382f28] { stroke-dasharray: 20; stroke-dashoffset: 20; animation: drawCheck-d4382f28 0.3s ease-out 0.15s forwards; } .validation-icon__x .validation-icon__circle[data-v-d4382f28] { animation: scaleIn-d4382f28 0.3s var(--transition-easing) forwards; } .validation-icon__x .validation-icon__xmark[data-v-d4382f28] { stroke-dasharray: 20; stroke-dashoffset: 20; animation: drawX-d4382f28 0.3s ease-out 0.15s forwards; } .validation-icon__empty[data-v-d4382f28] { display: block; width: 100%; height: 100%; } @keyframes spin-d4382f28 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes scaleIn-d4382f28 { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes drawCheck-d4382f28 { to { stroke-dashoffset: 0; } } @keyframes drawX-d4382f28 { to { stroke-dashoffset: 0; } } .validation-icon-enter-active[data-v-d4382f28], .validation-icon-leave-active[data-v-d4382f28] { transition: all 0.2s var(--transition-easing); } .validation-icon-enter-from[data-v-d4382f28] { opacity: 0; transform: scale(0.5) rotate(-90deg); } .validation-icon-leave-to[data-v-d4382f28] { opacity: 0; transform: scale(0.5) rotate(90deg); }