/* ══════════════════════════════════════════════════════════════ 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-a1e5dd48]: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-a1e5dd48] { /* 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-a1e5dd48] { /* 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-a1e5dd48]: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-a1e5dd48], .theme-mode-light[data-v-a1e5dd48] { /* ═══════════════════════════════════════════════════════════════ 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-a1e5dd48], .theme-mode-dark[data-v-a1e5dd48] { /* ═══════════════════════════════════════════════════════════════ 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-a1e5dd48]: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-a1e5dd48]: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-a1e5dd48] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-a1e5dd48] { 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-a1e5dd48]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-a1e5dd48], input[disabled][data-v-a1e5dd48] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-a1e5dd48] { opacity: 0.9; } input[readonly][data-v-a1e5dd48] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-a1e5dd48] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-a1e5dd48]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-a1e5dd48]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-a1e5dd48]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-a1e5dd48] { 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-a1e5dd48]:nth-child(odd), .list-card-desktop__wrapper[data-v-a1e5dd48]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-a1e5dd48]:nth-child(even), .list-card-desktop__wrapper[data-v-a1e5dd48]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-a1e5dd48]:nth-child(odd), .listCardDesktopWrapper[data-v-a1e5dd48]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-a1e5dd48]:nth-child(even), .listCardDesktopWrapper[data-v-a1e5dd48]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-a1e5dd48] { 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-a1e5dd48] { cursor: pointer; } .card-layout--selectionnable[data-v-a1e5dd48]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-a1e5dd48] { cursor: auto; } .card-layout--drawer[data-v-a1e5dd48] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-a1e5dd48] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-a1e5dd48] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-a1e5dd48] { 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-a1e5dd48] { 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-a1e5dd48] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-a1e5dd48]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-a1e5dd48] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-a1e5dd48] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-a1e5dd48] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-a1e5dd48] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-a1e5dd48] { 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-a1e5dd48] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-a1e5dd48] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-a1e5dd48] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-a1e5dd48] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-a1e5dd48] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-a1e5dd48] { background-color: #eb1515; } .color-chip--dossiers[data-v-a1e5dd48] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-a1e5dd48] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-a1e5dd48] { background-color: #00a79b; } .color-chip--virements[data-v-a1e5dd48] { background-color: var(--secondary-400); } .color-chip--factures[data-v-a1e5dd48] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-a1e5dd48] { background-color: #eb1515; } .color-recherche-dossiers[data-v-a1e5dd48] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-a1e5dd48] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-a1e5dd48] { background-color: #00a79b; } .color-recherche-virements[data-v-a1e5dd48] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-a1e5dd48] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-a1e5dd48] { color: #00a79b; cursor: pointer; } .scrollable[data-v-a1e5dd48] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-a1e5dd48] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-a1e5dd48] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-a1e5dd48] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-a1e5dd48] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-a1e5dd48] { font-weight: 800; } .grid-cell--column[data-v-a1e5dd48] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-a1e5dd48] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-a1e5dd48] { fill: #00a79b; } .grid-cell--disabled[data-v-a1e5dd48] { color: #cccccc; } .grid-cell--disabled svg[data-v-a1e5dd48] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-a1e5dd48] { white-space: nowrap; } .grid-cell--danger svg[data-v-a1e5dd48] { fill: #eb1515; } .grid-cell--span-1[data-v-a1e5dd48] { grid-column: span 1; } .grid-cell--span-2[data-v-a1e5dd48] { grid-column: span 2; } .grid-cell--span-3[data-v-a1e5dd48] { grid-column: span 3; } .grid-cell--span-4[data-v-a1e5dd48] { grid-column: span 4; } .grid-cell--span-5[data-v-a1e5dd48] { grid-column: span 5; } .grid-cell--span-6[data-v-a1e5dd48] { grid-column: span 6; } .grid-cell--span-7[data-v-a1e5dd48] { grid-column: span 7; } .grid-cell--span-8[data-v-a1e5dd48] { grid-column: span 8; } .grid-cell--span-9[data-v-a1e5dd48] { grid-column: span 9; } .grid-cell--span-10[data-v-a1e5dd48] { grid-column: span 10; } .grid-cell--span-12[data-v-a1e5dd48] { grid-column: span 12; } .grid-cell--span-13[data-v-a1e5dd48] { grid-column: span 13; } .grid-cell--span-14[data-v-a1e5dd48] { grid-column: span 14; } .grid-cell--span-16[data-v-a1e5dd48] { grid-column: span 16; } .grid-cell--span-18[data-v-a1e5dd48] { grid-column: span 18; } .grid-cell--span-20[data-v-a1e5dd48] { grid-column: span 20; } .grid-cell--span-32[data-v-a1e5dd48] { grid-column: span 32; } .grid-cell--span-36[data-v-a1e5dd48] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-a1e5dd48] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-a1e5dd48] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-a1e5dd48] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-a1e5dd48] { justify-content: center !important; } .elem--bold span[data-v-a1e5dd48] { font-weight: 800; } .elem--column[data-v-a1e5dd48] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-a1e5dd48] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-a1e5dd48] { fill: #00a79b; } .elem--clickable[data-v-a1e5dd48]:hover { cursor: pointer; } .elem--disabled[data-v-a1e5dd48] { color: #cccccc; } .elem--disabled svg[data-v-a1e5dd48] { fill: #cccccc; } .elem--nowrap span[data-v-a1e5dd48] { white-space: nowrap; } .elem--danger svg[data-v-a1e5dd48] { fill: #eb1515; } .elem--span-1[data-v-a1e5dd48] { grid-column: span 1; } .elem--span-2[data-v-a1e5dd48] { grid-column: span 2; } .elem--span-3[data-v-a1e5dd48] { grid-column: span 3; } .elem--span-4[data-v-a1e5dd48] { grid-column: span 4; } .elem--span-5[data-v-a1e5dd48] { grid-column: span 5; } .elem--span-6[data-v-a1e5dd48] { grid-column: span 6; } .elem--span-7[data-v-a1e5dd48] { grid-column: span 7; } .elem--span-8[data-v-a1e5dd48] { grid-column: span 8; } .elem--span-9[data-v-a1e5dd48] { grid-column: span 9; } .elem--span-10[data-v-a1e5dd48] { grid-column: span 10; } .elem--span-12[data-v-a1e5dd48] { grid-column: span 12; } .elem--span-13[data-v-a1e5dd48] { grid-column: span 13; } .elem--span-14[data-v-a1e5dd48] { grid-column: span 14; } .elem--span-16[data-v-a1e5dd48] { grid-column: span 16; } .elem--span-18[data-v-a1e5dd48] { grid-column: span 18; } .elem--span-20[data-v-a1e5dd48] { grid-column: span 20; } .elem--span-32[data-v-a1e5dd48] { grid-column: span 32; } .elem--span-36[data-v-a1e5dd48] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-a1e5dd48] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-a1e5dd48] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-a1e5dd48]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-a1e5dd48] { display: flex; } /* flex-direction */ .flex-column[data-v-a1e5dd48] { flex-direction: column; } .flex-row[data-v-a1e5dd48] { flex-direction: row; } /* flex */ .flex-1[data-v-a1e5dd48] { flex: 1 !important; } .flex-2[data-v-a1e5dd48] { flex: 2; } .flex-3[data-v-a1e5dd48] { flex: 3; } .flex-3[data-v-a1e5dd48] { flex: 4; } .flex-5[data-v-a1e5dd48] { flex: 5; } .flex-auto[data-v-a1e5dd48] { flex: auto; } .flex-none[data-v-a1e5dd48] { flex: none; } .flex-content[data-v-a1e5dd48] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-a1e5dd48] { flex-wrap: wrap; } .flex-nowrap[data-v-a1e5dd48] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-a1e5dd48] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-a1e5dd48] { justify-content: flex-start; } .justify-content-end[data-v-a1e5dd48] { justify-content: flex-end; } .justify-content-baseline[data-v-a1e5dd48] { justify-content: baseline; } .justify-content-center[data-v-a1e5dd48] { justify-content: center; } .justify-content-space-between[data-v-a1e5dd48] { justify-content: space-between; } .justify-content-space-around[data-v-a1e5dd48] { justify-content: space-around; } .justify-content-space-evenly[data-v-a1e5dd48] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-a1e5dd48] { align-items: flex-start; } .align-items-flex-end[data-v-a1e5dd48] { align-items: flex-end; } .align-items-stretch[data-v-a1e5dd48] { align-items: stretch; } .align-items-baseline[data-v-a1e5dd48] { align-items: baseline; } .align-items-center[data-v-a1e5dd48] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-a1e5dd48] { align-content: flex-start; } .align-content-flex-end[data-v-a1e5dd48] { align-content: flex-end; } .align-content-center[data-v-a1e5dd48] { align-content: center; } .align-content-stretch[data-v-a1e5dd48] { align-content: stretch; } .align-content-space-between[data-v-a1e5dd48] { align-content: space-between; } .align-content-space-around[data-v-a1e5dd48] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-a1e5dd48] { align-self: flex-start; } .align-self-flex-end[data-v-a1e5dd48] { align-self: flex-end; } .align-self-stretch[data-v-a1e5dd48] { align-self: stretch; } .align-self-flex-baseline[data-v-a1e5dd48] { align-self: baseline; } .align-self-center[data-v-a1e5dd48] { align-self: center; } .align-self-auto[data-v-a1e5dd48] { align-self: auto; } .flex-gap-1[data-v-a1e5dd48] { gap: 4px; } .flex-gap-2[data-v-a1e5dd48] { gap: 8px; } .flex-gap-3[data-v-a1e5dd48] { gap: 12px; } .flex-gap-4[data-v-a1e5dd48] { gap: 16px; } .flex-gap-5[data-v-a1e5dd48] { gap: 20px; } .flex-gap-6[data-v-a1e5dd48] { gap: 24px; } .flex-gap-7[data-v-a1e5dd48] { gap: 28px; } .flex-gap-8[data-v-a1e5dd48] { gap: 32px; } .flex-gap-10[data-v-a1e5dd48] { gap: 40px; } .flex-gap-12[data-v-a1e5dd48] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-a1e5dd48] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-a1e5dd48] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-a1e5dd48] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-a1e5dd48] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-a1e5dd48] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-a1e5dd48] { display: none !important; } } .col-none[data-v-a1e5dd48] { display: none; } .col-auto[data-v-a1e5dd48] { grid-column: auto; } .col-1[data-v-a1e5dd48] { grid-column: span 1; } .col-2[data-v-a1e5dd48] { grid-column: span 2; } .col-3[data-v-a1e5dd48] { grid-column: span 3; } .col-4[data-v-a1e5dd48] { grid-column: span 4; } .col-5[data-v-a1e5dd48] { grid-column: span 5; } .col-6[data-v-a1e5dd48] { grid-column: span 6; } .col-7[data-v-a1e5dd48] { grid-column: span 7; } .col-8[data-v-a1e5dd48] { grid-column: span 8; } .col-9[data-v-a1e5dd48] { grid-column: span 9; } .col-10[data-v-a1e5dd48] { grid-column: span 10; } .col-12[data-v-a1e5dd48] { grid-column: span 12; } .col-13[data-v-a1e5dd48] { grid-column: span 13; } .col-14[data-v-a1e5dd48] { grid-column: span 14; } .col-15[data-v-a1e5dd48] { grid-column: span 15; } .col-16[data-v-a1e5dd48] { grid-column: span 16; } .col-18[data-v-a1e5dd48] { grid-column: span 18; } .col-20[data-v-a1e5dd48] { grid-column: span 20; } .col-22[data-v-a1e5dd48] { grid-column: span 22; } .col-24[data-v-a1e5dd48] { grid-column: span 24; } .col-26[data-v-a1e5dd48] { grid-column: span 26; } .col-27[data-v-a1e5dd48] { grid-column: span 27; } .col-28[data-v-a1e5dd48] { grid-column: span 28; } .col-30[data-v-a1e5dd48] { grid-column: span 30; } .col-36[data-v-a1e5dd48] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-a1e5dd48] { display: none; } .col-md-36[data-v-a1e5dd48] { grid-column: span 36; } .col-md-28[data-v-a1e5dd48] { grid-column: span 28; } .col-md-27[data-v-a1e5dd48] { grid-column: span 27; } .col-md-24[data-v-a1e5dd48] { grid-column: span 24; } .col-md-22[data-v-a1e5dd48] { grid-column: span 22; } .col-md-20[data-v-a1e5dd48] { grid-column: span 20; } .col-md-19[data-v-a1e5dd48] { grid-column: span 19; } .col-md-18[data-v-a1e5dd48] { grid-column: span 18; } .col-md-17[data-v-a1e5dd48] { grid-column: span 17; } .col-md-16[data-v-a1e5dd48] { grid-column: span 16; } .col-md-15[data-v-a1e5dd48] { grid-column: span 15; } .col-md-14[data-v-a1e5dd48] { grid-column: span 14; } .col-md-13[data-v-a1e5dd48] { grid-column: span 13; } .col-md-12[data-v-a1e5dd48] { grid-column: span 12; } .col-md-10[data-v-a1e5dd48] { grid-column: span 10; } .col-md-9[data-v-a1e5dd48] { grid-column: span 9; } .col-md-8[data-v-a1e5dd48] { grid-column: span 8; } .col-md-6[data-v-a1e5dd48] { grid-column: span 6; } .col-md-5[data-v-a1e5dd48] { grid-column: span 5; } .col-md-4[data-v-a1e5dd48] { grid-column: span 4; } .col-md-3[data-v-a1e5dd48] { grid-column: span 3; } .col-md-2[data-v-a1e5dd48] { grid-column: span 2; } .col-md-1[data-v-a1e5dd48] { grid-column: span 1; } .col-md-auto[data-v-a1e5dd48] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-a1e5dd48] { display: none; } .col-sm-36[data-v-a1e5dd48] { grid-column: span 36; } .col-sm-32[data-v-a1e5dd48] { grid-column: span 32; } .col-sm-28[data-v-a1e5dd48] { grid-column: span 28; } .col-sm-27[data-v-a1e5dd48] { grid-column: span 27; } .col-sm-24[data-v-a1e5dd48] { grid-column: span 24; } .col-sm-22[data-v-a1e5dd48] { grid-column: span 22; } .col-sm-20[data-v-a1e5dd48] { grid-column: span 20; } .col-sm-18[data-v-a1e5dd48] { grid-column: span 18; } .col-sm-16[data-v-a1e5dd48] { grid-column: span 16; } .col-sm-15[data-v-a1e5dd48] { grid-column: span 15; } .col-sm-14[data-v-a1e5dd48] { grid-column: span 14; } .col-sm-13[data-v-a1e5dd48] { grid-column: span 12; } .col-sm-12[data-v-a1e5dd48] { grid-column: span 12; } .col-sm-10[data-v-a1e5dd48] { grid-column: span 10; } .col-sm-9[data-v-a1e5dd48] { grid-column: span 8; } .col-sm-8[data-v-a1e5dd48] { grid-column: span 8; } .col-sm-6[data-v-a1e5dd48] { grid-column: span 6; } .col-sm-4[data-v-a1e5dd48] { grid-column: span 4; } .col-sm-auto[data-v-a1e5dd48] { grid-column: auto; } } .fade-enter-active[data-v-a1e5dd48] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-a1e5dd48] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-a1e5dd48], .fade-leave-to[data-v-a1e5dd48] { opacity: 0; } .app-loader-overlay[data-v-a1e5dd48] { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); } .app-loader-content[data-v-a1e5dd48] { display: flex; flex-direction: column; align-items: center; gap: 16px; } .loader-spinner[data-v-a1e5dd48] { width: 40px; height: 40px; border: 3px solid rgba(var(--primary-500-rgb), 0.15); border-top-color: var(--primary-500); border-radius: 50%; animation: spin-a1e5dd48 0.8s linear infinite; } .loader-message[data-v-a1e5dd48] { font-size: 0.9rem; font-weight: 500; color: #64748b; letter-spacing: 0.3px; } @keyframes spin-a1e5dd48 { to { transform: rotate(360deg); } } /* Transition */ .loader-fade-enter-active[data-v-a1e5dd48], .loader-fade-leave-active[data-v-a1e5dd48] { transition: opacity 0.2s ease; } .loader-fade-enter-from[data-v-a1e5dd48], .loader-fade-leave-to[data-v-a1e5dd48] { 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-ff76df74]: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-ff76df74] { /* 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-ff76df74] { /* 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-ff76df74]: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-ff76df74], .theme-mode-light[data-v-ff76df74] { /* ═══════════════════════════════════════════════════════════════ 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-ff76df74], .theme-mode-dark[data-v-ff76df74] { /* ═══════════════════════════════════════════════════════════════ 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-ff76df74]: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-ff76df74]: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-ff76df74] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-ff76df74] { 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-ff76df74]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-ff76df74], input[disabled][data-v-ff76df74] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-ff76df74] { opacity: 0.9; } input[readonly][data-v-ff76df74] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-ff76df74] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-ff76df74]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-ff76df74]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-ff76df74]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-ff76df74] { 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-ff76df74]:nth-child(odd), .list-card-desktop__wrapper[data-v-ff76df74]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-ff76df74]:nth-child(even), .list-card-desktop__wrapper[data-v-ff76df74]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-ff76df74]:nth-child(odd), .listCardDesktopWrapper[data-v-ff76df74]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-ff76df74]:nth-child(even), .listCardDesktopWrapper[data-v-ff76df74]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-ff76df74] { 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-ff76df74] { cursor: pointer; } .card-layout--selectionnable[data-v-ff76df74]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-ff76df74] { cursor: auto; } .card-layout--drawer[data-v-ff76df74] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-ff76df74] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-ff76df74] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-ff76df74] { 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-ff76df74] { 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-ff76df74] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-ff76df74]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-ff76df74] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-ff76df74] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-ff76df74] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-ff76df74] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-ff76df74] { 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-ff76df74] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-ff76df74] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-ff76df74] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-ff76df74] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-ff76df74] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-ff76df74] { background-color: #eb1515; } .color-chip--dossiers[data-v-ff76df74] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-ff76df74] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-ff76df74] { background-color: #00a79b; } .color-chip--virements[data-v-ff76df74] { background-color: var(--secondary-400); } .color-chip--factures[data-v-ff76df74] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-ff76df74] { background-color: #eb1515; } .color-recherche-dossiers[data-v-ff76df74] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-ff76df74] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-ff76df74] { background-color: #00a79b; } .color-recherche-virements[data-v-ff76df74] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-ff76df74] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-ff76df74] { color: #00a79b; cursor: pointer; } .scrollable[data-v-ff76df74] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-ff76df74] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-ff76df74] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-ff76df74] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-ff76df74] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-ff76df74] { font-weight: 800; } .grid-cell--column[data-v-ff76df74] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-ff76df74] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-ff76df74] { fill: #00a79b; } .grid-cell--disabled[data-v-ff76df74] { color: #cccccc; } .grid-cell--disabled svg[data-v-ff76df74] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-ff76df74] { white-space: nowrap; } .grid-cell--danger svg[data-v-ff76df74] { fill: #eb1515; } .grid-cell--span-1[data-v-ff76df74] { grid-column: span 1; } .grid-cell--span-2[data-v-ff76df74] { grid-column: span 2; } .grid-cell--span-3[data-v-ff76df74] { grid-column: span 3; } .grid-cell--span-4[data-v-ff76df74] { grid-column: span 4; } .grid-cell--span-5[data-v-ff76df74] { grid-column: span 5; } .grid-cell--span-6[data-v-ff76df74] { grid-column: span 6; } .grid-cell--span-7[data-v-ff76df74] { grid-column: span 7; } .grid-cell--span-8[data-v-ff76df74] { grid-column: span 8; } .grid-cell--span-9[data-v-ff76df74] { grid-column: span 9; } .grid-cell--span-10[data-v-ff76df74] { grid-column: span 10; } .grid-cell--span-12[data-v-ff76df74] { grid-column: span 12; } .grid-cell--span-13[data-v-ff76df74] { grid-column: span 13; } .grid-cell--span-14[data-v-ff76df74] { grid-column: span 14; } .grid-cell--span-16[data-v-ff76df74] { grid-column: span 16; } .grid-cell--span-18[data-v-ff76df74] { grid-column: span 18; } .grid-cell--span-20[data-v-ff76df74] { grid-column: span 20; } .grid-cell--span-32[data-v-ff76df74] { grid-column: span 32; } .grid-cell--span-36[data-v-ff76df74] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-ff76df74] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-ff76df74] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-ff76df74] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-ff76df74] { justify-content: center !important; } .elem--bold span[data-v-ff76df74] { font-weight: 800; } .elem--column[data-v-ff76df74] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-ff76df74] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-ff76df74] { fill: #00a79b; } .elem--clickable[data-v-ff76df74]:hover { cursor: pointer; } .elem--disabled[data-v-ff76df74] { color: #cccccc; } .elem--disabled svg[data-v-ff76df74] { fill: #cccccc; } .elem--nowrap span[data-v-ff76df74] { white-space: nowrap; } .elem--danger svg[data-v-ff76df74] { fill: #eb1515; } .elem--span-1[data-v-ff76df74] { grid-column: span 1; } .elem--span-2[data-v-ff76df74] { grid-column: span 2; } .elem--span-3[data-v-ff76df74] { grid-column: span 3; } .elem--span-4[data-v-ff76df74] { grid-column: span 4; } .elem--span-5[data-v-ff76df74] { grid-column: span 5; } .elem--span-6[data-v-ff76df74] { grid-column: span 6; } .elem--span-7[data-v-ff76df74] { grid-column: span 7; } .elem--span-8[data-v-ff76df74] { grid-column: span 8; } .elem--span-9[data-v-ff76df74] { grid-column: span 9; } .elem--span-10[data-v-ff76df74] { grid-column: span 10; } .elem--span-12[data-v-ff76df74] { grid-column: span 12; } .elem--span-13[data-v-ff76df74] { grid-column: span 13; } .elem--span-14[data-v-ff76df74] { grid-column: span 14; } .elem--span-16[data-v-ff76df74] { grid-column: span 16; } .elem--span-18[data-v-ff76df74] { grid-column: span 18; } .elem--span-20[data-v-ff76df74] { grid-column: span 20; } .elem--span-32[data-v-ff76df74] { grid-column: span 32; } .elem--span-36[data-v-ff76df74] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-ff76df74] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-ff76df74] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-ff76df74]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-ff76df74] { display: flex; } /* flex-direction */ .flex-column[data-v-ff76df74] { flex-direction: column; } .flex-row[data-v-ff76df74] { flex-direction: row; } /* flex */ .flex-1[data-v-ff76df74] { flex: 1 !important; } .flex-2[data-v-ff76df74] { flex: 2; } .flex-3[data-v-ff76df74] { flex: 3; } .flex-3[data-v-ff76df74] { flex: 4; } .flex-5[data-v-ff76df74] { flex: 5; } .flex-auto[data-v-ff76df74] { flex: auto; } .flex-none[data-v-ff76df74] { flex: none; } .flex-content[data-v-ff76df74] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-ff76df74] { flex-wrap: wrap; } .flex-nowrap[data-v-ff76df74] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-ff76df74] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-ff76df74] { justify-content: flex-start; } .justify-content-end[data-v-ff76df74] { justify-content: flex-end; } .justify-content-baseline[data-v-ff76df74] { justify-content: baseline; } .justify-content-center[data-v-ff76df74] { justify-content: center; } .justify-content-space-between[data-v-ff76df74] { justify-content: space-between; } .justify-content-space-around[data-v-ff76df74] { justify-content: space-around; } .justify-content-space-evenly[data-v-ff76df74] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-ff76df74] { align-items: flex-start; } .align-items-flex-end[data-v-ff76df74] { align-items: flex-end; } .align-items-stretch[data-v-ff76df74] { align-items: stretch; } .align-items-baseline[data-v-ff76df74] { align-items: baseline; } .align-items-center[data-v-ff76df74] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-ff76df74] { align-content: flex-start; } .align-content-flex-end[data-v-ff76df74] { align-content: flex-end; } .align-content-center[data-v-ff76df74] { align-content: center; } .align-content-stretch[data-v-ff76df74] { align-content: stretch; } .align-content-space-between[data-v-ff76df74] { align-content: space-between; } .align-content-space-around[data-v-ff76df74] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-ff76df74] { align-self: flex-start; } .align-self-flex-end[data-v-ff76df74] { align-self: flex-end; } .align-self-stretch[data-v-ff76df74] { align-self: stretch; } .align-self-flex-baseline[data-v-ff76df74] { align-self: baseline; } .align-self-center[data-v-ff76df74] { align-self: center; } .align-self-auto[data-v-ff76df74] { align-self: auto; } .flex-gap-1[data-v-ff76df74] { gap: 4px; } .flex-gap-2[data-v-ff76df74] { gap: 8px; } .flex-gap-3[data-v-ff76df74] { gap: 12px; } .flex-gap-4[data-v-ff76df74] { gap: 16px; } .flex-gap-5[data-v-ff76df74] { gap: 20px; } .flex-gap-6[data-v-ff76df74] { gap: 24px; } .flex-gap-7[data-v-ff76df74] { gap: 28px; } .flex-gap-8[data-v-ff76df74] { gap: 32px; } .flex-gap-10[data-v-ff76df74] { gap: 40px; } .flex-gap-12[data-v-ff76df74] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-ff76df74] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-ff76df74] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-ff76df74] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-ff76df74] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-ff76df74] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-ff76df74] { display: none !important; } } .col-none[data-v-ff76df74] { display: none; } .col-auto[data-v-ff76df74] { grid-column: auto; } .col-1[data-v-ff76df74] { grid-column: span 1; } .col-2[data-v-ff76df74] { grid-column: span 2; } .col-3[data-v-ff76df74] { grid-column: span 3; } .col-4[data-v-ff76df74] { grid-column: span 4; } .col-5[data-v-ff76df74] { grid-column: span 5; } .col-6[data-v-ff76df74] { grid-column: span 6; } .col-7[data-v-ff76df74] { grid-column: span 7; } .col-8[data-v-ff76df74] { grid-column: span 8; } .col-9[data-v-ff76df74] { grid-column: span 9; } .col-10[data-v-ff76df74] { grid-column: span 10; } .col-12[data-v-ff76df74] { grid-column: span 12; } .col-13[data-v-ff76df74] { grid-column: span 13; } .col-14[data-v-ff76df74] { grid-column: span 14; } .col-15[data-v-ff76df74] { grid-column: span 15; } .col-16[data-v-ff76df74] { grid-column: span 16; } .col-18[data-v-ff76df74] { grid-column: span 18; } .col-20[data-v-ff76df74] { grid-column: span 20; } .col-22[data-v-ff76df74] { grid-column: span 22; } .col-24[data-v-ff76df74] { grid-column: span 24; } .col-26[data-v-ff76df74] { grid-column: span 26; } .col-27[data-v-ff76df74] { grid-column: span 27; } .col-28[data-v-ff76df74] { grid-column: span 28; } .col-30[data-v-ff76df74] { grid-column: span 30; } .col-36[data-v-ff76df74] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-ff76df74] { display: none; } .col-md-36[data-v-ff76df74] { grid-column: span 36; } .col-md-28[data-v-ff76df74] { grid-column: span 28; } .col-md-27[data-v-ff76df74] { grid-column: span 27; } .col-md-24[data-v-ff76df74] { grid-column: span 24; } .col-md-22[data-v-ff76df74] { grid-column: span 22; } .col-md-20[data-v-ff76df74] { grid-column: span 20; } .col-md-19[data-v-ff76df74] { grid-column: span 19; } .col-md-18[data-v-ff76df74] { grid-column: span 18; } .col-md-17[data-v-ff76df74] { grid-column: span 17; } .col-md-16[data-v-ff76df74] { grid-column: span 16; } .col-md-15[data-v-ff76df74] { grid-column: span 15; } .col-md-14[data-v-ff76df74] { grid-column: span 14; } .col-md-13[data-v-ff76df74] { grid-column: span 13; } .col-md-12[data-v-ff76df74] { grid-column: span 12; } .col-md-10[data-v-ff76df74] { grid-column: span 10; } .col-md-9[data-v-ff76df74] { grid-column: span 9; } .col-md-8[data-v-ff76df74] { grid-column: span 8; } .col-md-6[data-v-ff76df74] { grid-column: span 6; } .col-md-5[data-v-ff76df74] { grid-column: span 5; } .col-md-4[data-v-ff76df74] { grid-column: span 4; } .col-md-3[data-v-ff76df74] { grid-column: span 3; } .col-md-2[data-v-ff76df74] { grid-column: span 2; } .col-md-1[data-v-ff76df74] { grid-column: span 1; } .col-md-auto[data-v-ff76df74] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-ff76df74] { display: none; } .col-sm-36[data-v-ff76df74] { grid-column: span 36; } .col-sm-32[data-v-ff76df74] { grid-column: span 32; } .col-sm-28[data-v-ff76df74] { grid-column: span 28; } .col-sm-27[data-v-ff76df74] { grid-column: span 27; } .col-sm-24[data-v-ff76df74] { grid-column: span 24; } .col-sm-22[data-v-ff76df74] { grid-column: span 22; } .col-sm-20[data-v-ff76df74] { grid-column: span 20; } .col-sm-18[data-v-ff76df74] { grid-column: span 18; } .col-sm-16[data-v-ff76df74] { grid-column: span 16; } .col-sm-15[data-v-ff76df74] { grid-column: span 15; } .col-sm-14[data-v-ff76df74] { grid-column: span 14; } .col-sm-13[data-v-ff76df74] { grid-column: span 12; } .col-sm-12[data-v-ff76df74] { grid-column: span 12; } .col-sm-10[data-v-ff76df74] { grid-column: span 10; } .col-sm-9[data-v-ff76df74] { grid-column: span 8; } .col-sm-8[data-v-ff76df74] { grid-column: span 8; } .col-sm-6[data-v-ff76df74] { grid-column: span 6; } .col-sm-4[data-v-ff76df74] { grid-column: span 4; } .col-sm-auto[data-v-ff76df74] { grid-column: auto; } } .fade-enter-active[data-v-ff76df74] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-ff76df74] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-ff76df74], .fade-leave-to[data-v-ff76df74] { opacity: 0; } .maintenance[data-v-ff76df74] { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 100%); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .maintenance__container[data-v-ff76df74] { text-align: center; padding: 48px; max-width: 480px; } .maintenance__icon[data-v-ff76df74] { display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px; background: rgba(99, 102, 241, 0.1); border-radius: 50%; color: #818cf8; margin-bottom: 32px; } .maintenance__title[data-v-ff76df74] { font-size: 28px; font-weight: 700; color: #f1f5f9; margin: 0 0 16px; } .maintenance__text[data-v-ff76df74] { font-size: 16px; color: #94a3b8; line-height: 1.6; margin: 0 0 32px; } .maintenance__contact[data-v-ff76df74] { font-size: 14px; color: #64748b; } .maintenance__contact a[data-v-ff76df74] { color: #818cf8; text-decoration: none; } .maintenance__contact a[data-v-ff76df74]:hover { text-decoration: underline; } /* ══════════════════════════════════════════════════════════════ 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-a75dd479]: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-a75dd479] { /* 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-a75dd479] { /* 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-a75dd479]: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-a75dd479], .theme-mode-light[data-v-a75dd479] { /* ═══════════════════════════════════════════════════════════════ 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-a75dd479], .theme-mode-dark[data-v-a75dd479] { /* ═══════════════════════════════════════════════════════════════ 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-a75dd479]: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-a75dd479]: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-a75dd479] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-a75dd479] { 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-a75dd479]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-a75dd479], input[disabled][data-v-a75dd479] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-a75dd479] { opacity: 0.9; } input[readonly][data-v-a75dd479] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-a75dd479] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-a75dd479]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-a75dd479]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-a75dd479]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-a75dd479] { 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-a75dd479]:nth-child(odd), .list-card-desktop__wrapper[data-v-a75dd479]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-a75dd479]:nth-child(even), .list-card-desktop__wrapper[data-v-a75dd479]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-a75dd479]:nth-child(odd), .listCardDesktopWrapper[data-v-a75dd479]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-a75dd479]:nth-child(even), .listCardDesktopWrapper[data-v-a75dd479]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-a75dd479] { 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-a75dd479] { cursor: pointer; } .card-layout--selectionnable[data-v-a75dd479]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-a75dd479] { cursor: auto; } .card-layout--drawer[data-v-a75dd479] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-a75dd479] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-a75dd479] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-a75dd479] { 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-a75dd479] { 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-a75dd479] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-a75dd479]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-a75dd479] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-a75dd479] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-a75dd479] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-a75dd479] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-a75dd479] { 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-a75dd479] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-a75dd479] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-a75dd479] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-a75dd479] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-a75dd479] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-a75dd479] { background-color: #eb1515; } .color-chip--dossiers[data-v-a75dd479] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-a75dd479] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-a75dd479] { background-color: #00a79b; } .color-chip--virements[data-v-a75dd479] { background-color: var(--secondary-400); } .color-chip--factures[data-v-a75dd479] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-a75dd479] { background-color: #eb1515; } .color-recherche-dossiers[data-v-a75dd479] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-a75dd479] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-a75dd479] { background-color: #00a79b; } .color-recherche-virements[data-v-a75dd479] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-a75dd479] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-a75dd479] { color: #00a79b; cursor: pointer; } .scrollable[data-v-a75dd479] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-a75dd479] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-a75dd479] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-a75dd479] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-a75dd479] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-a75dd479] { font-weight: 800; } .grid-cell--column[data-v-a75dd479] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-a75dd479] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-a75dd479] { fill: #00a79b; } .grid-cell--disabled[data-v-a75dd479] { color: #cccccc; } .grid-cell--disabled svg[data-v-a75dd479] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-a75dd479] { white-space: nowrap; } .grid-cell--danger svg[data-v-a75dd479] { fill: #eb1515; } .grid-cell--span-1[data-v-a75dd479] { grid-column: span 1; } .grid-cell--span-2[data-v-a75dd479] { grid-column: span 2; } .grid-cell--span-3[data-v-a75dd479] { grid-column: span 3; } .grid-cell--span-4[data-v-a75dd479] { grid-column: span 4; } .grid-cell--span-5[data-v-a75dd479] { grid-column: span 5; } .grid-cell--span-6[data-v-a75dd479] { grid-column: span 6; } .grid-cell--span-7[data-v-a75dd479] { grid-column: span 7; } .grid-cell--span-8[data-v-a75dd479] { grid-column: span 8; } .grid-cell--span-9[data-v-a75dd479] { grid-column: span 9; } .grid-cell--span-10[data-v-a75dd479] { grid-column: span 10; } .grid-cell--span-12[data-v-a75dd479] { grid-column: span 12; } .grid-cell--span-13[data-v-a75dd479] { grid-column: span 13; } .grid-cell--span-14[data-v-a75dd479] { grid-column: span 14; } .grid-cell--span-16[data-v-a75dd479] { grid-column: span 16; } .grid-cell--span-18[data-v-a75dd479] { grid-column: span 18; } .grid-cell--span-20[data-v-a75dd479] { grid-column: span 20; } .grid-cell--span-32[data-v-a75dd479] { grid-column: span 32; } .grid-cell--span-36[data-v-a75dd479] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-a75dd479] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-a75dd479] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-a75dd479] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-a75dd479] { justify-content: center !important; } .elem--bold span[data-v-a75dd479] { font-weight: 800; } .elem--column[data-v-a75dd479] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-a75dd479] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-a75dd479] { fill: #00a79b; } .elem--clickable[data-v-a75dd479]:hover { cursor: pointer; } .elem--disabled[data-v-a75dd479] { color: #cccccc; } .elem--disabled svg[data-v-a75dd479] { fill: #cccccc; } .elem--nowrap span[data-v-a75dd479] { white-space: nowrap; } .elem--danger svg[data-v-a75dd479] { fill: #eb1515; } .elem--span-1[data-v-a75dd479] { grid-column: span 1; } .elem--span-2[data-v-a75dd479] { grid-column: span 2; } .elem--span-3[data-v-a75dd479] { grid-column: span 3; } .elem--span-4[data-v-a75dd479] { grid-column: span 4; } .elem--span-5[data-v-a75dd479] { grid-column: span 5; } .elem--span-6[data-v-a75dd479] { grid-column: span 6; } .elem--span-7[data-v-a75dd479] { grid-column: span 7; } .elem--span-8[data-v-a75dd479] { grid-column: span 8; } .elem--span-9[data-v-a75dd479] { grid-column: span 9; } .elem--span-10[data-v-a75dd479] { grid-column: span 10; } .elem--span-12[data-v-a75dd479] { grid-column: span 12; } .elem--span-13[data-v-a75dd479] { grid-column: span 13; } .elem--span-14[data-v-a75dd479] { grid-column: span 14; } .elem--span-16[data-v-a75dd479] { grid-column: span 16; } .elem--span-18[data-v-a75dd479] { grid-column: span 18; } .elem--span-20[data-v-a75dd479] { grid-column: span 20; } .elem--span-32[data-v-a75dd479] { grid-column: span 32; } .elem--span-36[data-v-a75dd479] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-a75dd479] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-a75dd479] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-a75dd479]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-a75dd479] { display: flex; } /* flex-direction */ .flex-column[data-v-a75dd479] { flex-direction: column; } .flex-row[data-v-a75dd479] { flex-direction: row; } /* flex */ .flex-1[data-v-a75dd479] { flex: 1 !important; } .flex-2[data-v-a75dd479] { flex: 2; } .flex-3[data-v-a75dd479] { flex: 3; } .flex-3[data-v-a75dd479] { flex: 4; } .flex-5[data-v-a75dd479] { flex: 5; } .flex-auto[data-v-a75dd479] { flex: auto; } .flex-none[data-v-a75dd479] { flex: none; } .flex-content[data-v-a75dd479] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-a75dd479] { flex-wrap: wrap; } .flex-nowrap[data-v-a75dd479] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-a75dd479] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-a75dd479] { justify-content: flex-start; } .justify-content-end[data-v-a75dd479] { justify-content: flex-end; } .justify-content-baseline[data-v-a75dd479] { justify-content: baseline; } .justify-content-center[data-v-a75dd479] { justify-content: center; } .justify-content-space-between[data-v-a75dd479] { justify-content: space-between; } .justify-content-space-around[data-v-a75dd479] { justify-content: space-around; } .justify-content-space-evenly[data-v-a75dd479] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-a75dd479] { align-items: flex-start; } .align-items-flex-end[data-v-a75dd479] { align-items: flex-end; } .align-items-stretch[data-v-a75dd479] { align-items: stretch; } .align-items-baseline[data-v-a75dd479] { align-items: baseline; } .align-items-center[data-v-a75dd479] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-a75dd479] { align-content: flex-start; } .align-content-flex-end[data-v-a75dd479] { align-content: flex-end; } .align-content-center[data-v-a75dd479] { align-content: center; } .align-content-stretch[data-v-a75dd479] { align-content: stretch; } .align-content-space-between[data-v-a75dd479] { align-content: space-between; } .align-content-space-around[data-v-a75dd479] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-a75dd479] { align-self: flex-start; } .align-self-flex-end[data-v-a75dd479] { align-self: flex-end; } .align-self-stretch[data-v-a75dd479] { align-self: stretch; } .align-self-flex-baseline[data-v-a75dd479] { align-self: baseline; } .align-self-center[data-v-a75dd479] { align-self: center; } .align-self-auto[data-v-a75dd479] { align-self: auto; } .flex-gap-1[data-v-a75dd479] { gap: 4px; } .flex-gap-2[data-v-a75dd479] { gap: 8px; } .flex-gap-3[data-v-a75dd479] { gap: 12px; } .flex-gap-4[data-v-a75dd479] { gap: 16px; } .flex-gap-5[data-v-a75dd479] { gap: 20px; } .flex-gap-6[data-v-a75dd479] { gap: 24px; } .flex-gap-7[data-v-a75dd479] { gap: 28px; } .flex-gap-8[data-v-a75dd479] { gap: 32px; } .flex-gap-10[data-v-a75dd479] { gap: 40px; } .flex-gap-12[data-v-a75dd479] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-a75dd479] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-a75dd479] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-a75dd479] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-a75dd479] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-a75dd479] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-a75dd479] { display: none !important; } } .col-none[data-v-a75dd479] { display: none; } .col-auto[data-v-a75dd479] { grid-column: auto; } .col-1[data-v-a75dd479] { grid-column: span 1; } .col-2[data-v-a75dd479] { grid-column: span 2; } .col-3[data-v-a75dd479] { grid-column: span 3; } .col-4[data-v-a75dd479] { grid-column: span 4; } .col-5[data-v-a75dd479] { grid-column: span 5; } .col-6[data-v-a75dd479] { grid-column: span 6; } .col-7[data-v-a75dd479] { grid-column: span 7; } .col-8[data-v-a75dd479] { grid-column: span 8; } .col-9[data-v-a75dd479] { grid-column: span 9; } .col-10[data-v-a75dd479] { grid-column: span 10; } .col-12[data-v-a75dd479] { grid-column: span 12; } .col-13[data-v-a75dd479] { grid-column: span 13; } .col-14[data-v-a75dd479] { grid-column: span 14; } .col-15[data-v-a75dd479] { grid-column: span 15; } .col-16[data-v-a75dd479] { grid-column: span 16; } .col-18[data-v-a75dd479] { grid-column: span 18; } .col-20[data-v-a75dd479] { grid-column: span 20; } .col-22[data-v-a75dd479] { grid-column: span 22; } .col-24[data-v-a75dd479] { grid-column: span 24; } .col-26[data-v-a75dd479] { grid-column: span 26; } .col-27[data-v-a75dd479] { grid-column: span 27; } .col-28[data-v-a75dd479] { grid-column: span 28; } .col-30[data-v-a75dd479] { grid-column: span 30; } .col-36[data-v-a75dd479] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-a75dd479] { display: none; } .col-md-36[data-v-a75dd479] { grid-column: span 36; } .col-md-28[data-v-a75dd479] { grid-column: span 28; } .col-md-27[data-v-a75dd479] { grid-column: span 27; } .col-md-24[data-v-a75dd479] { grid-column: span 24; } .col-md-22[data-v-a75dd479] { grid-column: span 22; } .col-md-20[data-v-a75dd479] { grid-column: span 20; } .col-md-19[data-v-a75dd479] { grid-column: span 19; } .col-md-18[data-v-a75dd479] { grid-column: span 18; } .col-md-17[data-v-a75dd479] { grid-column: span 17; } .col-md-16[data-v-a75dd479] { grid-column: span 16; } .col-md-15[data-v-a75dd479] { grid-column: span 15; } .col-md-14[data-v-a75dd479] { grid-column: span 14; } .col-md-13[data-v-a75dd479] { grid-column: span 13; } .col-md-12[data-v-a75dd479] { grid-column: span 12; } .col-md-10[data-v-a75dd479] { grid-column: span 10; } .col-md-9[data-v-a75dd479] { grid-column: span 9; } .col-md-8[data-v-a75dd479] { grid-column: span 8; } .col-md-6[data-v-a75dd479] { grid-column: span 6; } .col-md-5[data-v-a75dd479] { grid-column: span 5; } .col-md-4[data-v-a75dd479] { grid-column: span 4; } .col-md-3[data-v-a75dd479] { grid-column: span 3; } .col-md-2[data-v-a75dd479] { grid-column: span 2; } .col-md-1[data-v-a75dd479] { grid-column: span 1; } .col-md-auto[data-v-a75dd479] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-a75dd479] { display: none; } .col-sm-36[data-v-a75dd479] { grid-column: span 36; } .col-sm-32[data-v-a75dd479] { grid-column: span 32; } .col-sm-28[data-v-a75dd479] { grid-column: span 28; } .col-sm-27[data-v-a75dd479] { grid-column: span 27; } .col-sm-24[data-v-a75dd479] { grid-column: span 24; } .col-sm-22[data-v-a75dd479] { grid-column: span 22; } .col-sm-20[data-v-a75dd479] { grid-column: span 20; } .col-sm-18[data-v-a75dd479] { grid-column: span 18; } .col-sm-16[data-v-a75dd479] { grid-column: span 16; } .col-sm-15[data-v-a75dd479] { grid-column: span 15; } .col-sm-14[data-v-a75dd479] { grid-column: span 14; } .col-sm-13[data-v-a75dd479] { grid-column: span 12; } .col-sm-12[data-v-a75dd479] { grid-column: span 12; } .col-sm-10[data-v-a75dd479] { grid-column: span 10; } .col-sm-9[data-v-a75dd479] { grid-column: span 8; } .col-sm-8[data-v-a75dd479] { grid-column: span 8; } .col-sm-6[data-v-a75dd479] { grid-column: span 6; } .col-sm-4[data-v-a75dd479] { grid-column: span 4; } .col-sm-auto[data-v-a75dd479] { grid-column: auto; } } .fade-enter-active[data-v-a75dd479] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-a75dd479] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-a75dd479], .fade-leave-to[data-v-a75dd479] { opacity: 0; } .age-gate[data-v-a75dd479] { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); } .age-gate__modal[data-v-a75dd479] { width: 100%; max-width: 480px; background: #ffffff; border-radius: 24px; padding: 40px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); animation: modal-enter-a75dd479 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .age-gate__header[data-v-a75dd479] { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 24px; } .age-gate__icon[data-v-a75dd479] { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffdfdf 0%, #fff1f1 100%); border: 2px solid #ffc5c5; border-radius: 20px; color: #eb1515; } .age-gate__title[data-v-a75dd479] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 24px; font-weight: 700; color: #2b303a; text-align: center; margin: 0; } .age-gate__content[data-v-a75dd479] { margin-bottom: 32px; } .age-gate__text[data-v-a75dd479] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 15px; line-height: 1.6; color: #647184; text-align: center; margin: 0 0 20px; } .age-gate__warning[data-v-a75dd479] { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; background: linear-gradient(135deg, #ffedd5 0%, #fff7ed 100%); border: 1px solid #fed7aa; border-radius: 12px; margin-bottom: 20px; } .age-gate__warning svg[data-v-a75dd479] { color: #d9580a; flex-shrink: 0; } .age-gate__warning span[data-v-a75dd479] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; font-weight: 600; color: #b94808; } .age-gate__list[data-v-a75dd479] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .age-gate__list li[data-v-a75dd479] { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: #f8f9fb; border-radius: 10px; } .age-gate__list li svg[data-v-a75dd479] { color: #2cbb66; flex-shrink: 0; margin-top: 2px; } .age-gate__list li span[data-v-a75dd479] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 14px; color: #4d5462; line-height: 1.4; } .age-gate__actions[data-v-a75dd479] { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .age-gate__footer[data-v-a75dd479] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 12px; color: #b4bfce; text-align: center; margin: 0; line-height: 1.5; } @keyframes modal-enter-a75dd479 { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .age-gate-fade-enter-active[data-v-a75dd479] { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .age-gate-fade-enter-active .age-gate__modal[data-v-a75dd479] { animation: modal-enter-a75dd479 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .age-gate-fade-leave-active[data-v-a75dd479] { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .age-gate-fade-enter-from[data-v-a75dd479], .age-gate-fade-leave-to[data-v-a75dd479] { opacity: 0; } @media (max-width: 720px) { .age-gate[data-v-a75dd479] { padding: 16px; } .age-gate__modal[data-v-a75dd479] { padding: 28px 24px; border-radius: 20px; } .age-gate__icon[data-v-a75dd479] { width: 60px; height: 60px; } .age-gate__title[data-v-a75dd479] { font-size: 20px; } .age-gate__text[data-v-a75dd479] { font-size: 14px; } .age-gate__list li[data-v-a75dd479] { padding: 10px 14px; min-height: 44px; } .age-gate__list li span[data-v-a75dd479] { font-size: 13px; } } /* ══════════════════════════════════════════════════════════════ 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-b00a7842]: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-b00a7842] { /* 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-b00a7842] { /* 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-b00a7842]: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-b00a7842], .theme-mode-light[data-v-b00a7842] { /* ═══════════════════════════════════════════════════════════════ 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-b00a7842], .theme-mode-dark[data-v-b00a7842] { /* ═══════════════════════════════════════════════════════════════ 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-b00a7842]: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-b00a7842]: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-b00a7842] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-b00a7842] { 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-b00a7842]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-b00a7842], input[disabled][data-v-b00a7842] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-b00a7842] { opacity: 0.9; } input[readonly][data-v-b00a7842] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-b00a7842] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-b00a7842]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-b00a7842]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-b00a7842]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-b00a7842] { 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-b00a7842]:nth-child(odd), .list-card-desktop__wrapper[data-v-b00a7842]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-b00a7842]:nth-child(even), .list-card-desktop__wrapper[data-v-b00a7842]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-b00a7842]:nth-child(odd), .listCardDesktopWrapper[data-v-b00a7842]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-b00a7842]:nth-child(even), .listCardDesktopWrapper[data-v-b00a7842]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-b00a7842] { 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-b00a7842] { cursor: pointer; } .card-layout--selectionnable[data-v-b00a7842]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-b00a7842] { cursor: auto; } .card-layout--drawer[data-v-b00a7842] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-b00a7842] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-b00a7842] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-b00a7842] { 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-b00a7842] { 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-b00a7842] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-b00a7842]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-b00a7842] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-b00a7842] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-b00a7842] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-b00a7842] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-b00a7842] { 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-b00a7842] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-b00a7842] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-b00a7842] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-b00a7842] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-b00a7842] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-b00a7842] { background-color: #eb1515; } .color-chip--dossiers[data-v-b00a7842] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-b00a7842] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-b00a7842] { background-color: #00a79b; } .color-chip--virements[data-v-b00a7842] { background-color: var(--secondary-400); } .color-chip--factures[data-v-b00a7842] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-b00a7842] { background-color: #eb1515; } .color-recherche-dossiers[data-v-b00a7842] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-b00a7842] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-b00a7842] { background-color: #00a79b; } .color-recherche-virements[data-v-b00a7842] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-b00a7842] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-b00a7842] { color: #00a79b; cursor: pointer; } .scrollable[data-v-b00a7842] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-b00a7842] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-b00a7842] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-b00a7842] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-b00a7842] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-b00a7842] { font-weight: 800; } .grid-cell--column[data-v-b00a7842] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-b00a7842] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-b00a7842] { fill: #00a79b; } .grid-cell--disabled[data-v-b00a7842] { color: #cccccc; } .grid-cell--disabled svg[data-v-b00a7842] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-b00a7842] { white-space: nowrap; } .grid-cell--danger svg[data-v-b00a7842] { fill: #eb1515; } .grid-cell--span-1[data-v-b00a7842] { grid-column: span 1; } .grid-cell--span-2[data-v-b00a7842] { grid-column: span 2; } .grid-cell--span-3[data-v-b00a7842] { grid-column: span 3; } .grid-cell--span-4[data-v-b00a7842] { grid-column: span 4; } .grid-cell--span-5[data-v-b00a7842] { grid-column: span 5; } .grid-cell--span-6[data-v-b00a7842] { grid-column: span 6; } .grid-cell--span-7[data-v-b00a7842] { grid-column: span 7; } .grid-cell--span-8[data-v-b00a7842] { grid-column: span 8; } .grid-cell--span-9[data-v-b00a7842] { grid-column: span 9; } .grid-cell--span-10[data-v-b00a7842] { grid-column: span 10; } .grid-cell--span-12[data-v-b00a7842] { grid-column: span 12; } .grid-cell--span-13[data-v-b00a7842] { grid-column: span 13; } .grid-cell--span-14[data-v-b00a7842] { grid-column: span 14; } .grid-cell--span-16[data-v-b00a7842] { grid-column: span 16; } .grid-cell--span-18[data-v-b00a7842] { grid-column: span 18; } .grid-cell--span-20[data-v-b00a7842] { grid-column: span 20; } .grid-cell--span-32[data-v-b00a7842] { grid-column: span 32; } .grid-cell--span-36[data-v-b00a7842] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-b00a7842] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-b00a7842] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-b00a7842] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-b00a7842] { justify-content: center !important; } .elem--bold span[data-v-b00a7842] { font-weight: 800; } .elem--column[data-v-b00a7842] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-b00a7842] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-b00a7842] { fill: #00a79b; } .elem--clickable[data-v-b00a7842]:hover { cursor: pointer; } .elem--disabled[data-v-b00a7842] { color: #cccccc; } .elem--disabled svg[data-v-b00a7842] { fill: #cccccc; } .elem--nowrap span[data-v-b00a7842] { white-space: nowrap; } .elem--danger svg[data-v-b00a7842] { fill: #eb1515; } .elem--span-1[data-v-b00a7842] { grid-column: span 1; } .elem--span-2[data-v-b00a7842] { grid-column: span 2; } .elem--span-3[data-v-b00a7842] { grid-column: span 3; } .elem--span-4[data-v-b00a7842] { grid-column: span 4; } .elem--span-5[data-v-b00a7842] { grid-column: span 5; } .elem--span-6[data-v-b00a7842] { grid-column: span 6; } .elem--span-7[data-v-b00a7842] { grid-column: span 7; } .elem--span-8[data-v-b00a7842] { grid-column: span 8; } .elem--span-9[data-v-b00a7842] { grid-column: span 9; } .elem--span-10[data-v-b00a7842] { grid-column: span 10; } .elem--span-12[data-v-b00a7842] { grid-column: span 12; } .elem--span-13[data-v-b00a7842] { grid-column: span 13; } .elem--span-14[data-v-b00a7842] { grid-column: span 14; } .elem--span-16[data-v-b00a7842] { grid-column: span 16; } .elem--span-18[data-v-b00a7842] { grid-column: span 18; } .elem--span-20[data-v-b00a7842] { grid-column: span 20; } .elem--span-32[data-v-b00a7842] { grid-column: span 32; } .elem--span-36[data-v-b00a7842] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-b00a7842] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-b00a7842] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-b00a7842]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-b00a7842] { display: flex; } /* flex-direction */ .flex-column[data-v-b00a7842] { flex-direction: column; } .flex-row[data-v-b00a7842] { flex-direction: row; } /* flex */ .flex-1[data-v-b00a7842] { flex: 1 !important; } .flex-2[data-v-b00a7842] { flex: 2; } .flex-3[data-v-b00a7842] { flex: 3; } .flex-3[data-v-b00a7842] { flex: 4; } .flex-5[data-v-b00a7842] { flex: 5; } .flex-auto[data-v-b00a7842] { flex: auto; } .flex-none[data-v-b00a7842] { flex: none; } .flex-content[data-v-b00a7842] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-b00a7842] { flex-wrap: wrap; } .flex-nowrap[data-v-b00a7842] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-b00a7842] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-b00a7842] { justify-content: flex-start; } .justify-content-end[data-v-b00a7842] { justify-content: flex-end; } .justify-content-baseline[data-v-b00a7842] { justify-content: baseline; } .justify-content-center[data-v-b00a7842] { justify-content: center; } .justify-content-space-between[data-v-b00a7842] { justify-content: space-between; } .justify-content-space-around[data-v-b00a7842] { justify-content: space-around; } .justify-content-space-evenly[data-v-b00a7842] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-b00a7842] { align-items: flex-start; } .align-items-flex-end[data-v-b00a7842] { align-items: flex-end; } .align-items-stretch[data-v-b00a7842] { align-items: stretch; } .align-items-baseline[data-v-b00a7842] { align-items: baseline; } .align-items-center[data-v-b00a7842] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-b00a7842] { align-content: flex-start; } .align-content-flex-end[data-v-b00a7842] { align-content: flex-end; } .align-content-center[data-v-b00a7842] { align-content: center; } .align-content-stretch[data-v-b00a7842] { align-content: stretch; } .align-content-space-between[data-v-b00a7842] { align-content: space-between; } .align-content-space-around[data-v-b00a7842] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-b00a7842] { align-self: flex-start; } .align-self-flex-end[data-v-b00a7842] { align-self: flex-end; } .align-self-stretch[data-v-b00a7842] { align-self: stretch; } .align-self-flex-baseline[data-v-b00a7842] { align-self: baseline; } .align-self-center[data-v-b00a7842] { align-self: center; } .align-self-auto[data-v-b00a7842] { align-self: auto; } .flex-gap-1[data-v-b00a7842] { gap: 4px; } .flex-gap-2[data-v-b00a7842] { gap: 8px; } .flex-gap-3[data-v-b00a7842] { gap: 12px; } .flex-gap-4[data-v-b00a7842] { gap: 16px; } .flex-gap-5[data-v-b00a7842] { gap: 20px; } .flex-gap-6[data-v-b00a7842] { gap: 24px; } .flex-gap-7[data-v-b00a7842] { gap: 28px; } .flex-gap-8[data-v-b00a7842] { gap: 32px; } .flex-gap-10[data-v-b00a7842] { gap: 40px; } .flex-gap-12[data-v-b00a7842] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-b00a7842] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-b00a7842] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-b00a7842] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-b00a7842] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-b00a7842] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-b00a7842] { display: none !important; } } .col-none[data-v-b00a7842] { display: none; } .col-auto[data-v-b00a7842] { grid-column: auto; } .col-1[data-v-b00a7842] { grid-column: span 1; } .col-2[data-v-b00a7842] { grid-column: span 2; } .col-3[data-v-b00a7842] { grid-column: span 3; } .col-4[data-v-b00a7842] { grid-column: span 4; } .col-5[data-v-b00a7842] { grid-column: span 5; } .col-6[data-v-b00a7842] { grid-column: span 6; } .col-7[data-v-b00a7842] { grid-column: span 7; } .col-8[data-v-b00a7842] { grid-column: span 8; } .col-9[data-v-b00a7842] { grid-column: span 9; } .col-10[data-v-b00a7842] { grid-column: span 10; } .col-12[data-v-b00a7842] { grid-column: span 12; } .col-13[data-v-b00a7842] { grid-column: span 13; } .col-14[data-v-b00a7842] { grid-column: span 14; } .col-15[data-v-b00a7842] { grid-column: span 15; } .col-16[data-v-b00a7842] { grid-column: span 16; } .col-18[data-v-b00a7842] { grid-column: span 18; } .col-20[data-v-b00a7842] { grid-column: span 20; } .col-22[data-v-b00a7842] { grid-column: span 22; } .col-24[data-v-b00a7842] { grid-column: span 24; } .col-26[data-v-b00a7842] { grid-column: span 26; } .col-27[data-v-b00a7842] { grid-column: span 27; } .col-28[data-v-b00a7842] { grid-column: span 28; } .col-30[data-v-b00a7842] { grid-column: span 30; } .col-36[data-v-b00a7842] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-b00a7842] { display: none; } .col-md-36[data-v-b00a7842] { grid-column: span 36; } .col-md-28[data-v-b00a7842] { grid-column: span 28; } .col-md-27[data-v-b00a7842] { grid-column: span 27; } .col-md-24[data-v-b00a7842] { grid-column: span 24; } .col-md-22[data-v-b00a7842] { grid-column: span 22; } .col-md-20[data-v-b00a7842] { grid-column: span 20; } .col-md-19[data-v-b00a7842] { grid-column: span 19; } .col-md-18[data-v-b00a7842] { grid-column: span 18; } .col-md-17[data-v-b00a7842] { grid-column: span 17; } .col-md-16[data-v-b00a7842] { grid-column: span 16; } .col-md-15[data-v-b00a7842] { grid-column: span 15; } .col-md-14[data-v-b00a7842] { grid-column: span 14; } .col-md-13[data-v-b00a7842] { grid-column: span 13; } .col-md-12[data-v-b00a7842] { grid-column: span 12; } .col-md-10[data-v-b00a7842] { grid-column: span 10; } .col-md-9[data-v-b00a7842] { grid-column: span 9; } .col-md-8[data-v-b00a7842] { grid-column: span 8; } .col-md-6[data-v-b00a7842] { grid-column: span 6; } .col-md-5[data-v-b00a7842] { grid-column: span 5; } .col-md-4[data-v-b00a7842] { grid-column: span 4; } .col-md-3[data-v-b00a7842] { grid-column: span 3; } .col-md-2[data-v-b00a7842] { grid-column: span 2; } .col-md-1[data-v-b00a7842] { grid-column: span 1; } .col-md-auto[data-v-b00a7842] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-b00a7842] { display: none; } .col-sm-36[data-v-b00a7842] { grid-column: span 36; } .col-sm-32[data-v-b00a7842] { grid-column: span 32; } .col-sm-28[data-v-b00a7842] { grid-column: span 28; } .col-sm-27[data-v-b00a7842] { grid-column: span 27; } .col-sm-24[data-v-b00a7842] { grid-column: span 24; } .col-sm-22[data-v-b00a7842] { grid-column: span 22; } .col-sm-20[data-v-b00a7842] { grid-column: span 20; } .col-sm-18[data-v-b00a7842] { grid-column: span 18; } .col-sm-16[data-v-b00a7842] { grid-column: span 16; } .col-sm-15[data-v-b00a7842] { grid-column: span 15; } .col-sm-14[data-v-b00a7842] { grid-column: span 14; } .col-sm-13[data-v-b00a7842] { grid-column: span 12; } .col-sm-12[data-v-b00a7842] { grid-column: span 12; } .col-sm-10[data-v-b00a7842] { grid-column: span 10; } .col-sm-9[data-v-b00a7842] { grid-column: span 8; } .col-sm-8[data-v-b00a7842] { grid-column: span 8; } .col-sm-6[data-v-b00a7842] { grid-column: span 6; } .col-sm-4[data-v-b00a7842] { grid-column: span 4; } .col-sm-auto[data-v-b00a7842] { grid-column: auto; } } .fade-enter-active[data-v-b00a7842] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-b00a7842] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-b00a7842], .fade-leave-to[data-v-b00a7842] { opacity: 0; } /* ══════════════════════════════════════════════════════════════ DIALOG COMPONENT — Styles BEM ══════════════════════════════════════════════════════════════ */ .dialog__title[data-v-b00a7842] { text-align: center; } .dialog__title--success[data-v-b00a7842] { color: #2cbb66; } .dialog__title--warning[data-v-b00a7842] { color: #eb1515; } .dialog__content[data-v-b00a7842] { color: var(--secondary-950); text-align: left; max-height: 40vh; overflow-y: auto; overflow-x: hidden; word-wrap: break-word; margin-top: 24px; } .dialog__content > div[data-v-b00a7842] { min-height: 12px; } .dialog__content[data-v-b00a7842] .basic-text { display: block; white-space: break-spaces; overflow-wrap: break-word; } .dialog__image[data-v-b00a7842] { height: 20vh; } /* Override du modal parent */ [data-v-b00a7842] .modal__dialog { max-width: 500px; border-radius: 16px; margin: 18px; } /* Legacy aliases (rétro-compatibilité) */ .title[data-v-b00a7842] { text-align: center; } .title--success[data-v-b00a7842] { color: #2cbb66; } .title--warning[data-v-b00a7842] { color: #eb1515; } .content[data-v-b00a7842] { color: var(--secondary-950); text-align: left; max-height: 40vh; overflow-y: auto; overflow-x: hidden; word-wrap: break-word; margin-top: 24px; } .content > div[data-v-b00a7842] { min-height: 12px; } .content[data-v-b00a7842] .basic-text { display: block; white-space: break-spaces; overflow-wrap: break-word; } .image[data-v-b00a7842] { height: 20vh; } @media (max-width: 720px) { [data-v-b00a7842] .modal__dialog { max-width: 100%; margin: 0; } .dialog__image[data-v-b00a7842], .image[data-v-b00a7842] { height: 15vh; } .dialog__content[data-v-b00a7842], .content[data-v-b00a7842] { margin-top: 16px; max-height: 35vh; } } /* ══════════════════════════════════════════════════════════════ 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-49d53399]: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-49d53399] { /* 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-49d53399] { /* 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-49d53399]: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-49d53399], .theme-mode-light[data-v-49d53399] { /* ═══════════════════════════════════════════════════════════════ 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-49d53399], .theme-mode-dark[data-v-49d53399] { /* ═══════════════════════════════════════════════════════════════ 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-49d53399]: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-49d53399]: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-49d53399] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-49d53399] { 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-49d53399]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-49d53399], input[disabled][data-v-49d53399] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-49d53399] { opacity: 0.9; } input[readonly][data-v-49d53399] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-49d53399] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-49d53399]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-49d53399]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-49d53399]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-49d53399] { 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-49d53399]:nth-child(odd), .list-card-desktop__wrapper[data-v-49d53399]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-49d53399]:nth-child(even), .list-card-desktop__wrapper[data-v-49d53399]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-49d53399]:nth-child(odd), .listCardDesktopWrapper[data-v-49d53399]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-49d53399]:nth-child(even), .listCardDesktopWrapper[data-v-49d53399]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-49d53399] { 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-49d53399] { cursor: pointer; } .card-layout--selectionnable[data-v-49d53399]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-49d53399] { cursor: auto; } .card-layout--drawer[data-v-49d53399] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-49d53399] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-49d53399] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-49d53399] { 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-49d53399] { 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-49d53399] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-49d53399]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-49d53399] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-49d53399] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-49d53399] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-49d53399] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-49d53399] { 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-49d53399] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-49d53399] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-49d53399] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-49d53399] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-49d53399] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-49d53399] { background-color: #eb1515; } .color-chip--dossiers[data-v-49d53399] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-49d53399] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-49d53399] { background-color: #00a79b; } .color-chip--virements[data-v-49d53399] { background-color: var(--secondary-400); } .color-chip--factures[data-v-49d53399] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-49d53399] { background-color: #eb1515; } .color-recherche-dossiers[data-v-49d53399] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-49d53399] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-49d53399] { background-color: #00a79b; } .color-recherche-virements[data-v-49d53399] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-49d53399] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-49d53399] { color: #00a79b; cursor: pointer; } .scrollable[data-v-49d53399] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-49d53399] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-49d53399] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-49d53399] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-49d53399] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-49d53399] { font-weight: 800; } .grid-cell--column[data-v-49d53399] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-49d53399] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-49d53399] { fill: #00a79b; } .grid-cell--disabled[data-v-49d53399] { color: #cccccc; } .grid-cell--disabled svg[data-v-49d53399] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-49d53399] { white-space: nowrap; } .grid-cell--danger svg[data-v-49d53399] { fill: #eb1515; } .grid-cell--span-1[data-v-49d53399] { grid-column: span 1; } .grid-cell--span-2[data-v-49d53399] { grid-column: span 2; } .grid-cell--span-3[data-v-49d53399] { grid-column: span 3; } .grid-cell--span-4[data-v-49d53399] { grid-column: span 4; } .grid-cell--span-5[data-v-49d53399] { grid-column: span 5; } .grid-cell--span-6[data-v-49d53399] { grid-column: span 6; } .grid-cell--span-7[data-v-49d53399] { grid-column: span 7; } .grid-cell--span-8[data-v-49d53399] { grid-column: span 8; } .grid-cell--span-9[data-v-49d53399] { grid-column: span 9; } .grid-cell--span-10[data-v-49d53399] { grid-column: span 10; } .grid-cell--span-12[data-v-49d53399] { grid-column: span 12; } .grid-cell--span-13[data-v-49d53399] { grid-column: span 13; } .grid-cell--span-14[data-v-49d53399] { grid-column: span 14; } .grid-cell--span-16[data-v-49d53399] { grid-column: span 16; } .grid-cell--span-18[data-v-49d53399] { grid-column: span 18; } .grid-cell--span-20[data-v-49d53399] { grid-column: span 20; } .grid-cell--span-32[data-v-49d53399] { grid-column: span 32; } .grid-cell--span-36[data-v-49d53399] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-49d53399] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-49d53399] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-49d53399] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-49d53399] { justify-content: center !important; } .elem--bold span[data-v-49d53399] { font-weight: 800; } .elem--column[data-v-49d53399] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-49d53399] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-49d53399] { fill: #00a79b; } .elem--clickable[data-v-49d53399]:hover { cursor: pointer; } .elem--disabled[data-v-49d53399] { color: #cccccc; } .elem--disabled svg[data-v-49d53399] { fill: #cccccc; } .elem--nowrap span[data-v-49d53399] { white-space: nowrap; } .elem--danger svg[data-v-49d53399] { fill: #eb1515; } .elem--span-1[data-v-49d53399] { grid-column: span 1; } .elem--span-2[data-v-49d53399] { grid-column: span 2; } .elem--span-3[data-v-49d53399] { grid-column: span 3; } .elem--span-4[data-v-49d53399] { grid-column: span 4; } .elem--span-5[data-v-49d53399] { grid-column: span 5; } .elem--span-6[data-v-49d53399] { grid-column: span 6; } .elem--span-7[data-v-49d53399] { grid-column: span 7; } .elem--span-8[data-v-49d53399] { grid-column: span 8; } .elem--span-9[data-v-49d53399] { grid-column: span 9; } .elem--span-10[data-v-49d53399] { grid-column: span 10; } .elem--span-12[data-v-49d53399] { grid-column: span 12; } .elem--span-13[data-v-49d53399] { grid-column: span 13; } .elem--span-14[data-v-49d53399] { grid-column: span 14; } .elem--span-16[data-v-49d53399] { grid-column: span 16; } .elem--span-18[data-v-49d53399] { grid-column: span 18; } .elem--span-20[data-v-49d53399] { grid-column: span 20; } .elem--span-32[data-v-49d53399] { grid-column: span 32; } .elem--span-36[data-v-49d53399] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-49d53399] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-49d53399] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-49d53399]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-49d53399] { display: flex; } /* flex-direction */ .flex-column[data-v-49d53399] { flex-direction: column; } .flex-row[data-v-49d53399] { flex-direction: row; } /* flex */ .flex-1[data-v-49d53399] { flex: 1 !important; } .flex-2[data-v-49d53399] { flex: 2; } .flex-3[data-v-49d53399] { flex: 3; } .flex-3[data-v-49d53399] { flex: 4; } .flex-5[data-v-49d53399] { flex: 5; } .flex-auto[data-v-49d53399] { flex: auto; } .flex-none[data-v-49d53399] { flex: none; } .flex-content[data-v-49d53399] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-49d53399] { flex-wrap: wrap; } .flex-nowrap[data-v-49d53399] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-49d53399] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-49d53399] { justify-content: flex-start; } .justify-content-end[data-v-49d53399] { justify-content: flex-end; } .justify-content-baseline[data-v-49d53399] { justify-content: baseline; } .justify-content-center[data-v-49d53399] { justify-content: center; } .justify-content-space-between[data-v-49d53399] { justify-content: space-between; } .justify-content-space-around[data-v-49d53399] { justify-content: space-around; } .justify-content-space-evenly[data-v-49d53399] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-49d53399] { align-items: flex-start; } .align-items-flex-end[data-v-49d53399] { align-items: flex-end; } .align-items-stretch[data-v-49d53399] { align-items: stretch; } .align-items-baseline[data-v-49d53399] { align-items: baseline; } .align-items-center[data-v-49d53399] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-49d53399] { align-content: flex-start; } .align-content-flex-end[data-v-49d53399] { align-content: flex-end; } .align-content-center[data-v-49d53399] { align-content: center; } .align-content-stretch[data-v-49d53399] { align-content: stretch; } .align-content-space-between[data-v-49d53399] { align-content: space-between; } .align-content-space-around[data-v-49d53399] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-49d53399] { align-self: flex-start; } .align-self-flex-end[data-v-49d53399] { align-self: flex-end; } .align-self-stretch[data-v-49d53399] { align-self: stretch; } .align-self-flex-baseline[data-v-49d53399] { align-self: baseline; } .align-self-center[data-v-49d53399] { align-self: center; } .align-self-auto[data-v-49d53399] { align-self: auto; } .flex-gap-1[data-v-49d53399] { gap: 4px; } .flex-gap-2[data-v-49d53399] { gap: 8px; } .flex-gap-3[data-v-49d53399] { gap: 12px; } .flex-gap-4[data-v-49d53399] { gap: 16px; } .flex-gap-5[data-v-49d53399] { gap: 20px; } .flex-gap-6[data-v-49d53399] { gap: 24px; } .flex-gap-7[data-v-49d53399] { gap: 28px; } .flex-gap-8[data-v-49d53399] { gap: 32px; } .flex-gap-10[data-v-49d53399] { gap: 40px; } .flex-gap-12[data-v-49d53399] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-49d53399] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-49d53399] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-49d53399] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-49d53399] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-49d53399] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-49d53399] { display: none !important; } } .col-none[data-v-49d53399] { display: none; } .col-auto[data-v-49d53399] { grid-column: auto; } .col-1[data-v-49d53399] { grid-column: span 1; } .col-2[data-v-49d53399] { grid-column: span 2; } .col-3[data-v-49d53399] { grid-column: span 3; } .col-4[data-v-49d53399] { grid-column: span 4; } .col-5[data-v-49d53399] { grid-column: span 5; } .col-6[data-v-49d53399] { grid-column: span 6; } .col-7[data-v-49d53399] { grid-column: span 7; } .col-8[data-v-49d53399] { grid-column: span 8; } .col-9[data-v-49d53399] { grid-column: span 9; } .col-10[data-v-49d53399] { grid-column: span 10; } .col-12[data-v-49d53399] { grid-column: span 12; } .col-13[data-v-49d53399] { grid-column: span 13; } .col-14[data-v-49d53399] { grid-column: span 14; } .col-15[data-v-49d53399] { grid-column: span 15; } .col-16[data-v-49d53399] { grid-column: span 16; } .col-18[data-v-49d53399] { grid-column: span 18; } .col-20[data-v-49d53399] { grid-column: span 20; } .col-22[data-v-49d53399] { grid-column: span 22; } .col-24[data-v-49d53399] { grid-column: span 24; } .col-26[data-v-49d53399] { grid-column: span 26; } .col-27[data-v-49d53399] { grid-column: span 27; } .col-28[data-v-49d53399] { grid-column: span 28; } .col-30[data-v-49d53399] { grid-column: span 30; } .col-36[data-v-49d53399] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-49d53399] { display: none; } .col-md-36[data-v-49d53399] { grid-column: span 36; } .col-md-28[data-v-49d53399] { grid-column: span 28; } .col-md-27[data-v-49d53399] { grid-column: span 27; } .col-md-24[data-v-49d53399] { grid-column: span 24; } .col-md-22[data-v-49d53399] { grid-column: span 22; } .col-md-20[data-v-49d53399] { grid-column: span 20; } .col-md-19[data-v-49d53399] { grid-column: span 19; } .col-md-18[data-v-49d53399] { grid-column: span 18; } .col-md-17[data-v-49d53399] { grid-column: span 17; } .col-md-16[data-v-49d53399] { grid-column: span 16; } .col-md-15[data-v-49d53399] { grid-column: span 15; } .col-md-14[data-v-49d53399] { grid-column: span 14; } .col-md-13[data-v-49d53399] { grid-column: span 13; } .col-md-12[data-v-49d53399] { grid-column: span 12; } .col-md-10[data-v-49d53399] { grid-column: span 10; } .col-md-9[data-v-49d53399] { grid-column: span 9; } .col-md-8[data-v-49d53399] { grid-column: span 8; } .col-md-6[data-v-49d53399] { grid-column: span 6; } .col-md-5[data-v-49d53399] { grid-column: span 5; } .col-md-4[data-v-49d53399] { grid-column: span 4; } .col-md-3[data-v-49d53399] { grid-column: span 3; } .col-md-2[data-v-49d53399] { grid-column: span 2; } .col-md-1[data-v-49d53399] { grid-column: span 1; } .col-md-auto[data-v-49d53399] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-49d53399] { display: none; } .col-sm-36[data-v-49d53399] { grid-column: span 36; } .col-sm-32[data-v-49d53399] { grid-column: span 32; } .col-sm-28[data-v-49d53399] { grid-column: span 28; } .col-sm-27[data-v-49d53399] { grid-column: span 27; } .col-sm-24[data-v-49d53399] { grid-column: span 24; } .col-sm-22[data-v-49d53399] { grid-column: span 22; } .col-sm-20[data-v-49d53399] { grid-column: span 20; } .col-sm-18[data-v-49d53399] { grid-column: span 18; } .col-sm-16[data-v-49d53399] { grid-column: span 16; } .col-sm-15[data-v-49d53399] { grid-column: span 15; } .col-sm-14[data-v-49d53399] { grid-column: span 14; } .col-sm-13[data-v-49d53399] { grid-column: span 12; } .col-sm-12[data-v-49d53399] { grid-column: span 12; } .col-sm-10[data-v-49d53399] { grid-column: span 10; } .col-sm-9[data-v-49d53399] { grid-column: span 8; } .col-sm-8[data-v-49d53399] { grid-column: span 8; } .col-sm-6[data-v-49d53399] { grid-column: span 6; } .col-sm-4[data-v-49d53399] { grid-column: span 4; } .col-sm-auto[data-v-49d53399] { grid-column: auto; } } .fade-enter-active[data-v-49d53399] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-49d53399] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-49d53399], .fade-leave-to[data-v-49d53399] { opacity: 0; } .chat-widget[data-v-49d53399] { position: fixed; bottom: 24px; right: 24px; z-index: 9999; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .chat-widget--hidden[data-v-49d53399] { transform: translateY(100px); pointer-events: none; } .chat-widget__toggle[data-v-49d53399] { position: relative; background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); color: white; border: none; border-radius: 50%; width: 60px; height: 60px; box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-600) 40%, transparent), 0 2px 8px color-mix(in srgb, #2b303a 15%, transparent); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .chat-widget__toggle[data-v-49d53399]:hover { transform: translateY(-2px); box-shadow: 0 6px 24px color-mix(in srgb, var(--primary-600) 50%, transparent), 0 4px 12px color-mix(in srgb, #2b303a 20%, transparent); } .chat-widget__toggle[data-v-49d53399]:active { transform: scale(0.98); } .chat-widget__toggle--active[data-v-49d53399] { background: linear-gradient(135deg, #647184 0%, #4d5462 100%); box-shadow: 0 4px 16px color-mix(in srgb, #4d5462 30%, transparent), 0 2px 8px color-mix(in srgb, #2b303a 15%, transparent); } .chat-widget__badge[data-v-49d53399] { position: absolute; top: -4px; right: -4px; background: linear-gradient(135deg, #ff4d4d 0%, #eb1515 100%); color: white; border-radius: 12px; min-width: 22px; height: 22px; padding: 0 6px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px color-mix(in srgb, #eb1515 50%, transparent), 0 0 0 2px white; border: none; } .chat-widget__pulse[data-v-49d53399] { position: absolute; inset: 0; border-radius: 50%; background: var(--primary-500); animation: pulse-ring-49d53399 2s ease-out infinite; pointer-events: none; } .chat-widget__window[data-v-49d53399] { position: absolute; bottom: 76px; right: 0; width: 380px; background: var(--bg-surface); border-radius: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-subtle); } .chat-widget__header[data-v-49d53399] { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); color: white; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid color-mix(in srgb, white 10%, transparent); } .chat-widget__header-left[data-v-49d53399] { display: flex; align-items: center; gap: 12px; } .chat-widget__header-avatar[data-v-49d53399] { position: relative; background: color-mix(in srgb, white 15%, transparent); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .chat-widget__header-avatar-img[data-v-49d53399] { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .chat-widget__header-status-dot[data-v-49d53399] { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: #22c55e; border-radius: 50%; border: 2px solid var(--primary-600); animation: status-pulse-49d53399 2s ease-in-out infinite; } .chat-widget__header-info[data-v-49d53399] { display: flex; flex-direction: column; gap: 2px; } .chat-widget__header-title[data-v-49d53399] { font-weight: 600; font-size: 15px; letter-spacing: 0.1px; } .chat-widget__header-status[data-v-49d53399] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: color-mix(in srgb, white 80%, transparent); } .chat-widget__header-status-indicator[data-v-49d53399] { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; animation: status-blink-49d53399 2s ease-in-out infinite; } .chat-widget__header-close[data-v-49d53399] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: color-mix(in srgb, white 10%, transparent); border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .chat-widget__header-close[data-v-49d53399]:hover { background: color-mix(in srgb, white 20%, transparent); } .chat-widget__header-right[data-v-49d53399] { display: flex; align-items: center; gap: 10px; } .chat-widget__header-user-avatar[data-v-49d53399] { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 2px solid color-mix(in srgb, white 30%, transparent); } .chat-widget__header-user-avatar img[data-v-49d53399] { width: 100%; height: 100%; object-fit: cover; } @keyframes pulse-ring-49d53399 { 0% { opacity: 0.6; } 100% { opacity: 0; } } @keyframes status-pulse-49d53399 { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 40%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 0%, transparent); } } @keyframes status-blink-49d53399 { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .icon-morph-enter-active[data-v-49d53399], .icon-morph-leave-active[data-v-49d53399] { transition: all 0.2s ease; } .icon-morph-enter-from[data-v-49d53399] { opacity: 0; transform: scale(0.5) rotate(-90deg); } .icon-morph-leave-to[data-v-49d53399] { opacity: 0; transform: scale(0.5) rotate(90deg); } .badge-pop-enter-active[data-v-49d53399] { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .badge-pop-leave-active[data-v-49d53399] { transition: all 0.2s ease; } .badge-pop-enter-from[data-v-49d53399] { opacity: 0; transform: scale(0); } .badge-pop-leave-to[data-v-49d53399] { opacity: 0; transform: scale(0.5); } .window-slide-enter-active[data-v-49d53399] { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .window-slide-leave-active[data-v-49d53399] { transition: all 0.25s ease; } .window-slide-enter-from[data-v-49d53399] { opacity: 0; transform: translateY(20px) scale(0.9); } .window-slide-leave-to[data-v-49d53399] { opacity: 0; transform: translateY(10px) scale(0.95); } @media (max-width: 720px) { .chat-widget[data-v-49d53399] { bottom: 16px; right: 16px; } .chat-widget__toggle[data-v-49d53399] { width: 56px; height: 56px; } .chat-widget__window[data-v-49d53399] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; border: none; } .chat-widget__header[data-v-49d53399] { padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px; border-radius: 0; } .chat-widget__header-avatar[data-v-49d53399] { width: 44px; height: 44px; } .chat-widget__header-title[data-v-49d53399] { font-size: 17px; } .chat-widget__header-status[data-v-49d53399] { font-size: 13px; } .chat-widget__header-close[data-v-49d53399] { width: 44px; height: 44px; min-width: 44px; } .window-slide-enter-from[data-v-49d53399] { opacity: 0; transform: translateY(100%); } .window-slide-leave-to[data-v-49d53399] { opacity: 0; transform: translateY(50%); } } /* ══════════════════════════════════════════════════════════════ 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-c0bf1570]: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-c0bf1570] { /* 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-c0bf1570] { /* 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-c0bf1570]: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-c0bf1570], .theme-mode-light[data-v-c0bf1570] { /* ═══════════════════════════════════════════════════════════════ 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-c0bf1570], .theme-mode-dark[data-v-c0bf1570] { /* ═══════════════════════════════════════════════════════════════ 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-c0bf1570]: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-c0bf1570]: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-c0bf1570] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-c0bf1570] { 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-c0bf1570]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-c0bf1570], input[disabled][data-v-c0bf1570] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-c0bf1570] { opacity: 0.9; } input[readonly][data-v-c0bf1570] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-c0bf1570] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-c0bf1570]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-c0bf1570]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-c0bf1570]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-c0bf1570] { 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-c0bf1570]:nth-child(odd), .list-card-desktop__wrapper[data-v-c0bf1570]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-c0bf1570]:nth-child(even), .list-card-desktop__wrapper[data-v-c0bf1570]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-c0bf1570]:nth-child(odd), .listCardDesktopWrapper[data-v-c0bf1570]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-c0bf1570]:nth-child(even), .listCardDesktopWrapper[data-v-c0bf1570]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-c0bf1570] { 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-c0bf1570] { cursor: pointer; } .card-layout--selectionnable[data-v-c0bf1570]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-c0bf1570] { cursor: auto; } .card-layout--drawer[data-v-c0bf1570] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-c0bf1570] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-c0bf1570] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-c0bf1570] { 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-c0bf1570] { 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-c0bf1570] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-c0bf1570]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-c0bf1570] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-c0bf1570] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-c0bf1570] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-c0bf1570] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-c0bf1570] { 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-c0bf1570] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-c0bf1570] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-c0bf1570] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-c0bf1570] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-c0bf1570] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-c0bf1570] { background-color: #eb1515; } .color-chip--dossiers[data-v-c0bf1570] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-c0bf1570] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-c0bf1570] { background-color: #00a79b; } .color-chip--virements[data-v-c0bf1570] { background-color: var(--secondary-400); } .color-chip--factures[data-v-c0bf1570] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-c0bf1570] { background-color: #eb1515; } .color-recherche-dossiers[data-v-c0bf1570] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-c0bf1570] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-c0bf1570] { background-color: #00a79b; } .color-recherche-virements[data-v-c0bf1570] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-c0bf1570] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-c0bf1570] { color: #00a79b; cursor: pointer; } .scrollable[data-v-c0bf1570] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-c0bf1570] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-c0bf1570] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-c0bf1570] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-c0bf1570] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-c0bf1570] { font-weight: 800; } .grid-cell--column[data-v-c0bf1570] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-c0bf1570] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-c0bf1570] { fill: #00a79b; } .grid-cell--disabled[data-v-c0bf1570] { color: #cccccc; } .grid-cell--disabled svg[data-v-c0bf1570] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-c0bf1570] { white-space: nowrap; } .grid-cell--danger svg[data-v-c0bf1570] { fill: #eb1515; } .grid-cell--span-1[data-v-c0bf1570] { grid-column: span 1; } .grid-cell--span-2[data-v-c0bf1570] { grid-column: span 2; } .grid-cell--span-3[data-v-c0bf1570] { grid-column: span 3; } .grid-cell--span-4[data-v-c0bf1570] { grid-column: span 4; } .grid-cell--span-5[data-v-c0bf1570] { grid-column: span 5; } .grid-cell--span-6[data-v-c0bf1570] { grid-column: span 6; } .grid-cell--span-7[data-v-c0bf1570] { grid-column: span 7; } .grid-cell--span-8[data-v-c0bf1570] { grid-column: span 8; } .grid-cell--span-9[data-v-c0bf1570] { grid-column: span 9; } .grid-cell--span-10[data-v-c0bf1570] { grid-column: span 10; } .grid-cell--span-12[data-v-c0bf1570] { grid-column: span 12; } .grid-cell--span-13[data-v-c0bf1570] { grid-column: span 13; } .grid-cell--span-14[data-v-c0bf1570] { grid-column: span 14; } .grid-cell--span-16[data-v-c0bf1570] { grid-column: span 16; } .grid-cell--span-18[data-v-c0bf1570] { grid-column: span 18; } .grid-cell--span-20[data-v-c0bf1570] { grid-column: span 20; } .grid-cell--span-32[data-v-c0bf1570] { grid-column: span 32; } .grid-cell--span-36[data-v-c0bf1570] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-c0bf1570] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-c0bf1570] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-c0bf1570] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-c0bf1570] { justify-content: center !important; } .elem--bold span[data-v-c0bf1570] { font-weight: 800; } .elem--column[data-v-c0bf1570] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-c0bf1570] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-c0bf1570] { fill: #00a79b; } .elem--clickable[data-v-c0bf1570]:hover { cursor: pointer; } .elem--disabled[data-v-c0bf1570] { color: #cccccc; } .elem--disabled svg[data-v-c0bf1570] { fill: #cccccc; } .elem--nowrap span[data-v-c0bf1570] { white-space: nowrap; } .elem--danger svg[data-v-c0bf1570] { fill: #eb1515; } .elem--span-1[data-v-c0bf1570] { grid-column: span 1; } .elem--span-2[data-v-c0bf1570] { grid-column: span 2; } .elem--span-3[data-v-c0bf1570] { grid-column: span 3; } .elem--span-4[data-v-c0bf1570] { grid-column: span 4; } .elem--span-5[data-v-c0bf1570] { grid-column: span 5; } .elem--span-6[data-v-c0bf1570] { grid-column: span 6; } .elem--span-7[data-v-c0bf1570] { grid-column: span 7; } .elem--span-8[data-v-c0bf1570] { grid-column: span 8; } .elem--span-9[data-v-c0bf1570] { grid-column: span 9; } .elem--span-10[data-v-c0bf1570] { grid-column: span 10; } .elem--span-12[data-v-c0bf1570] { grid-column: span 12; } .elem--span-13[data-v-c0bf1570] { grid-column: span 13; } .elem--span-14[data-v-c0bf1570] { grid-column: span 14; } .elem--span-16[data-v-c0bf1570] { grid-column: span 16; } .elem--span-18[data-v-c0bf1570] { grid-column: span 18; } .elem--span-20[data-v-c0bf1570] { grid-column: span 20; } .elem--span-32[data-v-c0bf1570] { grid-column: span 32; } .elem--span-36[data-v-c0bf1570] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-c0bf1570] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-c0bf1570] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-c0bf1570]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-c0bf1570] { display: flex; } /* flex-direction */ .flex-column[data-v-c0bf1570] { flex-direction: column; } .flex-row[data-v-c0bf1570] { flex-direction: row; } /* flex */ .flex-1[data-v-c0bf1570] { flex: 1 !important; } .flex-2[data-v-c0bf1570] { flex: 2; } .flex-3[data-v-c0bf1570] { flex: 3; } .flex-3[data-v-c0bf1570] { flex: 4; } .flex-5[data-v-c0bf1570] { flex: 5; } .flex-auto[data-v-c0bf1570] { flex: auto; } .flex-none[data-v-c0bf1570] { flex: none; } .flex-content[data-v-c0bf1570] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-c0bf1570] { flex-wrap: wrap; } .flex-nowrap[data-v-c0bf1570] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-c0bf1570] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-c0bf1570] { justify-content: flex-start; } .justify-content-end[data-v-c0bf1570] { justify-content: flex-end; } .justify-content-baseline[data-v-c0bf1570] { justify-content: baseline; } .justify-content-center[data-v-c0bf1570] { justify-content: center; } .justify-content-space-between[data-v-c0bf1570] { justify-content: space-between; } .justify-content-space-around[data-v-c0bf1570] { justify-content: space-around; } .justify-content-space-evenly[data-v-c0bf1570] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-c0bf1570] { align-items: flex-start; } .align-items-flex-end[data-v-c0bf1570] { align-items: flex-end; } .align-items-stretch[data-v-c0bf1570] { align-items: stretch; } .align-items-baseline[data-v-c0bf1570] { align-items: baseline; } .align-items-center[data-v-c0bf1570] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-c0bf1570] { align-content: flex-start; } .align-content-flex-end[data-v-c0bf1570] { align-content: flex-end; } .align-content-center[data-v-c0bf1570] { align-content: center; } .align-content-stretch[data-v-c0bf1570] { align-content: stretch; } .align-content-space-between[data-v-c0bf1570] { align-content: space-between; } .align-content-space-around[data-v-c0bf1570] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-c0bf1570] { align-self: flex-start; } .align-self-flex-end[data-v-c0bf1570] { align-self: flex-end; } .align-self-stretch[data-v-c0bf1570] { align-self: stretch; } .align-self-flex-baseline[data-v-c0bf1570] { align-self: baseline; } .align-self-center[data-v-c0bf1570] { align-self: center; } .align-self-auto[data-v-c0bf1570] { align-self: auto; } .flex-gap-1[data-v-c0bf1570] { gap: 4px; } .flex-gap-2[data-v-c0bf1570] { gap: 8px; } .flex-gap-3[data-v-c0bf1570] { gap: 12px; } .flex-gap-4[data-v-c0bf1570] { gap: 16px; } .flex-gap-5[data-v-c0bf1570] { gap: 20px; } .flex-gap-6[data-v-c0bf1570] { gap: 24px; } .flex-gap-7[data-v-c0bf1570] { gap: 28px; } .flex-gap-8[data-v-c0bf1570] { gap: 32px; } .flex-gap-10[data-v-c0bf1570] { gap: 40px; } .flex-gap-12[data-v-c0bf1570] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-c0bf1570] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-c0bf1570] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-c0bf1570] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-c0bf1570] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-c0bf1570] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-c0bf1570] { display: none !important; } } .col-none[data-v-c0bf1570] { display: none; } .col-auto[data-v-c0bf1570] { grid-column: auto; } .col-1[data-v-c0bf1570] { grid-column: span 1; } .col-2[data-v-c0bf1570] { grid-column: span 2; } .col-3[data-v-c0bf1570] { grid-column: span 3; } .col-4[data-v-c0bf1570] { grid-column: span 4; } .col-5[data-v-c0bf1570] { grid-column: span 5; } .col-6[data-v-c0bf1570] { grid-column: span 6; } .col-7[data-v-c0bf1570] { grid-column: span 7; } .col-8[data-v-c0bf1570] { grid-column: span 8; } .col-9[data-v-c0bf1570] { grid-column: span 9; } .col-10[data-v-c0bf1570] { grid-column: span 10; } .col-12[data-v-c0bf1570] { grid-column: span 12; } .col-13[data-v-c0bf1570] { grid-column: span 13; } .col-14[data-v-c0bf1570] { grid-column: span 14; } .col-15[data-v-c0bf1570] { grid-column: span 15; } .col-16[data-v-c0bf1570] { grid-column: span 16; } .col-18[data-v-c0bf1570] { grid-column: span 18; } .col-20[data-v-c0bf1570] { grid-column: span 20; } .col-22[data-v-c0bf1570] { grid-column: span 22; } .col-24[data-v-c0bf1570] { grid-column: span 24; } .col-26[data-v-c0bf1570] { grid-column: span 26; } .col-27[data-v-c0bf1570] { grid-column: span 27; } .col-28[data-v-c0bf1570] { grid-column: span 28; } .col-30[data-v-c0bf1570] { grid-column: span 30; } .col-36[data-v-c0bf1570] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-c0bf1570] { display: none; } .col-md-36[data-v-c0bf1570] { grid-column: span 36; } .col-md-28[data-v-c0bf1570] { grid-column: span 28; } .col-md-27[data-v-c0bf1570] { grid-column: span 27; } .col-md-24[data-v-c0bf1570] { grid-column: span 24; } .col-md-22[data-v-c0bf1570] { grid-column: span 22; } .col-md-20[data-v-c0bf1570] { grid-column: span 20; } .col-md-19[data-v-c0bf1570] { grid-column: span 19; } .col-md-18[data-v-c0bf1570] { grid-column: span 18; } .col-md-17[data-v-c0bf1570] { grid-column: span 17; } .col-md-16[data-v-c0bf1570] { grid-column: span 16; } .col-md-15[data-v-c0bf1570] { grid-column: span 15; } .col-md-14[data-v-c0bf1570] { grid-column: span 14; } .col-md-13[data-v-c0bf1570] { grid-column: span 13; } .col-md-12[data-v-c0bf1570] { grid-column: span 12; } .col-md-10[data-v-c0bf1570] { grid-column: span 10; } .col-md-9[data-v-c0bf1570] { grid-column: span 9; } .col-md-8[data-v-c0bf1570] { grid-column: span 8; } .col-md-6[data-v-c0bf1570] { grid-column: span 6; } .col-md-5[data-v-c0bf1570] { grid-column: span 5; } .col-md-4[data-v-c0bf1570] { grid-column: span 4; } .col-md-3[data-v-c0bf1570] { grid-column: span 3; } .col-md-2[data-v-c0bf1570] { grid-column: span 2; } .col-md-1[data-v-c0bf1570] { grid-column: span 1; } .col-md-auto[data-v-c0bf1570] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-c0bf1570] { display: none; } .col-sm-36[data-v-c0bf1570] { grid-column: span 36; } .col-sm-32[data-v-c0bf1570] { grid-column: span 32; } .col-sm-28[data-v-c0bf1570] { grid-column: span 28; } .col-sm-27[data-v-c0bf1570] { grid-column: span 27; } .col-sm-24[data-v-c0bf1570] { grid-column: span 24; } .col-sm-22[data-v-c0bf1570] { grid-column: span 22; } .col-sm-20[data-v-c0bf1570] { grid-column: span 20; } .col-sm-18[data-v-c0bf1570] { grid-column: span 18; } .col-sm-16[data-v-c0bf1570] { grid-column: span 16; } .col-sm-15[data-v-c0bf1570] { grid-column: span 15; } .col-sm-14[data-v-c0bf1570] { grid-column: span 14; } .col-sm-13[data-v-c0bf1570] { grid-column: span 12; } .col-sm-12[data-v-c0bf1570] { grid-column: span 12; } .col-sm-10[data-v-c0bf1570] { grid-column: span 10; } .col-sm-9[data-v-c0bf1570] { grid-column: span 8; } .col-sm-8[data-v-c0bf1570] { grid-column: span 8; } .col-sm-6[data-v-c0bf1570] { grid-column: span 6; } .col-sm-4[data-v-c0bf1570] { grid-column: span 4; } .col-sm-auto[data-v-c0bf1570] { grid-column: auto; } } .fade-enter-active[data-v-c0bf1570] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-c0bf1570] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-c0bf1570], .fade-leave-to[data-v-c0bf1570] { opacity: 0; } .catalogue-dock[data-v-c0bf1570] { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 1050; display: flex; flex-direction: row; align-items: stretch; background: rgba(30, 41, 59, 0.97); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-radius: 0 16px 16px 0; border: 1px solid rgba(255, 255, 255, 0.08); border-left: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .catalogue-dock--collapsed[data-v-c0bf1570] { width: 52px; } .catalogue-dock--expanded[data-v-c0bf1570] { width: 260px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .catalogue-dock__trigger[data-v-c0bf1570] { position: relative; width: 52px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 4px 0; gap: 10px; } .catalogue-dock__trigger[data-v-c0bf1570]::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, var(--primary-700) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .catalogue-dock--expanded .catalogue-dock__trigger[data-v-c0bf1570]::after { opacity: 1; } .catalogue-dock__toggle[data-v-c0bf1570] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; background: transparent; border: none; cursor: pointer; color: #edf1f5; transition: all 0.25s ease; border-radius: 8px; } .catalogue-dock__toggle[data-v-c0bf1570]:hover { background: rgba(255, 255, 255, 0.06); } .catalogue-dock__toggle:hover .catalogue-dock__icon-wrapper[data-v-c0bf1570] { border-color: var(--primary-700); } .catalogue-dock__toggle[data-v-c0bf1570]:focus-visible { outline: 2px solid var(--primary-700); outline-offset: 2px; } .catalogue-dock__icon-wrapper[data-v-c0bf1570] { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; background: rgba(255, 255, 255, 0.03); transition: all 0.3s ease; } .catalogue-dock__icon[data-v-c0bf1570] { width: 18px; height: 18px; color: var(--primary-700); } .catalogue-dock__label[data-v-c0bf1570] { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a2b8; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } .catalogue-dock__cart-badge[data-v-c0bf1570] { position: absolute; top: 8px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--primary-700); color: white; font-size: 10px; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(var(--primary-700), 0.4); animation: badge-pulse-c0bf1570 2s ease-in-out infinite; } .catalogue-dock__panel[data-v-c0bf1570] { flex: 1; display: flex; flex-direction: column; padding: 16px 16px 16px 8px; overflow: hidden; position: relative; } .catalogue-dock__header[data-v-c0bf1570] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .catalogue-dock__title[data-v-c0bf1570] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--primary-500); } .catalogue-dock__close[data-v-c0bf1570] { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: #94a2b8; border-radius: 6px; transition: all 0.2s ease; } .catalogue-dock__close svg[data-v-c0bf1570] { width: 14px; height: 14px; } .catalogue-dock__close[data-v-c0bf1570]:hover { background: rgba(255, 255, 255, 0.08); color: #edf1f5; } .catalogue-dock__categories[data-v-c0bf1570] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; } .catalogue-dock__categories[data-v-c0bf1570]::-webkit-scrollbar { width: 4px; } .catalogue-dock__categories[data-v-c0bf1570]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; } .catalogue-dock__item[data-v-c0bf1570] { opacity: 0; transform: translateX(-10px); animation: item-appear-c0bf1570 0.3s ease forwards; animation-delay: var(--item-delay, 0s); } .catalogue-dock__link[data-v-c0bf1570] { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #edf1f5; transition: all 0.2s ease; position: relative; } .catalogue-dock__link[data-v-c0bf1570]::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; background: var(--category-color, var(--primary-700)); border-radius: 0 2px 2px 0; transition: transform 0.2s ease; } .catalogue-dock__link[data-v-c0bf1570]:hover { background: rgba(255, 255, 255, 0.06); } .catalogue-dock__link[data-v-c0bf1570]:hover::before { transform: translateY(-50%) scaleY(1); } .catalogue-dock__link.router-link-active[data-v-c0bf1570] { background: rgba(255, 255, 255, 0.08); } .catalogue-dock__link.router-link-active[data-v-c0bf1570]::before { transform: translateY(-50%) scaleY(1); } .catalogue-dock__item-icon[data-v-c0bf1570] { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255, 255, 255, 0.04); transition: all 0.25s ease; flex-shrink: 0; } .catalogue-dock__item-dot[data-v-c0bf1570] { width: 8px; height: 8px; border-radius: 50%; background: var(--category-color, var(--primary-700)); } .catalogue-dock__item-label[data-v-c0bf1570] { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .catalogue-dock__item-count[data-v-c0bf1570] { font-size: 11px; font-weight: 600; color: #94a2b8; background: rgba(255, 255, 255, 0.06); padding: 2px 8px; border-radius: 10px; } .catalogue-dock__divider[data-v-c0bf1570] { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%); margin: 16px 0; } .catalogue-dock__actions[data-v-c0bf1570] { display: flex; flex-direction: column; gap: 8px; } .catalogue-dock__action[data-v-c0bf1570] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #94a2b8; font-size: 12px; font-weight: 500; transition: all 0.2s ease; } .catalogue-dock__action svg[data-v-c0bf1570] { width: 16px; height: 16px; flex-shrink: 0; } .catalogue-dock__action[data-v-c0bf1570]:hover { background: rgba(255, 255, 255, 0.06); color: #edf1f5; } .catalogue-dock__action--primary[data-v-c0bf1570] { background: rgba(var(--primary-700), 0.12); color: var(--primary-500); border: 1px solid rgba(var(--primary-700), 0.2); } .catalogue-dock__action--primary[data-v-c0bf1570]:hover { background: rgba(var(--primary-700), 0.2); border-color: rgba(var(--primary-700), 0.35); } .catalogue-dock__action-badge[data-v-c0bf1570] { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; background: var(--primary-700); color: white; font-size: 11px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .catalogue-dock__gradient-deco[data-v-c0bf1570] { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, transparent 0%, rgba(var(--primary-700), 0.05) 100%); pointer-events: none; border-radius: 0 0 16px 0; } @keyframes badge-pulse-c0bf1570 { 0%, 50%, 100% { transform: scale(1); } } @keyframes item-appear-c0bf1570 { to { opacity: 1; transform: translateX(0); } } .dock-slide-enter-active[data-v-c0bf1570], .dock-slide-leave-active[data-v-c0bf1570] { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .dock-slide-enter-from[data-v-c0bf1570], .dock-slide-leave-to[data-v-c0bf1570] { opacity: 0; transform: translateX(-100%) translateY(-50%); } .panel-expand-enter-active[data-v-c0bf1570], .panel-expand-leave-active[data-v-c0bf1570] { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .panel-expand-enter-from[data-v-c0bf1570], .panel-expand-leave-to[data-v-c0bf1570] { opacity: 0; transform: translateX(-20px); } .badge-pop-enter-active[data-v-c0bf1570], .badge-pop-leave-active[data-v-c0bf1570] { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .badge-pop-enter-from[data-v-c0bf1570], .badge-pop-leave-to[data-v-c0bf1570] { opacity: 0; transform: scale(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 ) */ :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; } .cgu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); z-index: 800; animation: fadeInOverlay 0.3s ease forwards; } @keyframes fadeInOverlay { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(6px); } } .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; } .fade-enter-from, .fade-leave-to { 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-99ac88c9]: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-99ac88c9] { /* 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-99ac88c9] { /* 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-99ac88c9]: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-99ac88c9], .theme-mode-light[data-v-99ac88c9] { /* ═══════════════════════════════════════════════════════════════ 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-99ac88c9], .theme-mode-dark[data-v-99ac88c9] { /* ═══════════════════════════════════════════════════════════════ 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-99ac88c9]: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-99ac88c9]: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-99ac88c9] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-99ac88c9] { 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-99ac88c9]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-99ac88c9], input[disabled][data-v-99ac88c9] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-99ac88c9] { opacity: 0.9; } input[readonly][data-v-99ac88c9] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-99ac88c9] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-99ac88c9]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-99ac88c9]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-99ac88c9]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-99ac88c9] { 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-99ac88c9]:nth-child(odd), .list-card-desktop__wrapper[data-v-99ac88c9]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-99ac88c9]:nth-child(even), .list-card-desktop__wrapper[data-v-99ac88c9]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-99ac88c9]:nth-child(odd), .listCardDesktopWrapper[data-v-99ac88c9]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-99ac88c9]:nth-child(even), .listCardDesktopWrapper[data-v-99ac88c9]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-99ac88c9] { 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-99ac88c9] { cursor: pointer; } .card-layout--selectionnable[data-v-99ac88c9]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-99ac88c9] { cursor: auto; } .card-layout--drawer[data-v-99ac88c9] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-99ac88c9] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-99ac88c9] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-99ac88c9] { 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-99ac88c9] { 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-99ac88c9] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-99ac88c9]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-99ac88c9] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-99ac88c9] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-99ac88c9] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-99ac88c9] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-99ac88c9] { 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-99ac88c9] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-99ac88c9] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-99ac88c9] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-99ac88c9] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-99ac88c9] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-99ac88c9] { background-color: #eb1515; } .color-chip--dossiers[data-v-99ac88c9] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-99ac88c9] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-99ac88c9] { background-color: #00a79b; } .color-chip--virements[data-v-99ac88c9] { background-color: var(--secondary-400); } .color-chip--factures[data-v-99ac88c9] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-99ac88c9] { background-color: #eb1515; } .color-recherche-dossiers[data-v-99ac88c9] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-99ac88c9] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-99ac88c9] { background-color: #00a79b; } .color-recherche-virements[data-v-99ac88c9] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-99ac88c9] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-99ac88c9] { color: #00a79b; cursor: pointer; } .scrollable[data-v-99ac88c9] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-99ac88c9] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-99ac88c9] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-99ac88c9] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-99ac88c9] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-99ac88c9] { font-weight: 800; } .grid-cell--column[data-v-99ac88c9] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-99ac88c9] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-99ac88c9] { fill: #00a79b; } .grid-cell--disabled[data-v-99ac88c9] { color: #cccccc; } .grid-cell--disabled svg[data-v-99ac88c9] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-99ac88c9] { white-space: nowrap; } .grid-cell--danger svg[data-v-99ac88c9] { fill: #eb1515; } .grid-cell--span-1[data-v-99ac88c9] { grid-column: span 1; } .grid-cell--span-2[data-v-99ac88c9] { grid-column: span 2; } .grid-cell--span-3[data-v-99ac88c9] { grid-column: span 3; } .grid-cell--span-4[data-v-99ac88c9] { grid-column: span 4; } .grid-cell--span-5[data-v-99ac88c9] { grid-column: span 5; } .grid-cell--span-6[data-v-99ac88c9] { grid-column: span 6; } .grid-cell--span-7[data-v-99ac88c9] { grid-column: span 7; } .grid-cell--span-8[data-v-99ac88c9] { grid-column: span 8; } .grid-cell--span-9[data-v-99ac88c9] { grid-column: span 9; } .grid-cell--span-10[data-v-99ac88c9] { grid-column: span 10; } .grid-cell--span-12[data-v-99ac88c9] { grid-column: span 12; } .grid-cell--span-13[data-v-99ac88c9] { grid-column: span 13; } .grid-cell--span-14[data-v-99ac88c9] { grid-column: span 14; } .grid-cell--span-16[data-v-99ac88c9] { grid-column: span 16; } .grid-cell--span-18[data-v-99ac88c9] { grid-column: span 18; } .grid-cell--span-20[data-v-99ac88c9] { grid-column: span 20; } .grid-cell--span-32[data-v-99ac88c9] { grid-column: span 32; } .grid-cell--span-36[data-v-99ac88c9] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-99ac88c9] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-99ac88c9] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-99ac88c9] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-99ac88c9] { justify-content: center !important; } .elem--bold span[data-v-99ac88c9] { font-weight: 800; } .elem--column[data-v-99ac88c9] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-99ac88c9] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-99ac88c9] { fill: #00a79b; } .elem--clickable[data-v-99ac88c9]:hover { cursor: pointer; } .elem--disabled[data-v-99ac88c9] { color: #cccccc; } .elem--disabled svg[data-v-99ac88c9] { fill: #cccccc; } .elem--nowrap span[data-v-99ac88c9] { white-space: nowrap; } .elem--danger svg[data-v-99ac88c9] { fill: #eb1515; } .elem--span-1[data-v-99ac88c9] { grid-column: span 1; } .elem--span-2[data-v-99ac88c9] { grid-column: span 2; } .elem--span-3[data-v-99ac88c9] { grid-column: span 3; } .elem--span-4[data-v-99ac88c9] { grid-column: span 4; } .elem--span-5[data-v-99ac88c9] { grid-column: span 5; } .elem--span-6[data-v-99ac88c9] { grid-column: span 6; } .elem--span-7[data-v-99ac88c9] { grid-column: span 7; } .elem--span-8[data-v-99ac88c9] { grid-column: span 8; } .elem--span-9[data-v-99ac88c9] { grid-column: span 9; } .elem--span-10[data-v-99ac88c9] { grid-column: span 10; } .elem--span-12[data-v-99ac88c9] { grid-column: span 12; } .elem--span-13[data-v-99ac88c9] { grid-column: span 13; } .elem--span-14[data-v-99ac88c9] { grid-column: span 14; } .elem--span-16[data-v-99ac88c9] { grid-column: span 16; } .elem--span-18[data-v-99ac88c9] { grid-column: span 18; } .elem--span-20[data-v-99ac88c9] { grid-column: span 20; } .elem--span-32[data-v-99ac88c9] { grid-column: span 32; } .elem--span-36[data-v-99ac88c9] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-99ac88c9] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-99ac88c9] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-99ac88c9]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-99ac88c9] { display: flex; } /* flex-direction */ .flex-column[data-v-99ac88c9] { flex-direction: column; } .flex-row[data-v-99ac88c9] { flex-direction: row; } /* flex */ .flex-1[data-v-99ac88c9] { flex: 1 !important; } .flex-2[data-v-99ac88c9] { flex: 2; } .flex-3[data-v-99ac88c9] { flex: 3; } .flex-3[data-v-99ac88c9] { flex: 4; } .flex-5[data-v-99ac88c9] { flex: 5; } .flex-auto[data-v-99ac88c9] { flex: auto; } .flex-none[data-v-99ac88c9] { flex: none; } .flex-content[data-v-99ac88c9] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-99ac88c9] { flex-wrap: wrap; } .flex-nowrap[data-v-99ac88c9] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-99ac88c9] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-99ac88c9] { justify-content: flex-start; } .justify-content-end[data-v-99ac88c9] { justify-content: flex-end; } .justify-content-baseline[data-v-99ac88c9] { justify-content: baseline; } .justify-content-center[data-v-99ac88c9] { justify-content: center; } .justify-content-space-between[data-v-99ac88c9] { justify-content: space-between; } .justify-content-space-around[data-v-99ac88c9] { justify-content: space-around; } .justify-content-space-evenly[data-v-99ac88c9] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-99ac88c9] { align-items: flex-start; } .align-items-flex-end[data-v-99ac88c9] { align-items: flex-end; } .align-items-stretch[data-v-99ac88c9] { align-items: stretch; } .align-items-baseline[data-v-99ac88c9] { align-items: baseline; } .align-items-center[data-v-99ac88c9] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-99ac88c9] { align-content: flex-start; } .align-content-flex-end[data-v-99ac88c9] { align-content: flex-end; } .align-content-center[data-v-99ac88c9] { align-content: center; } .align-content-stretch[data-v-99ac88c9] { align-content: stretch; } .align-content-space-between[data-v-99ac88c9] { align-content: space-between; } .align-content-space-around[data-v-99ac88c9] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-99ac88c9] { align-self: flex-start; } .align-self-flex-end[data-v-99ac88c9] { align-self: flex-end; } .align-self-stretch[data-v-99ac88c9] { align-self: stretch; } .align-self-flex-baseline[data-v-99ac88c9] { align-self: baseline; } .align-self-center[data-v-99ac88c9] { align-self: center; } .align-self-auto[data-v-99ac88c9] { align-self: auto; } .flex-gap-1[data-v-99ac88c9] { gap: 4px; } .flex-gap-2[data-v-99ac88c9] { gap: 8px; } .flex-gap-3[data-v-99ac88c9] { gap: 12px; } .flex-gap-4[data-v-99ac88c9] { gap: 16px; } .flex-gap-5[data-v-99ac88c9] { gap: 20px; } .flex-gap-6[data-v-99ac88c9] { gap: 24px; } .flex-gap-7[data-v-99ac88c9] { gap: 28px; } .flex-gap-8[data-v-99ac88c9] { gap: 32px; } .flex-gap-10[data-v-99ac88c9] { gap: 40px; } .flex-gap-12[data-v-99ac88c9] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-99ac88c9] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-99ac88c9] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-99ac88c9] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-99ac88c9] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-99ac88c9] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-99ac88c9] { display: none !important; } } .col-none[data-v-99ac88c9] { display: none; } .col-auto[data-v-99ac88c9] { grid-column: auto; } .col-1[data-v-99ac88c9] { grid-column: span 1; } .col-2[data-v-99ac88c9] { grid-column: span 2; } .col-3[data-v-99ac88c9] { grid-column: span 3; } .col-4[data-v-99ac88c9] { grid-column: span 4; } .col-5[data-v-99ac88c9] { grid-column: span 5; } .col-6[data-v-99ac88c9] { grid-column: span 6; } .col-7[data-v-99ac88c9] { grid-column: span 7; } .col-8[data-v-99ac88c9] { grid-column: span 8; } .col-9[data-v-99ac88c9] { grid-column: span 9; } .col-10[data-v-99ac88c9] { grid-column: span 10; } .col-12[data-v-99ac88c9] { grid-column: span 12; } .col-13[data-v-99ac88c9] { grid-column: span 13; } .col-14[data-v-99ac88c9] { grid-column: span 14; } .col-15[data-v-99ac88c9] { grid-column: span 15; } .col-16[data-v-99ac88c9] { grid-column: span 16; } .col-18[data-v-99ac88c9] { grid-column: span 18; } .col-20[data-v-99ac88c9] { grid-column: span 20; } .col-22[data-v-99ac88c9] { grid-column: span 22; } .col-24[data-v-99ac88c9] { grid-column: span 24; } .col-26[data-v-99ac88c9] { grid-column: span 26; } .col-27[data-v-99ac88c9] { grid-column: span 27; } .col-28[data-v-99ac88c9] { grid-column: span 28; } .col-30[data-v-99ac88c9] { grid-column: span 30; } .col-36[data-v-99ac88c9] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-99ac88c9] { display: none; } .col-md-36[data-v-99ac88c9] { grid-column: span 36; } .col-md-28[data-v-99ac88c9] { grid-column: span 28; } .col-md-27[data-v-99ac88c9] { grid-column: span 27; } .col-md-24[data-v-99ac88c9] { grid-column: span 24; } .col-md-22[data-v-99ac88c9] { grid-column: span 22; } .col-md-20[data-v-99ac88c9] { grid-column: span 20; } .col-md-19[data-v-99ac88c9] { grid-column: span 19; } .col-md-18[data-v-99ac88c9] { grid-column: span 18; } .col-md-17[data-v-99ac88c9] { grid-column: span 17; } .col-md-16[data-v-99ac88c9] { grid-column: span 16; } .col-md-15[data-v-99ac88c9] { grid-column: span 15; } .col-md-14[data-v-99ac88c9] { grid-column: span 14; } .col-md-13[data-v-99ac88c9] { grid-column: span 13; } .col-md-12[data-v-99ac88c9] { grid-column: span 12; } .col-md-10[data-v-99ac88c9] { grid-column: span 10; } .col-md-9[data-v-99ac88c9] { grid-column: span 9; } .col-md-8[data-v-99ac88c9] { grid-column: span 8; } .col-md-6[data-v-99ac88c9] { grid-column: span 6; } .col-md-5[data-v-99ac88c9] { grid-column: span 5; } .col-md-4[data-v-99ac88c9] { grid-column: span 4; } .col-md-3[data-v-99ac88c9] { grid-column: span 3; } .col-md-2[data-v-99ac88c9] { grid-column: span 2; } .col-md-1[data-v-99ac88c9] { grid-column: span 1; } .col-md-auto[data-v-99ac88c9] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-99ac88c9] { display: none; } .col-sm-36[data-v-99ac88c9] { grid-column: span 36; } .col-sm-32[data-v-99ac88c9] { grid-column: span 32; } .col-sm-28[data-v-99ac88c9] { grid-column: span 28; } .col-sm-27[data-v-99ac88c9] { grid-column: span 27; } .col-sm-24[data-v-99ac88c9] { grid-column: span 24; } .col-sm-22[data-v-99ac88c9] { grid-column: span 22; } .col-sm-20[data-v-99ac88c9] { grid-column: span 20; } .col-sm-18[data-v-99ac88c9] { grid-column: span 18; } .col-sm-16[data-v-99ac88c9] { grid-column: span 16; } .col-sm-15[data-v-99ac88c9] { grid-column: span 15; } .col-sm-14[data-v-99ac88c9] { grid-column: span 14; } .col-sm-13[data-v-99ac88c9] { grid-column: span 12; } .col-sm-12[data-v-99ac88c9] { grid-column: span 12; } .col-sm-10[data-v-99ac88c9] { grid-column: span 10; } .col-sm-9[data-v-99ac88c9] { grid-column: span 8; } .col-sm-8[data-v-99ac88c9] { grid-column: span 8; } .col-sm-6[data-v-99ac88c9] { grid-column: span 6; } .col-sm-4[data-v-99ac88c9] { grid-column: span 4; } .col-sm-auto[data-v-99ac88c9] { grid-column: auto; } } .fade-enter-active[data-v-99ac88c9] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-99ac88c9] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-99ac88c9], .fade-leave-to[data-v-99ac88c9] { opacity: 0; } .bottom-nav[data-v-99ac88c9] { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-around; align-items: center; height: 64px; padding: 8px 0; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid #e2e7ef; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .bottom-nav--hidden[data-v-99ac88c9] { transform: translateY(100%); } .bottom-nav__item[data-v-99ac88c9] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; text-decoration: none; color: #94a2b8; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .bottom-nav__item[data-v-99ac88c9]:active { transform: scale(0.92); } .bottom-nav__item--active[data-v-99ac88c9] { color: var(--primary-600); } .bottom-nav__item--active .bottom-nav__icon[data-v-99ac88c9] { background: rgba(var(--primary-500-rgb), 0.12); } .bottom-nav__item--active .bottom-nav__label[data-v-99ac88c9] { font-weight: 600; } .bottom-nav__icon[data-v-99ac88c9] { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 32px; border-radius: 16px; transition: all 0.2s ease; } .bottom-nav__badge[data-v-99ac88c9] { position: absolute; top: -6px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--primary-500); border-radius: 8px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 10px; font-weight: 700; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(var(--primary-500-rgb), 0.4); } .bottom-nav__label[data-v-99ac88c9] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2px; } @media (min-width: 721px) { .bottom-nav[data-v-99ac88c9] { 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-91a7237c]: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-91a7237c] { /* 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-91a7237c] { /* 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-91a7237c]: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-91a7237c], .theme-mode-light[data-v-91a7237c] { /* ═══════════════════════════════════════════════════════════════ 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-91a7237c], .theme-mode-dark[data-v-91a7237c] { /* ═══════════════════════════════════════════════════════════════ 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-91a7237c]: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-91a7237c]: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-91a7237c] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-91a7237c] { 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-91a7237c]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-91a7237c], input[disabled][data-v-91a7237c] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-91a7237c] { opacity: 0.9; } input[readonly][data-v-91a7237c] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-91a7237c] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-91a7237c]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-91a7237c]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-91a7237c]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-91a7237c] { 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-91a7237c]:nth-child(odd), .list-card-desktop__wrapper[data-v-91a7237c]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-91a7237c]:nth-child(even), .list-card-desktop__wrapper[data-v-91a7237c]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-91a7237c]:nth-child(odd), .listCardDesktopWrapper[data-v-91a7237c]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-91a7237c]:nth-child(even), .listCardDesktopWrapper[data-v-91a7237c]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-91a7237c] { 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-91a7237c] { cursor: pointer; } .card-layout--selectionnable[data-v-91a7237c]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-91a7237c] { cursor: auto; } .card-layout--drawer[data-v-91a7237c] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-91a7237c] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-91a7237c] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-91a7237c] { 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-91a7237c] { 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-91a7237c] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-91a7237c]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-91a7237c] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-91a7237c] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-91a7237c] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-91a7237c] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-91a7237c] { 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-91a7237c] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-91a7237c] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-91a7237c] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-91a7237c] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-91a7237c] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-91a7237c] { background-color: #eb1515; } .color-chip--dossiers[data-v-91a7237c] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-91a7237c] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-91a7237c] { background-color: #00a79b; } .color-chip--virements[data-v-91a7237c] { background-color: var(--secondary-400); } .color-chip--factures[data-v-91a7237c] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-91a7237c] { background-color: #eb1515; } .color-recherche-dossiers[data-v-91a7237c] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-91a7237c] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-91a7237c] { background-color: #00a79b; } .color-recherche-virements[data-v-91a7237c] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-91a7237c] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-91a7237c] { color: #00a79b; cursor: pointer; } .scrollable[data-v-91a7237c] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-91a7237c] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-91a7237c] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-91a7237c] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-91a7237c] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-91a7237c] { font-weight: 800; } .grid-cell--column[data-v-91a7237c] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-91a7237c] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-91a7237c] { fill: #00a79b; } .grid-cell--disabled[data-v-91a7237c] { color: #cccccc; } .grid-cell--disabled svg[data-v-91a7237c] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-91a7237c] { white-space: nowrap; } .grid-cell--danger svg[data-v-91a7237c] { fill: #eb1515; } .grid-cell--span-1[data-v-91a7237c] { grid-column: span 1; } .grid-cell--span-2[data-v-91a7237c] { grid-column: span 2; } .grid-cell--span-3[data-v-91a7237c] { grid-column: span 3; } .grid-cell--span-4[data-v-91a7237c] { grid-column: span 4; } .grid-cell--span-5[data-v-91a7237c] { grid-column: span 5; } .grid-cell--span-6[data-v-91a7237c] { grid-column: span 6; } .grid-cell--span-7[data-v-91a7237c] { grid-column: span 7; } .grid-cell--span-8[data-v-91a7237c] { grid-column: span 8; } .grid-cell--span-9[data-v-91a7237c] { grid-column: span 9; } .grid-cell--span-10[data-v-91a7237c] { grid-column: span 10; } .grid-cell--span-12[data-v-91a7237c] { grid-column: span 12; } .grid-cell--span-13[data-v-91a7237c] { grid-column: span 13; } .grid-cell--span-14[data-v-91a7237c] { grid-column: span 14; } .grid-cell--span-16[data-v-91a7237c] { grid-column: span 16; } .grid-cell--span-18[data-v-91a7237c] { grid-column: span 18; } .grid-cell--span-20[data-v-91a7237c] { grid-column: span 20; } .grid-cell--span-32[data-v-91a7237c] { grid-column: span 32; } .grid-cell--span-36[data-v-91a7237c] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-91a7237c] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-91a7237c] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-91a7237c] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-91a7237c] { justify-content: center !important; } .elem--bold span[data-v-91a7237c] { font-weight: 800; } .elem--column[data-v-91a7237c] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-91a7237c] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-91a7237c] { fill: #00a79b; } .elem--clickable[data-v-91a7237c]:hover { cursor: pointer; } .elem--disabled[data-v-91a7237c] { color: #cccccc; } .elem--disabled svg[data-v-91a7237c] { fill: #cccccc; } .elem--nowrap span[data-v-91a7237c] { white-space: nowrap; } .elem--danger svg[data-v-91a7237c] { fill: #eb1515; } .elem--span-1[data-v-91a7237c] { grid-column: span 1; } .elem--span-2[data-v-91a7237c] { grid-column: span 2; } .elem--span-3[data-v-91a7237c] { grid-column: span 3; } .elem--span-4[data-v-91a7237c] { grid-column: span 4; } .elem--span-5[data-v-91a7237c] { grid-column: span 5; } .elem--span-6[data-v-91a7237c] { grid-column: span 6; } .elem--span-7[data-v-91a7237c] { grid-column: span 7; } .elem--span-8[data-v-91a7237c] { grid-column: span 8; } .elem--span-9[data-v-91a7237c] { grid-column: span 9; } .elem--span-10[data-v-91a7237c] { grid-column: span 10; } .elem--span-12[data-v-91a7237c] { grid-column: span 12; } .elem--span-13[data-v-91a7237c] { grid-column: span 13; } .elem--span-14[data-v-91a7237c] { grid-column: span 14; } .elem--span-16[data-v-91a7237c] { grid-column: span 16; } .elem--span-18[data-v-91a7237c] { grid-column: span 18; } .elem--span-20[data-v-91a7237c] { grid-column: span 20; } .elem--span-32[data-v-91a7237c] { grid-column: span 32; } .elem--span-36[data-v-91a7237c] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-91a7237c] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-91a7237c] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-91a7237c]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-91a7237c] { display: flex; } /* flex-direction */ .flex-column[data-v-91a7237c] { flex-direction: column; } .flex-row[data-v-91a7237c] { flex-direction: row; } /* flex */ .flex-1[data-v-91a7237c] { flex: 1 !important; } .flex-2[data-v-91a7237c] { flex: 2; } .flex-3[data-v-91a7237c] { flex: 3; } .flex-3[data-v-91a7237c] { flex: 4; } .flex-5[data-v-91a7237c] { flex: 5; } .flex-auto[data-v-91a7237c] { flex: auto; } .flex-none[data-v-91a7237c] { flex: none; } .flex-content[data-v-91a7237c] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-91a7237c] { flex-wrap: wrap; } .flex-nowrap[data-v-91a7237c] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-91a7237c] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-91a7237c] { justify-content: flex-start; } .justify-content-end[data-v-91a7237c] { justify-content: flex-end; } .justify-content-baseline[data-v-91a7237c] { justify-content: baseline; } .justify-content-center[data-v-91a7237c] { justify-content: center; } .justify-content-space-between[data-v-91a7237c] { justify-content: space-between; } .justify-content-space-around[data-v-91a7237c] { justify-content: space-around; } .justify-content-space-evenly[data-v-91a7237c] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-91a7237c] { align-items: flex-start; } .align-items-flex-end[data-v-91a7237c] { align-items: flex-end; } .align-items-stretch[data-v-91a7237c] { align-items: stretch; } .align-items-baseline[data-v-91a7237c] { align-items: baseline; } .align-items-center[data-v-91a7237c] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-91a7237c] { align-content: flex-start; } .align-content-flex-end[data-v-91a7237c] { align-content: flex-end; } .align-content-center[data-v-91a7237c] { align-content: center; } .align-content-stretch[data-v-91a7237c] { align-content: stretch; } .align-content-space-between[data-v-91a7237c] { align-content: space-between; } .align-content-space-around[data-v-91a7237c] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-91a7237c] { align-self: flex-start; } .align-self-flex-end[data-v-91a7237c] { align-self: flex-end; } .align-self-stretch[data-v-91a7237c] { align-self: stretch; } .align-self-flex-baseline[data-v-91a7237c] { align-self: baseline; } .align-self-center[data-v-91a7237c] { align-self: center; } .align-self-auto[data-v-91a7237c] { align-self: auto; } .flex-gap-1[data-v-91a7237c] { gap: 4px; } .flex-gap-2[data-v-91a7237c] { gap: 8px; } .flex-gap-3[data-v-91a7237c] { gap: 12px; } .flex-gap-4[data-v-91a7237c] { gap: 16px; } .flex-gap-5[data-v-91a7237c] { gap: 20px; } .flex-gap-6[data-v-91a7237c] { gap: 24px; } .flex-gap-7[data-v-91a7237c] { gap: 28px; } .flex-gap-8[data-v-91a7237c] { gap: 32px; } .flex-gap-10[data-v-91a7237c] { gap: 40px; } .flex-gap-12[data-v-91a7237c] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-91a7237c] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-91a7237c] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-91a7237c] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-91a7237c] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-91a7237c] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-91a7237c] { display: none !important; } } .col-none[data-v-91a7237c] { display: none; } .col-auto[data-v-91a7237c] { grid-column: auto; } .col-1[data-v-91a7237c] { grid-column: span 1; } .col-2[data-v-91a7237c] { grid-column: span 2; } .col-3[data-v-91a7237c] { grid-column: span 3; } .col-4[data-v-91a7237c] { grid-column: span 4; } .col-5[data-v-91a7237c] { grid-column: span 5; } .col-6[data-v-91a7237c] { grid-column: span 6; } .col-7[data-v-91a7237c] { grid-column: span 7; } .col-8[data-v-91a7237c] { grid-column: span 8; } .col-9[data-v-91a7237c] { grid-column: span 9; } .col-10[data-v-91a7237c] { grid-column: span 10; } .col-12[data-v-91a7237c] { grid-column: span 12; } .col-13[data-v-91a7237c] { grid-column: span 13; } .col-14[data-v-91a7237c] { grid-column: span 14; } .col-15[data-v-91a7237c] { grid-column: span 15; } .col-16[data-v-91a7237c] { grid-column: span 16; } .col-18[data-v-91a7237c] { grid-column: span 18; } .col-20[data-v-91a7237c] { grid-column: span 20; } .col-22[data-v-91a7237c] { grid-column: span 22; } .col-24[data-v-91a7237c] { grid-column: span 24; } .col-26[data-v-91a7237c] { grid-column: span 26; } .col-27[data-v-91a7237c] { grid-column: span 27; } .col-28[data-v-91a7237c] { grid-column: span 28; } .col-30[data-v-91a7237c] { grid-column: span 30; } .col-36[data-v-91a7237c] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-91a7237c] { display: none; } .col-md-36[data-v-91a7237c] { grid-column: span 36; } .col-md-28[data-v-91a7237c] { grid-column: span 28; } .col-md-27[data-v-91a7237c] { grid-column: span 27; } .col-md-24[data-v-91a7237c] { grid-column: span 24; } .col-md-22[data-v-91a7237c] { grid-column: span 22; } .col-md-20[data-v-91a7237c] { grid-column: span 20; } .col-md-19[data-v-91a7237c] { grid-column: span 19; } .col-md-18[data-v-91a7237c] { grid-column: span 18; } .col-md-17[data-v-91a7237c] { grid-column: span 17; } .col-md-16[data-v-91a7237c] { grid-column: span 16; } .col-md-15[data-v-91a7237c] { grid-column: span 15; } .col-md-14[data-v-91a7237c] { grid-column: span 14; } .col-md-13[data-v-91a7237c] { grid-column: span 13; } .col-md-12[data-v-91a7237c] { grid-column: span 12; } .col-md-10[data-v-91a7237c] { grid-column: span 10; } .col-md-9[data-v-91a7237c] { grid-column: span 9; } .col-md-8[data-v-91a7237c] { grid-column: span 8; } .col-md-6[data-v-91a7237c] { grid-column: span 6; } .col-md-5[data-v-91a7237c] { grid-column: span 5; } .col-md-4[data-v-91a7237c] { grid-column: span 4; } .col-md-3[data-v-91a7237c] { grid-column: span 3; } .col-md-2[data-v-91a7237c] { grid-column: span 2; } .col-md-1[data-v-91a7237c] { grid-column: span 1; } .col-md-auto[data-v-91a7237c] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-91a7237c] { display: none; } .col-sm-36[data-v-91a7237c] { grid-column: span 36; } .col-sm-32[data-v-91a7237c] { grid-column: span 32; } .col-sm-28[data-v-91a7237c] { grid-column: span 28; } .col-sm-27[data-v-91a7237c] { grid-column: span 27; } .col-sm-24[data-v-91a7237c] { grid-column: span 24; } .col-sm-22[data-v-91a7237c] { grid-column: span 22; } .col-sm-20[data-v-91a7237c] { grid-column: span 20; } .col-sm-18[data-v-91a7237c] { grid-column: span 18; } .col-sm-16[data-v-91a7237c] { grid-column: span 16; } .col-sm-15[data-v-91a7237c] { grid-column: span 15; } .col-sm-14[data-v-91a7237c] { grid-column: span 14; } .col-sm-13[data-v-91a7237c] { grid-column: span 12; } .col-sm-12[data-v-91a7237c] { grid-column: span 12; } .col-sm-10[data-v-91a7237c] { grid-column: span 10; } .col-sm-9[data-v-91a7237c] { grid-column: span 8; } .col-sm-8[data-v-91a7237c] { grid-column: span 8; } .col-sm-6[data-v-91a7237c] { grid-column: span 6; } .col-sm-4[data-v-91a7237c] { grid-column: span 4; } .col-sm-auto[data-v-91a7237c] { grid-column: auto; } } .fade-enter-active[data-v-91a7237c] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-91a7237c] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-91a7237c], .fade-leave-to[data-v-91a7237c] { opacity: 0; } .footer[data-v-91a7237c] { position: relative; background: linear-gradient(180deg, var(--footer-bg-start) 0%, var(--footer-bg-end) 100%); overflow: hidden; transition: background 0.3s ease; border-top: 1px solid var(--chrome-border); } .footer__glow[data-v-91a7237c] { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--primary-500), transparent); opacity: 0.4; } .footer__glow[data-v-91a7237c]::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 80px; background: radial-gradient(ellipse at top, rgba(var(--primary-500-rgb), 0.1) 0%, transparent 70%); pointer-events: none; } .footer__container[data-v-91a7237c] { position: relative; max-width: 1280px; margin: 0 auto; padding: 40px 24px; } .footer__main[data-v-91a7237c] { display: grid; grid-template-columns: 1.4fr 2fr 1fr; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--chrome-border-subtle); } .footer__brand[data-v-91a7237c] { display: flex; flex-direction: column; gap: 16px; } .footer__logo[data-v-91a7237c] { color: var(--primary-400); } .footer__tagline[data-v-91a7237c] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; color: var(--chrome-text-muted); line-height: 1.6; margin: 0; max-width: 260px; } .footer__contact-inline[data-v-91a7237c] { margin-top: 4px; } .footer__contact-link[data-v-91a7237c] { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; color: var(--chrome-text-subtle); text-decoration: none; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .footer__contact-link svg[data-v-91a7237c] { color: var(--primary-500); opacity: 0.7; } .footer__contact-link[data-v-91a7237c]:hover { color: var(--primary-400); } .footer__contact-link:hover svg[data-v-91a7237c] { opacity: 1; } .footer__nav[data-v-91a7237c] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .footer__nav-col[data-v-91a7237c] { display: flex; flex-direction: column; gap: 12px; } .footer__nav-title[data-v-91a7237c] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 11px; font-weight: 600; color: var(--chrome-text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 4px; } .footer__nav-list[data-v-91a7237c] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .footer__nav-list li[data-v-91a7237c] { display: flex; align-items: center; gap: 8px; } .footer__nav-list a[data-v-91a7237c], .footer__nav-list span[data-v-91a7237c] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; color: var(--chrome-text-subtle); text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .footer__nav-list a[data-v-91a7237c]:hover { color: var(--primary-400); } .footer__nav-list svg[data-v-91a7237c] { color: var(--chrome-border); flex-shrink: 0; } .footer__nav-list--contact[data-v-91a7237c] { gap: 10px; } .footer__nav-list--contact a[data-v-91a7237c], .footer__nav-list--contact span[data-v-91a7237c] { font-size: 12px; } .footer__newsletter-col[data-v-91a7237c] { display: flex; flex-direction: column; gap: 16px; } .footer__newsletter[data-v-91a7237c] { width: 100%; } .footer__trust[data-v-91a7237c] { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 20px 0; border-top: 1px solid var(--chrome-border-subtle); border-bottom: 1px solid var(--chrome-border-subtle); } .footer__trust-payments[data-v-91a7237c] { display: flex; align-items: center; gap: 16px; } .footer__trust-label[data-v-91a7237c] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 11px; font-weight: 500; color: var(--chrome-text-subtle); text-transform: uppercase; letter-spacing: 0.5px; } .footer__trust-icons[data-v-91a7237c] { display: flex; align-items: center; gap: 8px; } .footer__payment-icon--crypto[data-v-91a7237c] { color: #f7931a; opacity: 0.7; } .footer__crypto-label[data-v-91a7237c] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 11px; font-weight: 600; color: var(--chrome-text-muted); padding: 3px 8px; background: var(--chrome-hover); border-radius: 4px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .footer__crypto-label[data-v-91a7237c]:hover { background: var(--chrome-active); color: var(--chrome-text); } .footer__trust-badges[data-v-91a7237c] { display: flex; gap: 20px; } .footer__trust-badge[data-v-91a7237c] { display: flex; align-items: center; gap: 6px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 12px; color: var(--chrome-text-subtle); } .footer__trust-badge svg[data-v-91a7237c] { color: #10b981; } .footer__bottom[data-v-91a7237c] { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 20px; } .footer__copyright[data-v-91a7237c] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 12px; color: var(--chrome-text-subtle); margin: 0; } .footer__legal-links[data-v-91a7237c] { display: flex; gap: 20px; } .footer__legal-links a[data-v-91a7237c] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 12px; color: var(--chrome-text-subtle); text-decoration: none; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .footer__legal-links a[data-v-91a7237c]:hover { color: var(--primary-400); } .footer__bottom-right[data-v-91a7237c] { display: flex; align-items: center; gap: 16px; } .footer__version[data-v-91a7237c] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 11px; color: var(--chrome-border); padding: 3px 8px; background: var(--chrome-hover); border-radius: 4px; } .footer__locale[data-v-91a7237c] { display: flex; align-items: center; gap: 5px; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 12px; color: var(--chrome-text-subtle); cursor: pointer; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .footer__locale[data-v-91a7237c]:hover { color: var(--chrome-text); } @media (max-width: 1160px) { .footer__main[data-v-91a7237c] { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 32px; text-align: center; } .footer__brand[data-v-91a7237c] { grid-row: 1; grid-column: 1; flex-direction: column; align-items: center; justify-self: center; gap: 16px; } .footer__tagline[data-v-91a7237c] { max-width: 280px; } .footer__contact-inline[data-v-91a7237c] { margin-top: 0; margin-left: 0; } .footer__newsletter-col[data-v-91a7237c] { grid-row: 1; grid-column: 2; justify-self: center; align-self: center; max-width: 280px; } .footer__nav[data-v-91a7237c] { grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 24px; justify-items: center; padding-top: 24px; border-top: 1px solid var(--chrome-border-subtle); } .footer__nav-col[data-v-91a7237c] { align-items: center; } } @media (max-width: 720px) { .footer__container[data-v-91a7237c] { padding: 24px 20px 20px; } .footer__tagline[data-v-91a7237c] { font-size: 11px; line-height: 1.5; max-width: 240px; } .footer__contact-inline[data-v-91a7237c] { margin-left: 0; margin-top: 4px; } .footer__contact-link[data-v-91a7237c] { font-size: 11px; } .footer__newsletter-col[data-v-91a7237c] { max-width: 240px; } .footer__newsletter-col .footer__nav-title[data-v-91a7237c] { font-size: 9px; margin-bottom: 10px; } .footer__nav[data-v-91a7237c] { grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 20px; border-top: 1px solid var(--chrome-border-subtle); } .footer__nav-col[data-v-91a7237c] { gap: 8px; } .footer__nav-title[data-v-91a7237c] { font-size: 9px; letter-spacing: 0.6px; margin-bottom: 2px; } .footer__nav-list[data-v-91a7237c] { gap: 5px; } .footer__nav-list a[data-v-91a7237c], .footer__nav-list span[data-v-91a7237c] { font-size: 11px; } .footer__trust[data-v-91a7237c] { flex-direction: column; align-items: center; gap: 16px; padding: 16px 0; } .footer__trust-payments[data-v-91a7237c] { flex-direction: row; gap: 12px; align-items: center; } .footer__trust-badges[data-v-91a7237c] { flex-wrap: wrap; justify-content: center; gap: 12px 20px; } .footer__trust-badge[data-v-91a7237c] { font-size: 11px; } .footer__bottom[data-v-91a7237c] { flex-direction: column; align-items: center; text-align: center; gap: 10px; } .footer__legal-links[data-v-91a7237c] { justify-content: center; flex-wrap: wrap; gap: 6px 14px; } .footer__legal-links a[data-v-91a7237c] { font-size: 11px; } .footer__copyright[data-v-91a7237c] { font-size: 10px; order: 1; } .footer__bottom-right[data-v-91a7237c] { order: 0; margin-bottom: 2px; } } @media (max-width: 480px) { .footer__main[data-v-91a7237c] { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 24px; } .footer__brand[data-v-91a7237c] { grid-row: 1; grid-column: 1; padding-bottom: 20px; border-bottom: 1px solid var(--chrome-border-subtle); } .footer__newsletter-col[data-v-91a7237c] { grid-row: 2; grid-column: 1; max-width: 320px; } .footer__nav[data-v-91a7237c] { grid-row: 3; grid-column: 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-fc286947]: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-fc286947] { /* 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-fc286947] { /* 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-fc286947]: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-fc286947], .theme-mode-light[data-v-fc286947] { /* ═══════════════════════════════════════════════════════════════ 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-fc286947], .theme-mode-dark[data-v-fc286947] { /* ═══════════════════════════════════════════════════════════════ 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-fc286947]: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-fc286947]: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-fc286947] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-fc286947] { 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-fc286947]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-fc286947], input[disabled][data-v-fc286947] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-fc286947] { opacity: 0.9; } input[readonly][data-v-fc286947] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-fc286947] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-fc286947]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-fc286947]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-fc286947]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-fc286947] { 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-fc286947]:nth-child(odd), .list-card-desktop__wrapper[data-v-fc286947]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-fc286947]:nth-child(even), .list-card-desktop__wrapper[data-v-fc286947]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-fc286947]:nth-child(odd), .listCardDesktopWrapper[data-v-fc286947]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-fc286947]:nth-child(even), .listCardDesktopWrapper[data-v-fc286947]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-fc286947] { 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-fc286947] { cursor: pointer; } .card-layout--selectionnable[data-v-fc286947]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-fc286947] { cursor: auto; } .card-layout--drawer[data-v-fc286947] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-fc286947] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-fc286947] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-fc286947] { 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-fc286947] { 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-fc286947] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-fc286947]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-fc286947] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-fc286947] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-fc286947] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-fc286947] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-fc286947] { 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-fc286947] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-fc286947] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-fc286947] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-fc286947] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-fc286947] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-fc286947] { background-color: #eb1515; } .color-chip--dossiers[data-v-fc286947] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-fc286947] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-fc286947] { background-color: #00a79b; } .color-chip--virements[data-v-fc286947] { background-color: var(--secondary-400); } .color-chip--factures[data-v-fc286947] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-fc286947] { background-color: #eb1515; } .color-recherche-dossiers[data-v-fc286947] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-fc286947] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-fc286947] { background-color: #00a79b; } .color-recherche-virements[data-v-fc286947] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-fc286947] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-fc286947] { color: #00a79b; cursor: pointer; } .scrollable[data-v-fc286947] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-fc286947] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-fc286947] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-fc286947] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-fc286947] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-fc286947] { font-weight: 800; } .grid-cell--column[data-v-fc286947] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-fc286947] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-fc286947] { fill: #00a79b; } .grid-cell--disabled[data-v-fc286947] { color: #cccccc; } .grid-cell--disabled svg[data-v-fc286947] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-fc286947] { white-space: nowrap; } .grid-cell--danger svg[data-v-fc286947] { fill: #eb1515; } .grid-cell--span-1[data-v-fc286947] { grid-column: span 1; } .grid-cell--span-2[data-v-fc286947] { grid-column: span 2; } .grid-cell--span-3[data-v-fc286947] { grid-column: span 3; } .grid-cell--span-4[data-v-fc286947] { grid-column: span 4; } .grid-cell--span-5[data-v-fc286947] { grid-column: span 5; } .grid-cell--span-6[data-v-fc286947] { grid-column: span 6; } .grid-cell--span-7[data-v-fc286947] { grid-column: span 7; } .grid-cell--span-8[data-v-fc286947] { grid-column: span 8; } .grid-cell--span-9[data-v-fc286947] { grid-column: span 9; } .grid-cell--span-10[data-v-fc286947] { grid-column: span 10; } .grid-cell--span-12[data-v-fc286947] { grid-column: span 12; } .grid-cell--span-13[data-v-fc286947] { grid-column: span 13; } .grid-cell--span-14[data-v-fc286947] { grid-column: span 14; } .grid-cell--span-16[data-v-fc286947] { grid-column: span 16; } .grid-cell--span-18[data-v-fc286947] { grid-column: span 18; } .grid-cell--span-20[data-v-fc286947] { grid-column: span 20; } .grid-cell--span-32[data-v-fc286947] { grid-column: span 32; } .grid-cell--span-36[data-v-fc286947] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-fc286947] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-fc286947] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-fc286947] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-fc286947] { justify-content: center !important; } .elem--bold span[data-v-fc286947] { font-weight: 800; } .elem--column[data-v-fc286947] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-fc286947] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-fc286947] { fill: #00a79b; } .elem--clickable[data-v-fc286947]:hover { cursor: pointer; } .elem--disabled[data-v-fc286947] { color: #cccccc; } .elem--disabled svg[data-v-fc286947] { fill: #cccccc; } .elem--nowrap span[data-v-fc286947] { white-space: nowrap; } .elem--danger svg[data-v-fc286947] { fill: #eb1515; } .elem--span-1[data-v-fc286947] { grid-column: span 1; } .elem--span-2[data-v-fc286947] { grid-column: span 2; } .elem--span-3[data-v-fc286947] { grid-column: span 3; } .elem--span-4[data-v-fc286947] { grid-column: span 4; } .elem--span-5[data-v-fc286947] { grid-column: span 5; } .elem--span-6[data-v-fc286947] { grid-column: span 6; } .elem--span-7[data-v-fc286947] { grid-column: span 7; } .elem--span-8[data-v-fc286947] { grid-column: span 8; } .elem--span-9[data-v-fc286947] { grid-column: span 9; } .elem--span-10[data-v-fc286947] { grid-column: span 10; } .elem--span-12[data-v-fc286947] { grid-column: span 12; } .elem--span-13[data-v-fc286947] { grid-column: span 13; } .elem--span-14[data-v-fc286947] { grid-column: span 14; } .elem--span-16[data-v-fc286947] { grid-column: span 16; } .elem--span-18[data-v-fc286947] { grid-column: span 18; } .elem--span-20[data-v-fc286947] { grid-column: span 20; } .elem--span-32[data-v-fc286947] { grid-column: span 32; } .elem--span-36[data-v-fc286947] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-fc286947] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-fc286947] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-fc286947]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-fc286947] { display: flex; } /* flex-direction */ .flex-column[data-v-fc286947] { flex-direction: column; } .flex-row[data-v-fc286947] { flex-direction: row; } /* flex */ .flex-1[data-v-fc286947] { flex: 1 !important; } .flex-2[data-v-fc286947] { flex: 2; } .flex-3[data-v-fc286947] { flex: 3; } .flex-3[data-v-fc286947] { flex: 4; } .flex-5[data-v-fc286947] { flex: 5; } .flex-auto[data-v-fc286947] { flex: auto; } .flex-none[data-v-fc286947] { flex: none; } .flex-content[data-v-fc286947] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-fc286947] { flex-wrap: wrap; } .flex-nowrap[data-v-fc286947] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-fc286947] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-fc286947] { justify-content: flex-start; } .justify-content-end[data-v-fc286947] { justify-content: flex-end; } .justify-content-baseline[data-v-fc286947] { justify-content: baseline; } .justify-content-center[data-v-fc286947] { justify-content: center; } .justify-content-space-between[data-v-fc286947] { justify-content: space-between; } .justify-content-space-around[data-v-fc286947] { justify-content: space-around; } .justify-content-space-evenly[data-v-fc286947] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-fc286947] { align-items: flex-start; } .align-items-flex-end[data-v-fc286947] { align-items: flex-end; } .align-items-stretch[data-v-fc286947] { align-items: stretch; } .align-items-baseline[data-v-fc286947] { align-items: baseline; } .align-items-center[data-v-fc286947] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-fc286947] { align-content: flex-start; } .align-content-flex-end[data-v-fc286947] { align-content: flex-end; } .align-content-center[data-v-fc286947] { align-content: center; } .align-content-stretch[data-v-fc286947] { align-content: stretch; } .align-content-space-between[data-v-fc286947] { align-content: space-between; } .align-content-space-around[data-v-fc286947] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-fc286947] { align-self: flex-start; } .align-self-flex-end[data-v-fc286947] { align-self: flex-end; } .align-self-stretch[data-v-fc286947] { align-self: stretch; } .align-self-flex-baseline[data-v-fc286947] { align-self: baseline; } .align-self-center[data-v-fc286947] { align-self: center; } .align-self-auto[data-v-fc286947] { align-self: auto; } .flex-gap-1[data-v-fc286947] { gap: 4px; } .flex-gap-2[data-v-fc286947] { gap: 8px; } .flex-gap-3[data-v-fc286947] { gap: 12px; } .flex-gap-4[data-v-fc286947] { gap: 16px; } .flex-gap-5[data-v-fc286947] { gap: 20px; } .flex-gap-6[data-v-fc286947] { gap: 24px; } .flex-gap-7[data-v-fc286947] { gap: 28px; } .flex-gap-8[data-v-fc286947] { gap: 32px; } .flex-gap-10[data-v-fc286947] { gap: 40px; } .flex-gap-12[data-v-fc286947] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-fc286947] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-fc286947] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-fc286947] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-fc286947] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-fc286947] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-fc286947] { display: none !important; } } .col-none[data-v-fc286947] { display: none; } .col-auto[data-v-fc286947] { grid-column: auto; } .col-1[data-v-fc286947] { grid-column: span 1; } .col-2[data-v-fc286947] { grid-column: span 2; } .col-3[data-v-fc286947] { grid-column: span 3; } .col-4[data-v-fc286947] { grid-column: span 4; } .col-5[data-v-fc286947] { grid-column: span 5; } .col-6[data-v-fc286947] { grid-column: span 6; } .col-7[data-v-fc286947] { grid-column: span 7; } .col-8[data-v-fc286947] { grid-column: span 8; } .col-9[data-v-fc286947] { grid-column: span 9; } .col-10[data-v-fc286947] { grid-column: span 10; } .col-12[data-v-fc286947] { grid-column: span 12; } .col-13[data-v-fc286947] { grid-column: span 13; } .col-14[data-v-fc286947] { grid-column: span 14; } .col-15[data-v-fc286947] { grid-column: span 15; } .col-16[data-v-fc286947] { grid-column: span 16; } .col-18[data-v-fc286947] { grid-column: span 18; } .col-20[data-v-fc286947] { grid-column: span 20; } .col-22[data-v-fc286947] { grid-column: span 22; } .col-24[data-v-fc286947] { grid-column: span 24; } .col-26[data-v-fc286947] { grid-column: span 26; } .col-27[data-v-fc286947] { grid-column: span 27; } .col-28[data-v-fc286947] { grid-column: span 28; } .col-30[data-v-fc286947] { grid-column: span 30; } .col-36[data-v-fc286947] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-fc286947] { display: none; } .col-md-36[data-v-fc286947] { grid-column: span 36; } .col-md-28[data-v-fc286947] { grid-column: span 28; } .col-md-27[data-v-fc286947] { grid-column: span 27; } .col-md-24[data-v-fc286947] { grid-column: span 24; } .col-md-22[data-v-fc286947] { grid-column: span 22; } .col-md-20[data-v-fc286947] { grid-column: span 20; } .col-md-19[data-v-fc286947] { grid-column: span 19; } .col-md-18[data-v-fc286947] { grid-column: span 18; } .col-md-17[data-v-fc286947] { grid-column: span 17; } .col-md-16[data-v-fc286947] { grid-column: span 16; } .col-md-15[data-v-fc286947] { grid-column: span 15; } .col-md-14[data-v-fc286947] { grid-column: span 14; } .col-md-13[data-v-fc286947] { grid-column: span 13; } .col-md-12[data-v-fc286947] { grid-column: span 12; } .col-md-10[data-v-fc286947] { grid-column: span 10; } .col-md-9[data-v-fc286947] { grid-column: span 9; } .col-md-8[data-v-fc286947] { grid-column: span 8; } .col-md-6[data-v-fc286947] { grid-column: span 6; } .col-md-5[data-v-fc286947] { grid-column: span 5; } .col-md-4[data-v-fc286947] { grid-column: span 4; } .col-md-3[data-v-fc286947] { grid-column: span 3; } .col-md-2[data-v-fc286947] { grid-column: span 2; } .col-md-1[data-v-fc286947] { grid-column: span 1; } .col-md-auto[data-v-fc286947] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-fc286947] { display: none; } .col-sm-36[data-v-fc286947] { grid-column: span 36; } .col-sm-32[data-v-fc286947] { grid-column: span 32; } .col-sm-28[data-v-fc286947] { grid-column: span 28; } .col-sm-27[data-v-fc286947] { grid-column: span 27; } .col-sm-24[data-v-fc286947] { grid-column: span 24; } .col-sm-22[data-v-fc286947] { grid-column: span 22; } .col-sm-20[data-v-fc286947] { grid-column: span 20; } .col-sm-18[data-v-fc286947] { grid-column: span 18; } .col-sm-16[data-v-fc286947] { grid-column: span 16; } .col-sm-15[data-v-fc286947] { grid-column: span 15; } .col-sm-14[data-v-fc286947] { grid-column: span 14; } .col-sm-13[data-v-fc286947] { grid-column: span 12; } .col-sm-12[data-v-fc286947] { grid-column: span 12; } .col-sm-10[data-v-fc286947] { grid-column: span 10; } .col-sm-9[data-v-fc286947] { grid-column: span 8; } .col-sm-8[data-v-fc286947] { grid-column: span 8; } .col-sm-6[data-v-fc286947] { grid-column: span 6; } .col-sm-4[data-v-fc286947] { grid-column: span 4; } .col-sm-auto[data-v-fc286947] { grid-column: auto; } } .fade-enter-active[data-v-fc286947] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-fc286947] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-fc286947], .fade-leave-to[data-v-fc286947] { opacity: 0; } .cart__dropdown[data-v-fc286947] { display: flex; flex-direction: column; } .cart__header[data-v-fc286947] { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; font-weight: 600; color: #f8f9fb; } .cart__header-count[data-v-fc286947] { font-size: 12px; font-weight: 500; color: #b4bfce; padding: 4px 10px; background: rgba(255, 255, 255, 0.04); border-radius: 100px; } .cart__list[data-v-fc286947] { max-height: 320px; overflow-y: auto; margin: 12px -4px; padding: 0 4px; } .cart__list[data-v-fc286947]::-webkit-scrollbar { width: 4px; } .cart__list[data-v-fc286947]::-webkit-scrollbar-track { background: transparent; } .cart__list[data-v-fc286947]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } .cart__item[data-v-fc286947] { display: flex; gap: 12px; padding: 12px; border-radius: 12px; transition: background 0.2s; position: relative; } .cart__item[data-v-fc286947]:hover { background: rgba(255, 255, 255, 0.04); } .cart__item:hover .cart__item-remove[data-v-fc286947] { opacity: 1; } .cart__item-image[data-v-fc286947] { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); flex-shrink: 0; } .cart__item-image img[data-v-fc286947] { width: 100%; height: 100%; object-fit: cover; } .cart__item-info[data-v-fc286947] { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .cart__item-name[data-v-fc286947] { font-size: 14px; font-weight: 500; color: #f8f9fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart__item-badges[data-v-fc286947] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .cart__item-badge[data-v-fc286947] { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; white-space: nowrap; } .cart__item-badge--promo[data-v-fc286947] { background: rgba(var(--danger-500-rgb), 0.2); color: var(--danger-400); } .cart__item-badge--pack[data-v-fc286947] { background: rgba(var(--success-500-rgb), 0.2); color: var(--success-400); } .cart__item-badge--cumulated[data-v-fc286947] { background: linear-gradient(135deg, rgba(var(--success-500-rgb), 0.2) 0%, rgba(var(--primary-500-rgb), 0.2) 100%); color: var(--success-400); } .cart__item-meta[data-v-fc286947] { display: flex; justify-content: space-between; align-items: center; } .cart__item-qty[data-v-fc286947] { font-size: 12px; color: #b4bfce; } .cart__item-price[data-v-fc286947] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #f8f9fb; } .cart__item-price--old[data-v-fc286947] { font-size: 12px; font-weight: 400; color: #b4bfce; text-decoration: line-through; } .cart__item-price--new[data-v-fc286947] { color: var(--primary-400); } .cart__item-remove[data-v-fc286947] { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: none; color: #b4bfce; cursor: pointer; opacity: 0; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .cart__item-remove[data-v-fc286947]:hover { background: rgba(var(--danger-500-rgb), 0.15); color: var(--danger-400); } .cart__footer[data-v-fc286947] { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 12px; } .cart__shipping-progress[data-v-fc286947] { padding: 10px 12px; background: rgba(var(--primary-500-rgb), 0.08); border-radius: 10px; border: 1px solid rgba(var(--primary-500-rgb), 0.15); } .cart__shipping-bar[data-v-fc286947] { height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; margin-bottom: 8px; } .cart__shipping-fill[data-v-fc286947] { height: 100%; background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 100%); border-radius: 2px; transition: width 0.3s ease; } .cart__shipping-text[data-v-fc286947] { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; color: var(--primary-300); } .cart__shipping-text svg[data-v-fc286947] { flex-shrink: 0; } .cart__shipping-unlocked[data-v-fc286947] { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; background: rgba(var(--success-500-rgb), 0.12); border: 1px solid rgba(var(--success-500-rgb), 0.2); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--success-400); } .cart__shipping-unlocked svg[data-v-fc286947] { color: var(--success-400); } .cart__trust[data-v-fc286947] { display: flex; gap: 12px; padding: 8px 0; } .cart__trust-item[data-v-fc286947] { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #b4bfce; } .cart__trust-item svg[data-v-fc286947] { color: var(--success-500); flex-shrink: 0; } .cart__total[data-v-fc286947] { display: flex; justify-content: space-between; align-items: center; } .cart__total span[data-v-fc286947] { font-size: 14px; color: #b4bfce; } .cart__total strong[data-v-fc286947] { font-size: 20px; font-weight: 700; color: var(--primary-400); } .cart__actions[data-v-fc286947] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .item-enter-active[data-v-fc286947] { animation: itemSlide-fc286947 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .item-leave-active[data-v-fc286947] { animation: itemSlide-fc286947 0.2s cubic-bezier(0.16, 1, 0.3, 1) reverse; position: absolute; width: 100%; } @keyframes itemSlide-fc286947 { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 720px) { .cart__item-remove[data-v-fc286947] { opacity: 1; } .cart__actions[data-v-fc286947] { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════ 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-2101ac16]: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-2101ac16] { /* 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-2101ac16] { /* 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-2101ac16]: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-2101ac16], .theme-mode-light[data-v-2101ac16] { /* ═══════════════════════════════════════════════════════════════ 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-2101ac16], .theme-mode-dark[data-v-2101ac16] { /* ═══════════════════════════════════════════════════════════════ 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-2101ac16]: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-2101ac16]: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-2101ac16] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-2101ac16] { 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-2101ac16]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-2101ac16], input[disabled][data-v-2101ac16] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-2101ac16] { opacity: 0.9; } input[readonly][data-v-2101ac16] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-2101ac16] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-2101ac16]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-2101ac16]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-2101ac16]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-2101ac16] { 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-2101ac16]:nth-child(odd), .list-card-desktop__wrapper[data-v-2101ac16]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-2101ac16]:nth-child(even), .list-card-desktop__wrapper[data-v-2101ac16]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-2101ac16]:nth-child(odd), .listCardDesktopWrapper[data-v-2101ac16]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-2101ac16]:nth-child(even), .listCardDesktopWrapper[data-v-2101ac16]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-2101ac16] { 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-2101ac16] { cursor: pointer; } .card-layout--selectionnable[data-v-2101ac16]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-2101ac16] { cursor: auto; } .card-layout--drawer[data-v-2101ac16] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-2101ac16] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-2101ac16] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-2101ac16] { 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-2101ac16] { 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-2101ac16] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-2101ac16]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-2101ac16] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-2101ac16] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-2101ac16] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-2101ac16] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-2101ac16] { 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-2101ac16] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-2101ac16] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-2101ac16] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-2101ac16] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-2101ac16] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-2101ac16] { background-color: #eb1515; } .color-chip--dossiers[data-v-2101ac16] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-2101ac16] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-2101ac16] { background-color: #00a79b; } .color-chip--virements[data-v-2101ac16] { background-color: var(--secondary-400); } .color-chip--factures[data-v-2101ac16] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-2101ac16] { background-color: #eb1515; } .color-recherche-dossiers[data-v-2101ac16] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-2101ac16] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-2101ac16] { background-color: #00a79b; } .color-recherche-virements[data-v-2101ac16] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-2101ac16] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-2101ac16] { color: #00a79b; cursor: pointer; } .scrollable[data-v-2101ac16] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-2101ac16] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-2101ac16] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-2101ac16] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-2101ac16] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-2101ac16] { font-weight: 800; } .grid-cell--column[data-v-2101ac16] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-2101ac16] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-2101ac16] { fill: #00a79b; } .grid-cell--disabled[data-v-2101ac16] { color: #cccccc; } .grid-cell--disabled svg[data-v-2101ac16] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-2101ac16] { white-space: nowrap; } .grid-cell--danger svg[data-v-2101ac16] { fill: #eb1515; } .grid-cell--span-1[data-v-2101ac16] { grid-column: span 1; } .grid-cell--span-2[data-v-2101ac16] { grid-column: span 2; } .grid-cell--span-3[data-v-2101ac16] { grid-column: span 3; } .grid-cell--span-4[data-v-2101ac16] { grid-column: span 4; } .grid-cell--span-5[data-v-2101ac16] { grid-column: span 5; } .grid-cell--span-6[data-v-2101ac16] { grid-column: span 6; } .grid-cell--span-7[data-v-2101ac16] { grid-column: span 7; } .grid-cell--span-8[data-v-2101ac16] { grid-column: span 8; } .grid-cell--span-9[data-v-2101ac16] { grid-column: span 9; } .grid-cell--span-10[data-v-2101ac16] { grid-column: span 10; } .grid-cell--span-12[data-v-2101ac16] { grid-column: span 12; } .grid-cell--span-13[data-v-2101ac16] { grid-column: span 13; } .grid-cell--span-14[data-v-2101ac16] { grid-column: span 14; } .grid-cell--span-16[data-v-2101ac16] { grid-column: span 16; } .grid-cell--span-18[data-v-2101ac16] { grid-column: span 18; } .grid-cell--span-20[data-v-2101ac16] { grid-column: span 20; } .grid-cell--span-32[data-v-2101ac16] { grid-column: span 32; } .grid-cell--span-36[data-v-2101ac16] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-2101ac16] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-2101ac16] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-2101ac16] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-2101ac16] { justify-content: center !important; } .elem--bold span[data-v-2101ac16] { font-weight: 800; } .elem--column[data-v-2101ac16] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-2101ac16] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-2101ac16] { fill: #00a79b; } .elem--clickable[data-v-2101ac16]:hover { cursor: pointer; } .elem--disabled[data-v-2101ac16] { color: #cccccc; } .elem--disabled svg[data-v-2101ac16] { fill: #cccccc; } .elem--nowrap span[data-v-2101ac16] { white-space: nowrap; } .elem--danger svg[data-v-2101ac16] { fill: #eb1515; } .elem--span-1[data-v-2101ac16] { grid-column: span 1; } .elem--span-2[data-v-2101ac16] { grid-column: span 2; } .elem--span-3[data-v-2101ac16] { grid-column: span 3; } .elem--span-4[data-v-2101ac16] { grid-column: span 4; } .elem--span-5[data-v-2101ac16] { grid-column: span 5; } .elem--span-6[data-v-2101ac16] { grid-column: span 6; } .elem--span-7[data-v-2101ac16] { grid-column: span 7; } .elem--span-8[data-v-2101ac16] { grid-column: span 8; } .elem--span-9[data-v-2101ac16] { grid-column: span 9; } .elem--span-10[data-v-2101ac16] { grid-column: span 10; } .elem--span-12[data-v-2101ac16] { grid-column: span 12; } .elem--span-13[data-v-2101ac16] { grid-column: span 13; } .elem--span-14[data-v-2101ac16] { grid-column: span 14; } .elem--span-16[data-v-2101ac16] { grid-column: span 16; } .elem--span-18[data-v-2101ac16] { grid-column: span 18; } .elem--span-20[data-v-2101ac16] { grid-column: span 20; } .elem--span-32[data-v-2101ac16] { grid-column: span 32; } .elem--span-36[data-v-2101ac16] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-2101ac16] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-2101ac16] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-2101ac16]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-2101ac16] { display: flex; } /* flex-direction */ .flex-column[data-v-2101ac16] { flex-direction: column; } .flex-row[data-v-2101ac16] { flex-direction: row; } /* flex */ .flex-1[data-v-2101ac16] { flex: 1 !important; } .flex-2[data-v-2101ac16] { flex: 2; } .flex-3[data-v-2101ac16] { flex: 3; } .flex-3[data-v-2101ac16] { flex: 4; } .flex-5[data-v-2101ac16] { flex: 5; } .flex-auto[data-v-2101ac16] { flex: auto; } .flex-none[data-v-2101ac16] { flex: none; } .flex-content[data-v-2101ac16] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-2101ac16] { flex-wrap: wrap; } .flex-nowrap[data-v-2101ac16] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-2101ac16] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-2101ac16] { justify-content: flex-start; } .justify-content-end[data-v-2101ac16] { justify-content: flex-end; } .justify-content-baseline[data-v-2101ac16] { justify-content: baseline; } .justify-content-center[data-v-2101ac16] { justify-content: center; } .justify-content-space-between[data-v-2101ac16] { justify-content: space-between; } .justify-content-space-around[data-v-2101ac16] { justify-content: space-around; } .justify-content-space-evenly[data-v-2101ac16] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-2101ac16] { align-items: flex-start; } .align-items-flex-end[data-v-2101ac16] { align-items: flex-end; } .align-items-stretch[data-v-2101ac16] { align-items: stretch; } .align-items-baseline[data-v-2101ac16] { align-items: baseline; } .align-items-center[data-v-2101ac16] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-2101ac16] { align-content: flex-start; } .align-content-flex-end[data-v-2101ac16] { align-content: flex-end; } .align-content-center[data-v-2101ac16] { align-content: center; } .align-content-stretch[data-v-2101ac16] { align-content: stretch; } .align-content-space-between[data-v-2101ac16] { align-content: space-between; } .align-content-space-around[data-v-2101ac16] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-2101ac16] { align-self: flex-start; } .align-self-flex-end[data-v-2101ac16] { align-self: flex-end; } .align-self-stretch[data-v-2101ac16] { align-self: stretch; } .align-self-flex-baseline[data-v-2101ac16] { align-self: baseline; } .align-self-center[data-v-2101ac16] { align-self: center; } .align-self-auto[data-v-2101ac16] { align-self: auto; } .flex-gap-1[data-v-2101ac16] { gap: 4px; } .flex-gap-2[data-v-2101ac16] { gap: 8px; } .flex-gap-3[data-v-2101ac16] { gap: 12px; } .flex-gap-4[data-v-2101ac16] { gap: 16px; } .flex-gap-5[data-v-2101ac16] { gap: 20px; } .flex-gap-6[data-v-2101ac16] { gap: 24px; } .flex-gap-7[data-v-2101ac16] { gap: 28px; } .flex-gap-8[data-v-2101ac16] { gap: 32px; } .flex-gap-10[data-v-2101ac16] { gap: 40px; } .flex-gap-12[data-v-2101ac16] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-2101ac16] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-2101ac16] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-2101ac16] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-2101ac16] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-2101ac16] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-2101ac16] { display: none !important; } } .col-none[data-v-2101ac16] { display: none; } .col-auto[data-v-2101ac16] { grid-column: auto; } .col-1[data-v-2101ac16] { grid-column: span 1; } .col-2[data-v-2101ac16] { grid-column: span 2; } .col-3[data-v-2101ac16] { grid-column: span 3; } .col-4[data-v-2101ac16] { grid-column: span 4; } .col-5[data-v-2101ac16] { grid-column: span 5; } .col-6[data-v-2101ac16] { grid-column: span 6; } .col-7[data-v-2101ac16] { grid-column: span 7; } .col-8[data-v-2101ac16] { grid-column: span 8; } .col-9[data-v-2101ac16] { grid-column: span 9; } .col-10[data-v-2101ac16] { grid-column: span 10; } .col-12[data-v-2101ac16] { grid-column: span 12; } .col-13[data-v-2101ac16] { grid-column: span 13; } .col-14[data-v-2101ac16] { grid-column: span 14; } .col-15[data-v-2101ac16] { grid-column: span 15; } .col-16[data-v-2101ac16] { grid-column: span 16; } .col-18[data-v-2101ac16] { grid-column: span 18; } .col-20[data-v-2101ac16] { grid-column: span 20; } .col-22[data-v-2101ac16] { grid-column: span 22; } .col-24[data-v-2101ac16] { grid-column: span 24; } .col-26[data-v-2101ac16] { grid-column: span 26; } .col-27[data-v-2101ac16] { grid-column: span 27; } .col-28[data-v-2101ac16] { grid-column: span 28; } .col-30[data-v-2101ac16] { grid-column: span 30; } .col-36[data-v-2101ac16] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-2101ac16] { display: none; } .col-md-36[data-v-2101ac16] { grid-column: span 36; } .col-md-28[data-v-2101ac16] { grid-column: span 28; } .col-md-27[data-v-2101ac16] { grid-column: span 27; } .col-md-24[data-v-2101ac16] { grid-column: span 24; } .col-md-22[data-v-2101ac16] { grid-column: span 22; } .col-md-20[data-v-2101ac16] { grid-column: span 20; } .col-md-19[data-v-2101ac16] { grid-column: span 19; } .col-md-18[data-v-2101ac16] { grid-column: span 18; } .col-md-17[data-v-2101ac16] { grid-column: span 17; } .col-md-16[data-v-2101ac16] { grid-column: span 16; } .col-md-15[data-v-2101ac16] { grid-column: span 15; } .col-md-14[data-v-2101ac16] { grid-column: span 14; } .col-md-13[data-v-2101ac16] { grid-column: span 13; } .col-md-12[data-v-2101ac16] { grid-column: span 12; } .col-md-10[data-v-2101ac16] { grid-column: span 10; } .col-md-9[data-v-2101ac16] { grid-column: span 9; } .col-md-8[data-v-2101ac16] { grid-column: span 8; } .col-md-6[data-v-2101ac16] { grid-column: span 6; } .col-md-5[data-v-2101ac16] { grid-column: span 5; } .col-md-4[data-v-2101ac16] { grid-column: span 4; } .col-md-3[data-v-2101ac16] { grid-column: span 3; } .col-md-2[data-v-2101ac16] { grid-column: span 2; } .col-md-1[data-v-2101ac16] { grid-column: span 1; } .col-md-auto[data-v-2101ac16] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-2101ac16] { display: none; } .col-sm-36[data-v-2101ac16] { grid-column: span 36; } .col-sm-32[data-v-2101ac16] { grid-column: span 32; } .col-sm-28[data-v-2101ac16] { grid-column: span 28; } .col-sm-27[data-v-2101ac16] { grid-column: span 27; } .col-sm-24[data-v-2101ac16] { grid-column: span 24; } .col-sm-22[data-v-2101ac16] { grid-column: span 22; } .col-sm-20[data-v-2101ac16] { grid-column: span 20; } .col-sm-18[data-v-2101ac16] { grid-column: span 18; } .col-sm-16[data-v-2101ac16] { grid-column: span 16; } .col-sm-15[data-v-2101ac16] { grid-column: span 15; } .col-sm-14[data-v-2101ac16] { grid-column: span 14; } .col-sm-13[data-v-2101ac16] { grid-column: span 12; } .col-sm-12[data-v-2101ac16] { grid-column: span 12; } .col-sm-10[data-v-2101ac16] { grid-column: span 10; } .col-sm-9[data-v-2101ac16] { grid-column: span 8; } .col-sm-8[data-v-2101ac16] { grid-column: span 8; } .col-sm-6[data-v-2101ac16] { grid-column: span 6; } .col-sm-4[data-v-2101ac16] { grid-column: span 4; } .col-sm-auto[data-v-2101ac16] { grid-column: auto; } } .fade-enter-active[data-v-2101ac16] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-2101ac16] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-2101ac16], .fade-leave-to[data-v-2101ac16] { opacity: 0; } .cart[data-v-2101ac16] { display: inline-flex; position: relative; } .cart__trigger[data-v-2101ac16] { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .cart__trigger[data-v-2101ac16]:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } .cart__trigger[data-v-2101ac16]:active { opacity: 0.8; } .cart__trigger--ghost[data-v-2101ac16] { background: transparent; border-color: transparent; } .cart__trigger--ghost[data-v-2101ac16]:hover { background: rgba(255, 255, 255, 0.06); border-color: transparent; } .cart__badge[data-v-2101ac16] { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: #f8f9fb; border-radius: 100px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(var(--primary-600-rgb), 0.4), 0 0 0 2px var(--secondary-900); } .badge-enter-active[data-v-2101ac16] { animation: badgePop-2101ac16 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .badge-leave-active[data-v-2101ac16] { animation: badgePop-2101ac16 0.3s cubic-bezier(0.16, 1, 0.3, 1) reverse; } @keyframes badgePop-2101ac16 { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .cart-sheet-overlay[data-v-2101ac16] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 3000; display: flex; align-items: flex-end; justify-content: center; } .cart-sheet[data-v-2101ac16] { width: 100%; max-height: 85vh; background: rgba(var(--secondary-900-rgb), 0.98); backdrop-filter: blur(20px); border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 12px 20px 24px; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); overflow-y: auto; } .cart-sheet__handle[data-v-2101ac16] { width: 40px; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; margin: 0 auto 16px; } .sheet-enter-active[data-v-2101ac16], .sheet-leave-active[data-v-2101ac16] { transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1); } .sheet-enter-active .cart-sheet[data-v-2101ac16], .sheet-leave-active .cart-sheet[data-v-2101ac16] { transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); } .sheet-enter-from[data-v-2101ac16], .sheet-leave-to[data-v-2101ac16] { opacity: 0; } .sheet-enter-from .cart-sheet[data-v-2101ac16], .sheet-leave-to .cart-sheet[data-v-2101ac16] { transform: translateY(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 ) */ [data-v-4beda9f9]: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-4beda9f9] { /* 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-4beda9f9] { /* 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-4beda9f9]: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-4beda9f9], .theme-mode-light[data-v-4beda9f9] { /* ═══════════════════════════════════════════════════════════════ 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-4beda9f9], .theme-mode-dark[data-v-4beda9f9] { /* ═══════════════════════════════════════════════════════════════ 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-4beda9f9]: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-4beda9f9]: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-4beda9f9] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-4beda9f9] { 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-4beda9f9]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-4beda9f9], input[disabled][data-v-4beda9f9] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-4beda9f9] { opacity: 0.9; } input[readonly][data-v-4beda9f9] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-4beda9f9] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-4beda9f9]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-4beda9f9]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-4beda9f9]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-4beda9f9] { 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-4beda9f9]:nth-child(odd), .list-card-desktop__wrapper[data-v-4beda9f9]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-4beda9f9]:nth-child(even), .list-card-desktop__wrapper[data-v-4beda9f9]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-4beda9f9]:nth-child(odd), .listCardDesktopWrapper[data-v-4beda9f9]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-4beda9f9]:nth-child(even), .listCardDesktopWrapper[data-v-4beda9f9]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-4beda9f9] { 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-4beda9f9] { cursor: pointer; } .card-layout--selectionnable[data-v-4beda9f9]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-4beda9f9] { cursor: auto; } .card-layout--drawer[data-v-4beda9f9] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-4beda9f9] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-4beda9f9] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-4beda9f9] { 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-4beda9f9] { 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-4beda9f9] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-4beda9f9]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-4beda9f9] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-4beda9f9] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-4beda9f9] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-4beda9f9] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-4beda9f9] { 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-4beda9f9] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-4beda9f9] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-4beda9f9] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-4beda9f9] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-4beda9f9] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-4beda9f9] { background-color: #eb1515; } .color-chip--dossiers[data-v-4beda9f9] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-4beda9f9] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-4beda9f9] { background-color: #00a79b; } .color-chip--virements[data-v-4beda9f9] { background-color: var(--secondary-400); } .color-chip--factures[data-v-4beda9f9] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-4beda9f9] { background-color: #eb1515; } .color-recherche-dossiers[data-v-4beda9f9] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-4beda9f9] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-4beda9f9] { background-color: #00a79b; } .color-recherche-virements[data-v-4beda9f9] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-4beda9f9] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-4beda9f9] { color: #00a79b; cursor: pointer; } .scrollable[data-v-4beda9f9] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-4beda9f9] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-4beda9f9] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-4beda9f9] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-4beda9f9] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-4beda9f9] { font-weight: 800; } .grid-cell--column[data-v-4beda9f9] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-4beda9f9] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-4beda9f9] { fill: #00a79b; } .grid-cell--disabled[data-v-4beda9f9] { color: #cccccc; } .grid-cell--disabled svg[data-v-4beda9f9] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-4beda9f9] { white-space: nowrap; } .grid-cell--danger svg[data-v-4beda9f9] { fill: #eb1515; } .grid-cell--span-1[data-v-4beda9f9] { grid-column: span 1; } .grid-cell--span-2[data-v-4beda9f9] { grid-column: span 2; } .grid-cell--span-3[data-v-4beda9f9] { grid-column: span 3; } .grid-cell--span-4[data-v-4beda9f9] { grid-column: span 4; } .grid-cell--span-5[data-v-4beda9f9] { grid-column: span 5; } .grid-cell--span-6[data-v-4beda9f9] { grid-column: span 6; } .grid-cell--span-7[data-v-4beda9f9] { grid-column: span 7; } .grid-cell--span-8[data-v-4beda9f9] { grid-column: span 8; } .grid-cell--span-9[data-v-4beda9f9] { grid-column: span 9; } .grid-cell--span-10[data-v-4beda9f9] { grid-column: span 10; } .grid-cell--span-12[data-v-4beda9f9] { grid-column: span 12; } .grid-cell--span-13[data-v-4beda9f9] { grid-column: span 13; } .grid-cell--span-14[data-v-4beda9f9] { grid-column: span 14; } .grid-cell--span-16[data-v-4beda9f9] { grid-column: span 16; } .grid-cell--span-18[data-v-4beda9f9] { grid-column: span 18; } .grid-cell--span-20[data-v-4beda9f9] { grid-column: span 20; } .grid-cell--span-32[data-v-4beda9f9] { grid-column: span 32; } .grid-cell--span-36[data-v-4beda9f9] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-4beda9f9] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-4beda9f9] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-4beda9f9] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-4beda9f9] { justify-content: center !important; } .elem--bold span[data-v-4beda9f9] { font-weight: 800; } .elem--column[data-v-4beda9f9] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-4beda9f9] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-4beda9f9] { fill: #00a79b; } .elem--clickable[data-v-4beda9f9]:hover { cursor: pointer; } .elem--disabled[data-v-4beda9f9] { color: #cccccc; } .elem--disabled svg[data-v-4beda9f9] { fill: #cccccc; } .elem--nowrap span[data-v-4beda9f9] { white-space: nowrap; } .elem--danger svg[data-v-4beda9f9] { fill: #eb1515; } .elem--span-1[data-v-4beda9f9] { grid-column: span 1; } .elem--span-2[data-v-4beda9f9] { grid-column: span 2; } .elem--span-3[data-v-4beda9f9] { grid-column: span 3; } .elem--span-4[data-v-4beda9f9] { grid-column: span 4; } .elem--span-5[data-v-4beda9f9] { grid-column: span 5; } .elem--span-6[data-v-4beda9f9] { grid-column: span 6; } .elem--span-7[data-v-4beda9f9] { grid-column: span 7; } .elem--span-8[data-v-4beda9f9] { grid-column: span 8; } .elem--span-9[data-v-4beda9f9] { grid-column: span 9; } .elem--span-10[data-v-4beda9f9] { grid-column: span 10; } .elem--span-12[data-v-4beda9f9] { grid-column: span 12; } .elem--span-13[data-v-4beda9f9] { grid-column: span 13; } .elem--span-14[data-v-4beda9f9] { grid-column: span 14; } .elem--span-16[data-v-4beda9f9] { grid-column: span 16; } .elem--span-18[data-v-4beda9f9] { grid-column: span 18; } .elem--span-20[data-v-4beda9f9] { grid-column: span 20; } .elem--span-32[data-v-4beda9f9] { grid-column: span 32; } .elem--span-36[data-v-4beda9f9] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-4beda9f9] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-4beda9f9] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-4beda9f9]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-4beda9f9] { display: flex; } /* flex-direction */ .flex-column[data-v-4beda9f9] { flex-direction: column; } .flex-row[data-v-4beda9f9] { flex-direction: row; } /* flex */ .flex-1[data-v-4beda9f9] { flex: 1 !important; } .flex-2[data-v-4beda9f9] { flex: 2; } .flex-3[data-v-4beda9f9] { flex: 3; } .flex-3[data-v-4beda9f9] { flex: 4; } .flex-5[data-v-4beda9f9] { flex: 5; } .flex-auto[data-v-4beda9f9] { flex: auto; } .flex-none[data-v-4beda9f9] { flex: none; } .flex-content[data-v-4beda9f9] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-4beda9f9] { flex-wrap: wrap; } .flex-nowrap[data-v-4beda9f9] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-4beda9f9] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-4beda9f9] { justify-content: flex-start; } .justify-content-end[data-v-4beda9f9] { justify-content: flex-end; } .justify-content-baseline[data-v-4beda9f9] { justify-content: baseline; } .justify-content-center[data-v-4beda9f9] { justify-content: center; } .justify-content-space-between[data-v-4beda9f9] { justify-content: space-between; } .justify-content-space-around[data-v-4beda9f9] { justify-content: space-around; } .justify-content-space-evenly[data-v-4beda9f9] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-4beda9f9] { align-items: flex-start; } .align-items-flex-end[data-v-4beda9f9] { align-items: flex-end; } .align-items-stretch[data-v-4beda9f9] { align-items: stretch; } .align-items-baseline[data-v-4beda9f9] { align-items: baseline; } .align-items-center[data-v-4beda9f9] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-4beda9f9] { align-content: flex-start; } .align-content-flex-end[data-v-4beda9f9] { align-content: flex-end; } .align-content-center[data-v-4beda9f9] { align-content: center; } .align-content-stretch[data-v-4beda9f9] { align-content: stretch; } .align-content-space-between[data-v-4beda9f9] { align-content: space-between; } .align-content-space-around[data-v-4beda9f9] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-4beda9f9] { align-self: flex-start; } .align-self-flex-end[data-v-4beda9f9] { align-self: flex-end; } .align-self-stretch[data-v-4beda9f9] { align-self: stretch; } .align-self-flex-baseline[data-v-4beda9f9] { align-self: baseline; } .align-self-center[data-v-4beda9f9] { align-self: center; } .align-self-auto[data-v-4beda9f9] { align-self: auto; } .flex-gap-1[data-v-4beda9f9] { gap: 4px; } .flex-gap-2[data-v-4beda9f9] { gap: 8px; } .flex-gap-3[data-v-4beda9f9] { gap: 12px; } .flex-gap-4[data-v-4beda9f9] { gap: 16px; } .flex-gap-5[data-v-4beda9f9] { gap: 20px; } .flex-gap-6[data-v-4beda9f9] { gap: 24px; } .flex-gap-7[data-v-4beda9f9] { gap: 28px; } .flex-gap-8[data-v-4beda9f9] { gap: 32px; } .flex-gap-10[data-v-4beda9f9] { gap: 40px; } .flex-gap-12[data-v-4beda9f9] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-4beda9f9] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-4beda9f9] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-4beda9f9] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-4beda9f9] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-4beda9f9] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-4beda9f9] { display: none !important; } } .col-none[data-v-4beda9f9] { display: none; } .col-auto[data-v-4beda9f9] { grid-column: auto; } .col-1[data-v-4beda9f9] { grid-column: span 1; } .col-2[data-v-4beda9f9] { grid-column: span 2; } .col-3[data-v-4beda9f9] { grid-column: span 3; } .col-4[data-v-4beda9f9] { grid-column: span 4; } .col-5[data-v-4beda9f9] { grid-column: span 5; } .col-6[data-v-4beda9f9] { grid-column: span 6; } .col-7[data-v-4beda9f9] { grid-column: span 7; } .col-8[data-v-4beda9f9] { grid-column: span 8; } .col-9[data-v-4beda9f9] { grid-column: span 9; } .col-10[data-v-4beda9f9] { grid-column: span 10; } .col-12[data-v-4beda9f9] { grid-column: span 12; } .col-13[data-v-4beda9f9] { grid-column: span 13; } .col-14[data-v-4beda9f9] { grid-column: span 14; } .col-15[data-v-4beda9f9] { grid-column: span 15; } .col-16[data-v-4beda9f9] { grid-column: span 16; } .col-18[data-v-4beda9f9] { grid-column: span 18; } .col-20[data-v-4beda9f9] { grid-column: span 20; } .col-22[data-v-4beda9f9] { grid-column: span 22; } .col-24[data-v-4beda9f9] { grid-column: span 24; } .col-26[data-v-4beda9f9] { grid-column: span 26; } .col-27[data-v-4beda9f9] { grid-column: span 27; } .col-28[data-v-4beda9f9] { grid-column: span 28; } .col-30[data-v-4beda9f9] { grid-column: span 30; } .col-36[data-v-4beda9f9] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-4beda9f9] { display: none; } .col-md-36[data-v-4beda9f9] { grid-column: span 36; } .col-md-28[data-v-4beda9f9] { grid-column: span 28; } .col-md-27[data-v-4beda9f9] { grid-column: span 27; } .col-md-24[data-v-4beda9f9] { grid-column: span 24; } .col-md-22[data-v-4beda9f9] { grid-column: span 22; } .col-md-20[data-v-4beda9f9] { grid-column: span 20; } .col-md-19[data-v-4beda9f9] { grid-column: span 19; } .col-md-18[data-v-4beda9f9] { grid-column: span 18; } .col-md-17[data-v-4beda9f9] { grid-column: span 17; } .col-md-16[data-v-4beda9f9] { grid-column: span 16; } .col-md-15[data-v-4beda9f9] { grid-column: span 15; } .col-md-14[data-v-4beda9f9] { grid-column: span 14; } .col-md-13[data-v-4beda9f9] { grid-column: span 13; } .col-md-12[data-v-4beda9f9] { grid-column: span 12; } .col-md-10[data-v-4beda9f9] { grid-column: span 10; } .col-md-9[data-v-4beda9f9] { grid-column: span 9; } .col-md-8[data-v-4beda9f9] { grid-column: span 8; } .col-md-6[data-v-4beda9f9] { grid-column: span 6; } .col-md-5[data-v-4beda9f9] { grid-column: span 5; } .col-md-4[data-v-4beda9f9] { grid-column: span 4; } .col-md-3[data-v-4beda9f9] { grid-column: span 3; } .col-md-2[data-v-4beda9f9] { grid-column: span 2; } .col-md-1[data-v-4beda9f9] { grid-column: span 1; } .col-md-auto[data-v-4beda9f9] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-4beda9f9] { display: none; } .col-sm-36[data-v-4beda9f9] { grid-column: span 36; } .col-sm-32[data-v-4beda9f9] { grid-column: span 32; } .col-sm-28[data-v-4beda9f9] { grid-column: span 28; } .col-sm-27[data-v-4beda9f9] { grid-column: span 27; } .col-sm-24[data-v-4beda9f9] { grid-column: span 24; } .col-sm-22[data-v-4beda9f9] { grid-column: span 22; } .col-sm-20[data-v-4beda9f9] { grid-column: span 20; } .col-sm-18[data-v-4beda9f9] { grid-column: span 18; } .col-sm-16[data-v-4beda9f9] { grid-column: span 16; } .col-sm-15[data-v-4beda9f9] { grid-column: span 15; } .col-sm-14[data-v-4beda9f9] { grid-column: span 14; } .col-sm-13[data-v-4beda9f9] { grid-column: span 12; } .col-sm-12[data-v-4beda9f9] { grid-column: span 12; } .col-sm-10[data-v-4beda9f9] { grid-column: span 10; } .col-sm-9[data-v-4beda9f9] { grid-column: span 8; } .col-sm-8[data-v-4beda9f9] { grid-column: span 8; } .col-sm-6[data-v-4beda9f9] { grid-column: span 6; } .col-sm-4[data-v-4beda9f9] { grid-column: span 4; } .col-sm-auto[data-v-4beda9f9] { grid-column: auto; } } .fade-enter-active[data-v-4beda9f9] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-4beda9f9] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-4beda9f9], .fade-leave-to[data-v-4beda9f9] { opacity: 0; } .wishlist-wrapper[data-v-4beda9f9] { position: relative; display: inline-flex; } .wishlist-wrapper--active .wishlist-btn[data-v-4beda9f9]:hover { background: rgba(var(--danger-500-rgb), 0.08); } .wishlist-btn[data-v-4beda9f9] { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .wishlist-btn[data-v-4beda9f9]:hover { background: rgba(255, 255, 255, 0.06); } .wishlist-btn[data-v-4beda9f9]:active { opacity: 0.8; } .wishlist-glow[data-v-4beda9f9] { position: absolute; inset: -4px; background: radial-gradient(circle, rgba(var(--danger-500-rgb), 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; animation: pulse-4beda9f9 2s ease-in-out infinite; } .wishlist-badge[data-v-4beda9f9] { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff4d4d 0%, #eb1515 100%); border-radius: 100px; font-size: 10px; font-weight: 700; color: white; box-shadow: 0 2px 6px rgba(var(--danger-500-rgb), 0.4), 0 0 0 2px var(--secondary-900); pointer-events: none; } .badge-enter-active[data-v-4beda9f9], .badge-leave-active[data-v-4beda9f9] { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .badge-enter-from[data-v-4beda9f9], .badge-leave-to[data-v-4beda9f9] { opacity: 0; transform: scale(0.5); } @keyframes pulse-4beda9f9 { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.8; } } /* ══════════════════════════════════════════════════════════════ 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-2bb418fd]: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-2bb418fd] { /* 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-2bb418fd] { /* 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-2bb418fd]: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-2bb418fd], .theme-mode-light[data-v-2bb418fd] { /* ═══════════════════════════════════════════════════════════════ 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-2bb418fd], .theme-mode-dark[data-v-2bb418fd] { /* ═══════════════════════════════════════════════════════════════ 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-2bb418fd]: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-2bb418fd]: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-2bb418fd] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-2bb418fd] { 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-2bb418fd]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-2bb418fd], input[disabled][data-v-2bb418fd] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-2bb418fd] { opacity: 0.9; } input[readonly][data-v-2bb418fd] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-2bb418fd] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-2bb418fd]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-2bb418fd]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-2bb418fd]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-2bb418fd] { 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-2bb418fd]:nth-child(odd), .list-card-desktop__wrapper[data-v-2bb418fd]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-2bb418fd]:nth-child(even), .list-card-desktop__wrapper[data-v-2bb418fd]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-2bb418fd]:nth-child(odd), .listCardDesktopWrapper[data-v-2bb418fd]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-2bb418fd]:nth-child(even), .listCardDesktopWrapper[data-v-2bb418fd]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-2bb418fd] { 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-2bb418fd] { cursor: pointer; } .card-layout--selectionnable[data-v-2bb418fd]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-2bb418fd] { cursor: auto; } .card-layout--drawer[data-v-2bb418fd] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-2bb418fd] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-2bb418fd] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-2bb418fd] { 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-2bb418fd] { 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-2bb418fd] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-2bb418fd]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-2bb418fd] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-2bb418fd] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-2bb418fd] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-2bb418fd] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-2bb418fd] { 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-2bb418fd] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-2bb418fd] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-2bb418fd] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-2bb418fd] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-2bb418fd] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-2bb418fd] { background-color: #eb1515; } .color-chip--dossiers[data-v-2bb418fd] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-2bb418fd] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-2bb418fd] { background-color: #00a79b; } .color-chip--virements[data-v-2bb418fd] { background-color: var(--secondary-400); } .color-chip--factures[data-v-2bb418fd] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-2bb418fd] { background-color: #eb1515; } .color-recherche-dossiers[data-v-2bb418fd] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-2bb418fd] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-2bb418fd] { background-color: #00a79b; } .color-recherche-virements[data-v-2bb418fd] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-2bb418fd] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-2bb418fd] { color: #00a79b; cursor: pointer; } .scrollable[data-v-2bb418fd] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-2bb418fd] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-2bb418fd] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-2bb418fd] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-2bb418fd] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-2bb418fd] { font-weight: 800; } .grid-cell--column[data-v-2bb418fd] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-2bb418fd] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-2bb418fd] { fill: #00a79b; } .grid-cell--disabled[data-v-2bb418fd] { color: #cccccc; } .grid-cell--disabled svg[data-v-2bb418fd] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-2bb418fd] { white-space: nowrap; } .grid-cell--danger svg[data-v-2bb418fd] { fill: #eb1515; } .grid-cell--span-1[data-v-2bb418fd] { grid-column: span 1; } .grid-cell--span-2[data-v-2bb418fd] { grid-column: span 2; } .grid-cell--span-3[data-v-2bb418fd] { grid-column: span 3; } .grid-cell--span-4[data-v-2bb418fd] { grid-column: span 4; } .grid-cell--span-5[data-v-2bb418fd] { grid-column: span 5; } .grid-cell--span-6[data-v-2bb418fd] { grid-column: span 6; } .grid-cell--span-7[data-v-2bb418fd] { grid-column: span 7; } .grid-cell--span-8[data-v-2bb418fd] { grid-column: span 8; } .grid-cell--span-9[data-v-2bb418fd] { grid-column: span 9; } .grid-cell--span-10[data-v-2bb418fd] { grid-column: span 10; } .grid-cell--span-12[data-v-2bb418fd] { grid-column: span 12; } .grid-cell--span-13[data-v-2bb418fd] { grid-column: span 13; } .grid-cell--span-14[data-v-2bb418fd] { grid-column: span 14; } .grid-cell--span-16[data-v-2bb418fd] { grid-column: span 16; } .grid-cell--span-18[data-v-2bb418fd] { grid-column: span 18; } .grid-cell--span-20[data-v-2bb418fd] { grid-column: span 20; } .grid-cell--span-32[data-v-2bb418fd] { grid-column: span 32; } .grid-cell--span-36[data-v-2bb418fd] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-2bb418fd] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-2bb418fd] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-2bb418fd] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-2bb418fd] { justify-content: center !important; } .elem--bold span[data-v-2bb418fd] { font-weight: 800; } .elem--column[data-v-2bb418fd] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-2bb418fd] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-2bb418fd] { fill: #00a79b; } .elem--clickable[data-v-2bb418fd]:hover { cursor: pointer; } .elem--disabled[data-v-2bb418fd] { color: #cccccc; } .elem--disabled svg[data-v-2bb418fd] { fill: #cccccc; } .elem--nowrap span[data-v-2bb418fd] { white-space: nowrap; } .elem--danger svg[data-v-2bb418fd] { fill: #eb1515; } .elem--span-1[data-v-2bb418fd] { grid-column: span 1; } .elem--span-2[data-v-2bb418fd] { grid-column: span 2; } .elem--span-3[data-v-2bb418fd] { grid-column: span 3; } .elem--span-4[data-v-2bb418fd] { grid-column: span 4; } .elem--span-5[data-v-2bb418fd] { grid-column: span 5; } .elem--span-6[data-v-2bb418fd] { grid-column: span 6; } .elem--span-7[data-v-2bb418fd] { grid-column: span 7; } .elem--span-8[data-v-2bb418fd] { grid-column: span 8; } .elem--span-9[data-v-2bb418fd] { grid-column: span 9; } .elem--span-10[data-v-2bb418fd] { grid-column: span 10; } .elem--span-12[data-v-2bb418fd] { grid-column: span 12; } .elem--span-13[data-v-2bb418fd] { grid-column: span 13; } .elem--span-14[data-v-2bb418fd] { grid-column: span 14; } .elem--span-16[data-v-2bb418fd] { grid-column: span 16; } .elem--span-18[data-v-2bb418fd] { grid-column: span 18; } .elem--span-20[data-v-2bb418fd] { grid-column: span 20; } .elem--span-32[data-v-2bb418fd] { grid-column: span 32; } .elem--span-36[data-v-2bb418fd] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-2bb418fd] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-2bb418fd] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-2bb418fd]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-2bb418fd] { display: flex; } /* flex-direction */ .flex-column[data-v-2bb418fd] { flex-direction: column; } .flex-row[data-v-2bb418fd] { flex-direction: row; } /* flex */ .flex-1[data-v-2bb418fd] { flex: 1 !important; } .flex-2[data-v-2bb418fd] { flex: 2; } .flex-3[data-v-2bb418fd] { flex: 3; } .flex-3[data-v-2bb418fd] { flex: 4; } .flex-5[data-v-2bb418fd] { flex: 5; } .flex-auto[data-v-2bb418fd] { flex: auto; } .flex-none[data-v-2bb418fd] { flex: none; } .flex-content[data-v-2bb418fd] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-2bb418fd] { flex-wrap: wrap; } .flex-nowrap[data-v-2bb418fd] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-2bb418fd] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-2bb418fd] { justify-content: flex-start; } .justify-content-end[data-v-2bb418fd] { justify-content: flex-end; } .justify-content-baseline[data-v-2bb418fd] { justify-content: baseline; } .justify-content-center[data-v-2bb418fd] { justify-content: center; } .justify-content-space-between[data-v-2bb418fd] { justify-content: space-between; } .justify-content-space-around[data-v-2bb418fd] { justify-content: space-around; } .justify-content-space-evenly[data-v-2bb418fd] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-2bb418fd] { align-items: flex-start; } .align-items-flex-end[data-v-2bb418fd] { align-items: flex-end; } .align-items-stretch[data-v-2bb418fd] { align-items: stretch; } .align-items-baseline[data-v-2bb418fd] { align-items: baseline; } .align-items-center[data-v-2bb418fd] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-2bb418fd] { align-content: flex-start; } .align-content-flex-end[data-v-2bb418fd] { align-content: flex-end; } .align-content-center[data-v-2bb418fd] { align-content: center; } .align-content-stretch[data-v-2bb418fd] { align-content: stretch; } .align-content-space-between[data-v-2bb418fd] { align-content: space-between; } .align-content-space-around[data-v-2bb418fd] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-2bb418fd] { align-self: flex-start; } .align-self-flex-end[data-v-2bb418fd] { align-self: flex-end; } .align-self-stretch[data-v-2bb418fd] { align-self: stretch; } .align-self-flex-baseline[data-v-2bb418fd] { align-self: baseline; } .align-self-center[data-v-2bb418fd] { align-self: center; } .align-self-auto[data-v-2bb418fd] { align-self: auto; } .flex-gap-1[data-v-2bb418fd] { gap: 4px; } .flex-gap-2[data-v-2bb418fd] { gap: 8px; } .flex-gap-3[data-v-2bb418fd] { gap: 12px; } .flex-gap-4[data-v-2bb418fd] { gap: 16px; } .flex-gap-5[data-v-2bb418fd] { gap: 20px; } .flex-gap-6[data-v-2bb418fd] { gap: 24px; } .flex-gap-7[data-v-2bb418fd] { gap: 28px; } .flex-gap-8[data-v-2bb418fd] { gap: 32px; } .flex-gap-10[data-v-2bb418fd] { gap: 40px; } .flex-gap-12[data-v-2bb418fd] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-2bb418fd] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-2bb418fd] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-2bb418fd] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-2bb418fd] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-2bb418fd] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-2bb418fd] { display: none !important; } } .col-none[data-v-2bb418fd] { display: none; } .col-auto[data-v-2bb418fd] { grid-column: auto; } .col-1[data-v-2bb418fd] { grid-column: span 1; } .col-2[data-v-2bb418fd] { grid-column: span 2; } .col-3[data-v-2bb418fd] { grid-column: span 3; } .col-4[data-v-2bb418fd] { grid-column: span 4; } .col-5[data-v-2bb418fd] { grid-column: span 5; } .col-6[data-v-2bb418fd] { grid-column: span 6; } .col-7[data-v-2bb418fd] { grid-column: span 7; } .col-8[data-v-2bb418fd] { grid-column: span 8; } .col-9[data-v-2bb418fd] { grid-column: span 9; } .col-10[data-v-2bb418fd] { grid-column: span 10; } .col-12[data-v-2bb418fd] { grid-column: span 12; } .col-13[data-v-2bb418fd] { grid-column: span 13; } .col-14[data-v-2bb418fd] { grid-column: span 14; } .col-15[data-v-2bb418fd] { grid-column: span 15; } .col-16[data-v-2bb418fd] { grid-column: span 16; } .col-18[data-v-2bb418fd] { grid-column: span 18; } .col-20[data-v-2bb418fd] { grid-column: span 20; } .col-22[data-v-2bb418fd] { grid-column: span 22; } .col-24[data-v-2bb418fd] { grid-column: span 24; } .col-26[data-v-2bb418fd] { grid-column: span 26; } .col-27[data-v-2bb418fd] { grid-column: span 27; } .col-28[data-v-2bb418fd] { grid-column: span 28; } .col-30[data-v-2bb418fd] { grid-column: span 30; } .col-36[data-v-2bb418fd] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-2bb418fd] { display: none; } .col-md-36[data-v-2bb418fd] { grid-column: span 36; } .col-md-28[data-v-2bb418fd] { grid-column: span 28; } .col-md-27[data-v-2bb418fd] { grid-column: span 27; } .col-md-24[data-v-2bb418fd] { grid-column: span 24; } .col-md-22[data-v-2bb418fd] { grid-column: span 22; } .col-md-20[data-v-2bb418fd] { grid-column: span 20; } .col-md-19[data-v-2bb418fd] { grid-column: span 19; } .col-md-18[data-v-2bb418fd] { grid-column: span 18; } .col-md-17[data-v-2bb418fd] { grid-column: span 17; } .col-md-16[data-v-2bb418fd] { grid-column: span 16; } .col-md-15[data-v-2bb418fd] { grid-column: span 15; } .col-md-14[data-v-2bb418fd] { grid-column: span 14; } .col-md-13[data-v-2bb418fd] { grid-column: span 13; } .col-md-12[data-v-2bb418fd] { grid-column: span 12; } .col-md-10[data-v-2bb418fd] { grid-column: span 10; } .col-md-9[data-v-2bb418fd] { grid-column: span 9; } .col-md-8[data-v-2bb418fd] { grid-column: span 8; } .col-md-6[data-v-2bb418fd] { grid-column: span 6; } .col-md-5[data-v-2bb418fd] { grid-column: span 5; } .col-md-4[data-v-2bb418fd] { grid-column: span 4; } .col-md-3[data-v-2bb418fd] { grid-column: span 3; } .col-md-2[data-v-2bb418fd] { grid-column: span 2; } .col-md-1[data-v-2bb418fd] { grid-column: span 1; } .col-md-auto[data-v-2bb418fd] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-2bb418fd] { display: none; } .col-sm-36[data-v-2bb418fd] { grid-column: span 36; } .col-sm-32[data-v-2bb418fd] { grid-column: span 32; } .col-sm-28[data-v-2bb418fd] { grid-column: span 28; } .col-sm-27[data-v-2bb418fd] { grid-column: span 27; } .col-sm-24[data-v-2bb418fd] { grid-column: span 24; } .col-sm-22[data-v-2bb418fd] { grid-column: span 22; } .col-sm-20[data-v-2bb418fd] { grid-column: span 20; } .col-sm-18[data-v-2bb418fd] { grid-column: span 18; } .col-sm-16[data-v-2bb418fd] { grid-column: span 16; } .col-sm-15[data-v-2bb418fd] { grid-column: span 15; } .col-sm-14[data-v-2bb418fd] { grid-column: span 14; } .col-sm-13[data-v-2bb418fd] { grid-column: span 12; } .col-sm-12[data-v-2bb418fd] { grid-column: span 12; } .col-sm-10[data-v-2bb418fd] { grid-column: span 10; } .col-sm-9[data-v-2bb418fd] { grid-column: span 8; } .col-sm-8[data-v-2bb418fd] { grid-column: span 8; } .col-sm-6[data-v-2bb418fd] { grid-column: span 6; } .col-sm-4[data-v-2bb418fd] { grid-column: span 4; } .col-sm-auto[data-v-2bb418fd] { grid-column: auto; } } .fade-enter-active[data-v-2bb418fd] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-2bb418fd] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-2bb418fd], .fade-leave-to[data-v-2bb418fd] { opacity: 0; } /* ========================================================== 👤 USER HEADER — Interactive + Motion One ========================================================== */ .user-header[data-v-2bb418fd] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; user-select: none; transition: background 0.3s ease; } .user-header__avatar[data-v-2bb418fd] { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; } .user-header__avatar-img[data-v-2bb418fd] { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .user-header__avatar-fallback[data-v-2bb418fd] { background: var(--primary-600); width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .user-header__info[data-v-2bb418fd] { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1; min-width: 0; } .user-header__email[data-v-2bb418fd] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-header__badge[data-v-2bb418fd] { align-self: flex-start; font-weight: 600; text-transform: uppercase; letter-spacing: 0.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-9b9d8045]: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-9b9d8045] { /* 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-9b9d8045] { /* 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-9b9d8045]: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-9b9d8045], .theme-mode-light[data-v-9b9d8045] { /* ═══════════════════════════════════════════════════════════════ 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-9b9d8045], .theme-mode-dark[data-v-9b9d8045] { /* ═══════════════════════════════════════════════════════════════ 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-9b9d8045]: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-9b9d8045]: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-9b9d8045] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-9b9d8045] { 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-9b9d8045]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-9b9d8045], input[disabled][data-v-9b9d8045] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-9b9d8045] { opacity: 0.9; } input[readonly][data-v-9b9d8045] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-9b9d8045] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-9b9d8045]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-9b9d8045]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-9b9d8045]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-9b9d8045] { 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-9b9d8045]:nth-child(odd), .list-card-desktop__wrapper[data-v-9b9d8045]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-9b9d8045]:nth-child(even), .list-card-desktop__wrapper[data-v-9b9d8045]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-9b9d8045]:nth-child(odd), .listCardDesktopWrapper[data-v-9b9d8045]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-9b9d8045]:nth-child(even), .listCardDesktopWrapper[data-v-9b9d8045]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-9b9d8045] { 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-9b9d8045] { cursor: pointer; } .card-layout--selectionnable[data-v-9b9d8045]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-9b9d8045] { cursor: auto; } .card-layout--drawer[data-v-9b9d8045] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-9b9d8045] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-9b9d8045] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-9b9d8045] { 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-9b9d8045] { 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-9b9d8045] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-9b9d8045]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-9b9d8045] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-9b9d8045] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-9b9d8045] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-9b9d8045] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-9b9d8045] { 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-9b9d8045] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-9b9d8045] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-9b9d8045] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-9b9d8045] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-9b9d8045] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-9b9d8045] { background-color: #eb1515; } .color-chip--dossiers[data-v-9b9d8045] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-9b9d8045] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-9b9d8045] { background-color: #00a79b; } .color-chip--virements[data-v-9b9d8045] { background-color: var(--secondary-400); } .color-chip--factures[data-v-9b9d8045] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-9b9d8045] { background-color: #eb1515; } .color-recherche-dossiers[data-v-9b9d8045] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-9b9d8045] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-9b9d8045] { background-color: #00a79b; } .color-recherche-virements[data-v-9b9d8045] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-9b9d8045] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-9b9d8045] { color: #00a79b; cursor: pointer; } .scrollable[data-v-9b9d8045] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-9b9d8045] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-9b9d8045] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-9b9d8045] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-9b9d8045] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-9b9d8045] { font-weight: 800; } .grid-cell--column[data-v-9b9d8045] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-9b9d8045] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-9b9d8045] { fill: #00a79b; } .grid-cell--disabled[data-v-9b9d8045] { color: #cccccc; } .grid-cell--disabled svg[data-v-9b9d8045] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-9b9d8045] { white-space: nowrap; } .grid-cell--danger svg[data-v-9b9d8045] { fill: #eb1515; } .grid-cell--span-1[data-v-9b9d8045] { grid-column: span 1; } .grid-cell--span-2[data-v-9b9d8045] { grid-column: span 2; } .grid-cell--span-3[data-v-9b9d8045] { grid-column: span 3; } .grid-cell--span-4[data-v-9b9d8045] { grid-column: span 4; } .grid-cell--span-5[data-v-9b9d8045] { grid-column: span 5; } .grid-cell--span-6[data-v-9b9d8045] { grid-column: span 6; } .grid-cell--span-7[data-v-9b9d8045] { grid-column: span 7; } .grid-cell--span-8[data-v-9b9d8045] { grid-column: span 8; } .grid-cell--span-9[data-v-9b9d8045] { grid-column: span 9; } .grid-cell--span-10[data-v-9b9d8045] { grid-column: span 10; } .grid-cell--span-12[data-v-9b9d8045] { grid-column: span 12; } .grid-cell--span-13[data-v-9b9d8045] { grid-column: span 13; } .grid-cell--span-14[data-v-9b9d8045] { grid-column: span 14; } .grid-cell--span-16[data-v-9b9d8045] { grid-column: span 16; } .grid-cell--span-18[data-v-9b9d8045] { grid-column: span 18; } .grid-cell--span-20[data-v-9b9d8045] { grid-column: span 20; } .grid-cell--span-32[data-v-9b9d8045] { grid-column: span 32; } .grid-cell--span-36[data-v-9b9d8045] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-9b9d8045] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-9b9d8045] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-9b9d8045] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-9b9d8045] { justify-content: center !important; } .elem--bold span[data-v-9b9d8045] { font-weight: 800; } .elem--column[data-v-9b9d8045] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-9b9d8045] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-9b9d8045] { fill: #00a79b; } .elem--clickable[data-v-9b9d8045]:hover { cursor: pointer; } .elem--disabled[data-v-9b9d8045] { color: #cccccc; } .elem--disabled svg[data-v-9b9d8045] { fill: #cccccc; } .elem--nowrap span[data-v-9b9d8045] { white-space: nowrap; } .elem--danger svg[data-v-9b9d8045] { fill: #eb1515; } .elem--span-1[data-v-9b9d8045] { grid-column: span 1; } .elem--span-2[data-v-9b9d8045] { grid-column: span 2; } .elem--span-3[data-v-9b9d8045] { grid-column: span 3; } .elem--span-4[data-v-9b9d8045] { grid-column: span 4; } .elem--span-5[data-v-9b9d8045] { grid-column: span 5; } .elem--span-6[data-v-9b9d8045] { grid-column: span 6; } .elem--span-7[data-v-9b9d8045] { grid-column: span 7; } .elem--span-8[data-v-9b9d8045] { grid-column: span 8; } .elem--span-9[data-v-9b9d8045] { grid-column: span 9; } .elem--span-10[data-v-9b9d8045] { grid-column: span 10; } .elem--span-12[data-v-9b9d8045] { grid-column: span 12; } .elem--span-13[data-v-9b9d8045] { grid-column: span 13; } .elem--span-14[data-v-9b9d8045] { grid-column: span 14; } .elem--span-16[data-v-9b9d8045] { grid-column: span 16; } .elem--span-18[data-v-9b9d8045] { grid-column: span 18; } .elem--span-20[data-v-9b9d8045] { grid-column: span 20; } .elem--span-32[data-v-9b9d8045] { grid-column: span 32; } .elem--span-36[data-v-9b9d8045] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-9b9d8045] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-9b9d8045] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-9b9d8045]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-9b9d8045] { display: flex; } /* flex-direction */ .flex-column[data-v-9b9d8045] { flex-direction: column; } .flex-row[data-v-9b9d8045] { flex-direction: row; } /* flex */ .flex-1[data-v-9b9d8045] { flex: 1 !important; } .flex-2[data-v-9b9d8045] { flex: 2; } .flex-3[data-v-9b9d8045] { flex: 3; } .flex-3[data-v-9b9d8045] { flex: 4; } .flex-5[data-v-9b9d8045] { flex: 5; } .flex-auto[data-v-9b9d8045] { flex: auto; } .flex-none[data-v-9b9d8045] { flex: none; } .flex-content[data-v-9b9d8045] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-9b9d8045] { flex-wrap: wrap; } .flex-nowrap[data-v-9b9d8045] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-9b9d8045] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-9b9d8045] { justify-content: flex-start; } .justify-content-end[data-v-9b9d8045] { justify-content: flex-end; } .justify-content-baseline[data-v-9b9d8045] { justify-content: baseline; } .justify-content-center[data-v-9b9d8045] { justify-content: center; } .justify-content-space-between[data-v-9b9d8045] { justify-content: space-between; } .justify-content-space-around[data-v-9b9d8045] { justify-content: space-around; } .justify-content-space-evenly[data-v-9b9d8045] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-9b9d8045] { align-items: flex-start; } .align-items-flex-end[data-v-9b9d8045] { align-items: flex-end; } .align-items-stretch[data-v-9b9d8045] { align-items: stretch; } .align-items-baseline[data-v-9b9d8045] { align-items: baseline; } .align-items-center[data-v-9b9d8045] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-9b9d8045] { align-content: flex-start; } .align-content-flex-end[data-v-9b9d8045] { align-content: flex-end; } .align-content-center[data-v-9b9d8045] { align-content: center; } .align-content-stretch[data-v-9b9d8045] { align-content: stretch; } .align-content-space-between[data-v-9b9d8045] { align-content: space-between; } .align-content-space-around[data-v-9b9d8045] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-9b9d8045] { align-self: flex-start; } .align-self-flex-end[data-v-9b9d8045] { align-self: flex-end; } .align-self-stretch[data-v-9b9d8045] { align-self: stretch; } .align-self-flex-baseline[data-v-9b9d8045] { align-self: baseline; } .align-self-center[data-v-9b9d8045] { align-self: center; } .align-self-auto[data-v-9b9d8045] { align-self: auto; } .flex-gap-1[data-v-9b9d8045] { gap: 4px; } .flex-gap-2[data-v-9b9d8045] { gap: 8px; } .flex-gap-3[data-v-9b9d8045] { gap: 12px; } .flex-gap-4[data-v-9b9d8045] { gap: 16px; } .flex-gap-5[data-v-9b9d8045] { gap: 20px; } .flex-gap-6[data-v-9b9d8045] { gap: 24px; } .flex-gap-7[data-v-9b9d8045] { gap: 28px; } .flex-gap-8[data-v-9b9d8045] { gap: 32px; } .flex-gap-10[data-v-9b9d8045] { gap: 40px; } .flex-gap-12[data-v-9b9d8045] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-9b9d8045] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-9b9d8045] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-9b9d8045] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-9b9d8045] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-9b9d8045] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-9b9d8045] { display: none !important; } } .col-none[data-v-9b9d8045] { display: none; } .col-auto[data-v-9b9d8045] { grid-column: auto; } .col-1[data-v-9b9d8045] { grid-column: span 1; } .col-2[data-v-9b9d8045] { grid-column: span 2; } .col-3[data-v-9b9d8045] { grid-column: span 3; } .col-4[data-v-9b9d8045] { grid-column: span 4; } .col-5[data-v-9b9d8045] { grid-column: span 5; } .col-6[data-v-9b9d8045] { grid-column: span 6; } .col-7[data-v-9b9d8045] { grid-column: span 7; } .col-8[data-v-9b9d8045] { grid-column: span 8; } .col-9[data-v-9b9d8045] { grid-column: span 9; } .col-10[data-v-9b9d8045] { grid-column: span 10; } .col-12[data-v-9b9d8045] { grid-column: span 12; } .col-13[data-v-9b9d8045] { grid-column: span 13; } .col-14[data-v-9b9d8045] { grid-column: span 14; } .col-15[data-v-9b9d8045] { grid-column: span 15; } .col-16[data-v-9b9d8045] { grid-column: span 16; } .col-18[data-v-9b9d8045] { grid-column: span 18; } .col-20[data-v-9b9d8045] { grid-column: span 20; } .col-22[data-v-9b9d8045] { grid-column: span 22; } .col-24[data-v-9b9d8045] { grid-column: span 24; } .col-26[data-v-9b9d8045] { grid-column: span 26; } .col-27[data-v-9b9d8045] { grid-column: span 27; } .col-28[data-v-9b9d8045] { grid-column: span 28; } .col-30[data-v-9b9d8045] { grid-column: span 30; } .col-36[data-v-9b9d8045] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-9b9d8045] { display: none; } .col-md-36[data-v-9b9d8045] { grid-column: span 36; } .col-md-28[data-v-9b9d8045] { grid-column: span 28; } .col-md-27[data-v-9b9d8045] { grid-column: span 27; } .col-md-24[data-v-9b9d8045] { grid-column: span 24; } .col-md-22[data-v-9b9d8045] { grid-column: span 22; } .col-md-20[data-v-9b9d8045] { grid-column: span 20; } .col-md-19[data-v-9b9d8045] { grid-column: span 19; } .col-md-18[data-v-9b9d8045] { grid-column: span 18; } .col-md-17[data-v-9b9d8045] { grid-column: span 17; } .col-md-16[data-v-9b9d8045] { grid-column: span 16; } .col-md-15[data-v-9b9d8045] { grid-column: span 15; } .col-md-14[data-v-9b9d8045] { grid-column: span 14; } .col-md-13[data-v-9b9d8045] { grid-column: span 13; } .col-md-12[data-v-9b9d8045] { grid-column: span 12; } .col-md-10[data-v-9b9d8045] { grid-column: span 10; } .col-md-9[data-v-9b9d8045] { grid-column: span 9; } .col-md-8[data-v-9b9d8045] { grid-column: span 8; } .col-md-6[data-v-9b9d8045] { grid-column: span 6; } .col-md-5[data-v-9b9d8045] { grid-column: span 5; } .col-md-4[data-v-9b9d8045] { grid-column: span 4; } .col-md-3[data-v-9b9d8045] { grid-column: span 3; } .col-md-2[data-v-9b9d8045] { grid-column: span 2; } .col-md-1[data-v-9b9d8045] { grid-column: span 1; } .col-md-auto[data-v-9b9d8045] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-9b9d8045] { display: none; } .col-sm-36[data-v-9b9d8045] { grid-column: span 36; } .col-sm-32[data-v-9b9d8045] { grid-column: span 32; } .col-sm-28[data-v-9b9d8045] { grid-column: span 28; } .col-sm-27[data-v-9b9d8045] { grid-column: span 27; } .col-sm-24[data-v-9b9d8045] { grid-column: span 24; } .col-sm-22[data-v-9b9d8045] { grid-column: span 22; } .col-sm-20[data-v-9b9d8045] { grid-column: span 20; } .col-sm-18[data-v-9b9d8045] { grid-column: span 18; } .col-sm-16[data-v-9b9d8045] { grid-column: span 16; } .col-sm-15[data-v-9b9d8045] { grid-column: span 15; } .col-sm-14[data-v-9b9d8045] { grid-column: span 14; } .col-sm-13[data-v-9b9d8045] { grid-column: span 12; } .col-sm-12[data-v-9b9d8045] { grid-column: span 12; } .col-sm-10[data-v-9b9d8045] { grid-column: span 10; } .col-sm-9[data-v-9b9d8045] { grid-column: span 8; } .col-sm-8[data-v-9b9d8045] { grid-column: span 8; } .col-sm-6[data-v-9b9d8045] { grid-column: span 6; } .col-sm-4[data-v-9b9d8045] { grid-column: span 4; } .col-sm-auto[data-v-9b9d8045] { grid-column: auto; } } .fade-enter-active[data-v-9b9d8045] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-9b9d8045] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-9b9d8045], .fade-leave-to[data-v-9b9d8045] { opacity: 0; } .user-trigger[data-v-9b9d8045] { position: relative; cursor: pointer; padding: 0; } .user-trigger__avatar[data-v-9b9d8045] { width: 36px; height: 36px; border-radius: 10px; background: transparent; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; color: #e2e7ef; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); position: relative; z-index: 1; } .user-trigger__avatar[data-v-9b9d8045]:hover { background: rgba(255, 255, 255, 0.06); } .user-trigger__badge[data-v-9b9d8045] { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--primary-600); color: #f8f9fb; border-radius: 100px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--secondary-900); z-index: 2; } .user-trigger__glow[data-v-9b9d8045] { display: none; } .user-trigger:active .user-trigger__avatar[data-v-9b9d8045] { opacity: 0.8; } .user-menu[data-v-9b9d8045] { display: flex; flex-direction: column; gap: 8px; } .user-menu__divider[data-v-9b9d8045] { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 4px 0; } .user-menu__divider--subtle[data-v-9b9d8045] { background: rgba(255, 255, 255, 0.04); } .user-menu__nav[data-v-9b9d8045] { display: flex; flex-direction: column; gap: 2px; } .user-menu__link[data-v-9b9d8045] { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: transparent; color: #cdd5e0; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); text-align: left; } .user-menu__link[data-v-9b9d8045]:hover { background: rgba(255, 255, 255, 0.08); color: #edf1f5; } .user-menu__link:hover .user-menu__icon[data-v-9b9d8045] { color: var(--primary-400); } .user-menu__link--accent[data-v-9b9d8045] { color: var(--primary-400); } .user-menu__link--accent .user-menu__icon[data-v-9b9d8045] { color: var(--primary-400); } .user-menu__link--accent[data-v-9b9d8045]:hover { background: rgba(var(--primary-500-rgb), 0.15); color: var(--primary-300); } .user-menu__link--danger[data-v-9b9d8045] { color: #ff6464; } .user-menu__link--danger .user-menu__icon[data-v-9b9d8045] { color: #ff6464; } .user-menu__link--danger[data-v-9b9d8045]:hover { background: rgba(255, 77, 77, 0.15); color: #ff9d9d; } .user-menu__link--danger:hover .user-menu__icon[data-v-9b9d8045] { color: #ff9d9d; } .user-menu__icon[data-v-9b9d8045] { display: flex; align-items: center; justify-content: center; color: #94a2b8; transition: color 0.2s; flex-shrink: 0; } .user-menu__badge[data-v-9b9d8045] { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; background: rgba(var(--primary-500-rgb), 0.15); color: var(--primary-400); border-radius: 100px; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .badge-enter-active[data-v-9b9d8045] { animation: badgePop-9b9d8045 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .badge-leave-active[data-v-9b9d8045] { animation: badgePop-9b9d8045 0.3s cubic-bezier(0.16, 1, 0.3, 1) reverse; } @keyframes badgePop-9b9d8045 { 0% { transform: scale(0); } 100% { 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-d675f451]: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-d675f451] { /* 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-d675f451] { /* 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-d675f451]: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-d675f451], .theme-mode-light[data-v-d675f451] { /* ═══════════════════════════════════════════════════════════════ 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-d675f451], .theme-mode-dark[data-v-d675f451] { /* ═══════════════════════════════════════════════════════════════ 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-d675f451]: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-d675f451]: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-d675f451] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-d675f451] { 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-d675f451]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-d675f451], input[disabled][data-v-d675f451] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-d675f451] { opacity: 0.9; } input[readonly][data-v-d675f451] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-d675f451] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-d675f451]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-d675f451]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-d675f451]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-d675f451] { 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-d675f451]:nth-child(odd), .list-card-desktop__wrapper[data-v-d675f451]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-d675f451]:nth-child(even), .list-card-desktop__wrapper[data-v-d675f451]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-d675f451]:nth-child(odd), .listCardDesktopWrapper[data-v-d675f451]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-d675f451]:nth-child(even), .listCardDesktopWrapper[data-v-d675f451]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-d675f451] { 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-d675f451] { cursor: pointer; } .card-layout--selectionnable[data-v-d675f451]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-d675f451] { cursor: auto; } .card-layout--drawer[data-v-d675f451] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-d675f451] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-d675f451] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-d675f451] { 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-d675f451] { 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-d675f451] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-d675f451]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-d675f451] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-d675f451] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-d675f451] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-d675f451] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-d675f451] { 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-d675f451] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-d675f451] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-d675f451] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-d675f451] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-d675f451] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-d675f451] { background-color: #eb1515; } .color-chip--dossiers[data-v-d675f451] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-d675f451] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-d675f451] { background-color: #00a79b; } .color-chip--virements[data-v-d675f451] { background-color: var(--secondary-400); } .color-chip--factures[data-v-d675f451] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-d675f451] { background-color: #eb1515; } .color-recherche-dossiers[data-v-d675f451] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-d675f451] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-d675f451] { background-color: #00a79b; } .color-recherche-virements[data-v-d675f451] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-d675f451] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-d675f451] { color: #00a79b; cursor: pointer; } .scrollable[data-v-d675f451] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-d675f451] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-d675f451] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-d675f451] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-d675f451] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-d675f451] { font-weight: 800; } .grid-cell--column[data-v-d675f451] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-d675f451] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-d675f451] { fill: #00a79b; } .grid-cell--disabled[data-v-d675f451] { color: #cccccc; } .grid-cell--disabled svg[data-v-d675f451] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-d675f451] { white-space: nowrap; } .grid-cell--danger svg[data-v-d675f451] { fill: #eb1515; } .grid-cell--span-1[data-v-d675f451] { grid-column: span 1; } .grid-cell--span-2[data-v-d675f451] { grid-column: span 2; } .grid-cell--span-3[data-v-d675f451] { grid-column: span 3; } .grid-cell--span-4[data-v-d675f451] { grid-column: span 4; } .grid-cell--span-5[data-v-d675f451] { grid-column: span 5; } .grid-cell--span-6[data-v-d675f451] { grid-column: span 6; } .grid-cell--span-7[data-v-d675f451] { grid-column: span 7; } .grid-cell--span-8[data-v-d675f451] { grid-column: span 8; } .grid-cell--span-9[data-v-d675f451] { grid-column: span 9; } .grid-cell--span-10[data-v-d675f451] { grid-column: span 10; } .grid-cell--span-12[data-v-d675f451] { grid-column: span 12; } .grid-cell--span-13[data-v-d675f451] { grid-column: span 13; } .grid-cell--span-14[data-v-d675f451] { grid-column: span 14; } .grid-cell--span-16[data-v-d675f451] { grid-column: span 16; } .grid-cell--span-18[data-v-d675f451] { grid-column: span 18; } .grid-cell--span-20[data-v-d675f451] { grid-column: span 20; } .grid-cell--span-32[data-v-d675f451] { grid-column: span 32; } .grid-cell--span-36[data-v-d675f451] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-d675f451] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-d675f451] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-d675f451] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-d675f451] { justify-content: center !important; } .elem--bold span[data-v-d675f451] { font-weight: 800; } .elem--column[data-v-d675f451] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-d675f451] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-d675f451] { fill: #00a79b; } .elem--clickable[data-v-d675f451]:hover { cursor: pointer; } .elem--disabled[data-v-d675f451] { color: #cccccc; } .elem--disabled svg[data-v-d675f451] { fill: #cccccc; } .elem--nowrap span[data-v-d675f451] { white-space: nowrap; } .elem--danger svg[data-v-d675f451] { fill: #eb1515; } .elem--span-1[data-v-d675f451] { grid-column: span 1; } .elem--span-2[data-v-d675f451] { grid-column: span 2; } .elem--span-3[data-v-d675f451] { grid-column: span 3; } .elem--span-4[data-v-d675f451] { grid-column: span 4; } .elem--span-5[data-v-d675f451] { grid-column: span 5; } .elem--span-6[data-v-d675f451] { grid-column: span 6; } .elem--span-7[data-v-d675f451] { grid-column: span 7; } .elem--span-8[data-v-d675f451] { grid-column: span 8; } .elem--span-9[data-v-d675f451] { grid-column: span 9; } .elem--span-10[data-v-d675f451] { grid-column: span 10; } .elem--span-12[data-v-d675f451] { grid-column: span 12; } .elem--span-13[data-v-d675f451] { grid-column: span 13; } .elem--span-14[data-v-d675f451] { grid-column: span 14; } .elem--span-16[data-v-d675f451] { grid-column: span 16; } .elem--span-18[data-v-d675f451] { grid-column: span 18; } .elem--span-20[data-v-d675f451] { grid-column: span 20; } .elem--span-32[data-v-d675f451] { grid-column: span 32; } .elem--span-36[data-v-d675f451] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-d675f451] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-d675f451] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-d675f451]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-d675f451] { display: flex; } /* flex-direction */ .flex-column[data-v-d675f451] { flex-direction: column; } .flex-row[data-v-d675f451] { flex-direction: row; } /* flex */ .flex-1[data-v-d675f451] { flex: 1 !important; } .flex-2[data-v-d675f451] { flex: 2; } .flex-3[data-v-d675f451] { flex: 3; } .flex-3[data-v-d675f451] { flex: 4; } .flex-5[data-v-d675f451] { flex: 5; } .flex-auto[data-v-d675f451] { flex: auto; } .flex-none[data-v-d675f451] { flex: none; } .flex-content[data-v-d675f451] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-d675f451] { flex-wrap: wrap; } .flex-nowrap[data-v-d675f451] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-d675f451] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-d675f451] { justify-content: flex-start; } .justify-content-end[data-v-d675f451] { justify-content: flex-end; } .justify-content-baseline[data-v-d675f451] { justify-content: baseline; } .justify-content-center[data-v-d675f451] { justify-content: center; } .justify-content-space-between[data-v-d675f451] { justify-content: space-between; } .justify-content-space-around[data-v-d675f451] { justify-content: space-around; } .justify-content-space-evenly[data-v-d675f451] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-d675f451] { align-items: flex-start; } .align-items-flex-end[data-v-d675f451] { align-items: flex-end; } .align-items-stretch[data-v-d675f451] { align-items: stretch; } .align-items-baseline[data-v-d675f451] { align-items: baseline; } .align-items-center[data-v-d675f451] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-d675f451] { align-content: flex-start; } .align-content-flex-end[data-v-d675f451] { align-content: flex-end; } .align-content-center[data-v-d675f451] { align-content: center; } .align-content-stretch[data-v-d675f451] { align-content: stretch; } .align-content-space-between[data-v-d675f451] { align-content: space-between; } .align-content-space-around[data-v-d675f451] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-d675f451] { align-self: flex-start; } .align-self-flex-end[data-v-d675f451] { align-self: flex-end; } .align-self-stretch[data-v-d675f451] { align-self: stretch; } .align-self-flex-baseline[data-v-d675f451] { align-self: baseline; } .align-self-center[data-v-d675f451] { align-self: center; } .align-self-auto[data-v-d675f451] { align-self: auto; } .flex-gap-1[data-v-d675f451] { gap: 4px; } .flex-gap-2[data-v-d675f451] { gap: 8px; } .flex-gap-3[data-v-d675f451] { gap: 12px; } .flex-gap-4[data-v-d675f451] { gap: 16px; } .flex-gap-5[data-v-d675f451] { gap: 20px; } .flex-gap-6[data-v-d675f451] { gap: 24px; } .flex-gap-7[data-v-d675f451] { gap: 28px; } .flex-gap-8[data-v-d675f451] { gap: 32px; } .flex-gap-10[data-v-d675f451] { gap: 40px; } .flex-gap-12[data-v-d675f451] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-d675f451] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-d675f451] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-d675f451] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-d675f451] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-d675f451] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-d675f451] { display: none !important; } } .col-none[data-v-d675f451] { display: none; } .col-auto[data-v-d675f451] { grid-column: auto; } .col-1[data-v-d675f451] { grid-column: span 1; } .col-2[data-v-d675f451] { grid-column: span 2; } .col-3[data-v-d675f451] { grid-column: span 3; } .col-4[data-v-d675f451] { grid-column: span 4; } .col-5[data-v-d675f451] { grid-column: span 5; } .col-6[data-v-d675f451] { grid-column: span 6; } .col-7[data-v-d675f451] { grid-column: span 7; } .col-8[data-v-d675f451] { grid-column: span 8; } .col-9[data-v-d675f451] { grid-column: span 9; } .col-10[data-v-d675f451] { grid-column: span 10; } .col-12[data-v-d675f451] { grid-column: span 12; } .col-13[data-v-d675f451] { grid-column: span 13; } .col-14[data-v-d675f451] { grid-column: span 14; } .col-15[data-v-d675f451] { grid-column: span 15; } .col-16[data-v-d675f451] { grid-column: span 16; } .col-18[data-v-d675f451] { grid-column: span 18; } .col-20[data-v-d675f451] { grid-column: span 20; } .col-22[data-v-d675f451] { grid-column: span 22; } .col-24[data-v-d675f451] { grid-column: span 24; } .col-26[data-v-d675f451] { grid-column: span 26; } .col-27[data-v-d675f451] { grid-column: span 27; } .col-28[data-v-d675f451] { grid-column: span 28; } .col-30[data-v-d675f451] { grid-column: span 30; } .col-36[data-v-d675f451] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-d675f451] { display: none; } .col-md-36[data-v-d675f451] { grid-column: span 36; } .col-md-28[data-v-d675f451] { grid-column: span 28; } .col-md-27[data-v-d675f451] { grid-column: span 27; } .col-md-24[data-v-d675f451] { grid-column: span 24; } .col-md-22[data-v-d675f451] { grid-column: span 22; } .col-md-20[data-v-d675f451] { grid-column: span 20; } .col-md-19[data-v-d675f451] { grid-column: span 19; } .col-md-18[data-v-d675f451] { grid-column: span 18; } .col-md-17[data-v-d675f451] { grid-column: span 17; } .col-md-16[data-v-d675f451] { grid-column: span 16; } .col-md-15[data-v-d675f451] { grid-column: span 15; } .col-md-14[data-v-d675f451] { grid-column: span 14; } .col-md-13[data-v-d675f451] { grid-column: span 13; } .col-md-12[data-v-d675f451] { grid-column: span 12; } .col-md-10[data-v-d675f451] { grid-column: span 10; } .col-md-9[data-v-d675f451] { grid-column: span 9; } .col-md-8[data-v-d675f451] { grid-column: span 8; } .col-md-6[data-v-d675f451] { grid-column: span 6; } .col-md-5[data-v-d675f451] { grid-column: span 5; } .col-md-4[data-v-d675f451] { grid-column: span 4; } .col-md-3[data-v-d675f451] { grid-column: span 3; } .col-md-2[data-v-d675f451] { grid-column: span 2; } .col-md-1[data-v-d675f451] { grid-column: span 1; } .col-md-auto[data-v-d675f451] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-d675f451] { display: none; } .col-sm-36[data-v-d675f451] { grid-column: span 36; } .col-sm-32[data-v-d675f451] { grid-column: span 32; } .col-sm-28[data-v-d675f451] { grid-column: span 28; } .col-sm-27[data-v-d675f451] { grid-column: span 27; } .col-sm-24[data-v-d675f451] { grid-column: span 24; } .col-sm-22[data-v-d675f451] { grid-column: span 22; } .col-sm-20[data-v-d675f451] { grid-column: span 20; } .col-sm-18[data-v-d675f451] { grid-column: span 18; } .col-sm-16[data-v-d675f451] { grid-column: span 16; } .col-sm-15[data-v-d675f451] { grid-column: span 15; } .col-sm-14[data-v-d675f451] { grid-column: span 14; } .col-sm-13[data-v-d675f451] { grid-column: span 12; } .col-sm-12[data-v-d675f451] { grid-column: span 12; } .col-sm-10[data-v-d675f451] { grid-column: span 10; } .col-sm-9[data-v-d675f451] { grid-column: span 8; } .col-sm-8[data-v-d675f451] { grid-column: span 8; } .col-sm-6[data-v-d675f451] { grid-column: span 6; } .col-sm-4[data-v-d675f451] { grid-column: span 4; } .col-sm-auto[data-v-d675f451] { grid-column: auto; } } .fade-enter-active[data-v-d675f451] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-d675f451] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-d675f451], .fade-leave-to[data-v-d675f451] { opacity: 0; } .header-actions[data-v-d675f451] { margin-left: 8px; } .header-actions__guest[data-v-d675f451] { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; backdrop-filter: blur(12px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .header-actions__guest[data-v-d675f451]:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } .header-actions__guest-indicator[data-v-d675f451] { display: flex; align-items: center; gap: 6px; padding-right: 6px; border-right: 1px solid rgba(255, 255, 255, 0.1); } .header-actions__guest-indicator span[data-v-d675f451] { font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 11px; font-weight: 600; color: #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-09e682aa]: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-09e682aa] { /* 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-09e682aa] { /* 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-09e682aa]: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-09e682aa], .theme-mode-light[data-v-09e682aa] { /* ═══════════════════════════════════════════════════════════════ 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-09e682aa], .theme-mode-dark[data-v-09e682aa] { /* ═══════════════════════════════════════════════════════════════ 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-09e682aa]: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-09e682aa]: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-09e682aa] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-09e682aa] { 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-09e682aa]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-09e682aa], input[disabled][data-v-09e682aa] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-09e682aa] { opacity: 0.9; } input[readonly][data-v-09e682aa] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-09e682aa] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-09e682aa]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-09e682aa]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-09e682aa]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-09e682aa] { 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-09e682aa]:nth-child(odd), .list-card-desktop__wrapper[data-v-09e682aa]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-09e682aa]:nth-child(even), .list-card-desktop__wrapper[data-v-09e682aa]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-09e682aa]:nth-child(odd), .listCardDesktopWrapper[data-v-09e682aa]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-09e682aa]:nth-child(even), .listCardDesktopWrapper[data-v-09e682aa]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-09e682aa] { 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-09e682aa] { cursor: pointer; } .card-layout--selectionnable[data-v-09e682aa]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-09e682aa] { cursor: auto; } .card-layout--drawer[data-v-09e682aa] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-09e682aa] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-09e682aa] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-09e682aa] { 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-09e682aa] { 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-09e682aa] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-09e682aa]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-09e682aa] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-09e682aa] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-09e682aa] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-09e682aa] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-09e682aa] { 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-09e682aa] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-09e682aa] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-09e682aa] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-09e682aa] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-09e682aa] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-09e682aa] { background-color: #eb1515; } .color-chip--dossiers[data-v-09e682aa] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-09e682aa] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-09e682aa] { background-color: #00a79b; } .color-chip--virements[data-v-09e682aa] { background-color: var(--secondary-400); } .color-chip--factures[data-v-09e682aa] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-09e682aa] { background-color: #eb1515; } .color-recherche-dossiers[data-v-09e682aa] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-09e682aa] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-09e682aa] { background-color: #00a79b; } .color-recherche-virements[data-v-09e682aa] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-09e682aa] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-09e682aa] { color: #00a79b; cursor: pointer; } .scrollable[data-v-09e682aa] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-09e682aa] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-09e682aa] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-09e682aa] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-09e682aa] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-09e682aa] { font-weight: 800; } .grid-cell--column[data-v-09e682aa] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-09e682aa] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-09e682aa] { fill: #00a79b; } .grid-cell--disabled[data-v-09e682aa] { color: #cccccc; } .grid-cell--disabled svg[data-v-09e682aa] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-09e682aa] { white-space: nowrap; } .grid-cell--danger svg[data-v-09e682aa] { fill: #eb1515; } .grid-cell--span-1[data-v-09e682aa] { grid-column: span 1; } .grid-cell--span-2[data-v-09e682aa] { grid-column: span 2; } .grid-cell--span-3[data-v-09e682aa] { grid-column: span 3; } .grid-cell--span-4[data-v-09e682aa] { grid-column: span 4; } .grid-cell--span-5[data-v-09e682aa] { grid-column: span 5; } .grid-cell--span-6[data-v-09e682aa] { grid-column: span 6; } .grid-cell--span-7[data-v-09e682aa] { grid-column: span 7; } .grid-cell--span-8[data-v-09e682aa] { grid-column: span 8; } .grid-cell--span-9[data-v-09e682aa] { grid-column: span 9; } .grid-cell--span-10[data-v-09e682aa] { grid-column: span 10; } .grid-cell--span-12[data-v-09e682aa] { grid-column: span 12; } .grid-cell--span-13[data-v-09e682aa] { grid-column: span 13; } .grid-cell--span-14[data-v-09e682aa] { grid-column: span 14; } .grid-cell--span-16[data-v-09e682aa] { grid-column: span 16; } .grid-cell--span-18[data-v-09e682aa] { grid-column: span 18; } .grid-cell--span-20[data-v-09e682aa] { grid-column: span 20; } .grid-cell--span-32[data-v-09e682aa] { grid-column: span 32; } .grid-cell--span-36[data-v-09e682aa] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-09e682aa] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-09e682aa] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-09e682aa] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-09e682aa] { justify-content: center !important; } .elem--bold span[data-v-09e682aa] { font-weight: 800; } .elem--column[data-v-09e682aa] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-09e682aa] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-09e682aa] { fill: #00a79b; } .elem--clickable[data-v-09e682aa]:hover { cursor: pointer; } .elem--disabled[data-v-09e682aa] { color: #cccccc; } .elem--disabled svg[data-v-09e682aa] { fill: #cccccc; } .elem--nowrap span[data-v-09e682aa] { white-space: nowrap; } .elem--danger svg[data-v-09e682aa] { fill: #eb1515; } .elem--span-1[data-v-09e682aa] { grid-column: span 1; } .elem--span-2[data-v-09e682aa] { grid-column: span 2; } .elem--span-3[data-v-09e682aa] { grid-column: span 3; } .elem--span-4[data-v-09e682aa] { grid-column: span 4; } .elem--span-5[data-v-09e682aa] { grid-column: span 5; } .elem--span-6[data-v-09e682aa] { grid-column: span 6; } .elem--span-7[data-v-09e682aa] { grid-column: span 7; } .elem--span-8[data-v-09e682aa] { grid-column: span 8; } .elem--span-9[data-v-09e682aa] { grid-column: span 9; } .elem--span-10[data-v-09e682aa] { grid-column: span 10; } .elem--span-12[data-v-09e682aa] { grid-column: span 12; } .elem--span-13[data-v-09e682aa] { grid-column: span 13; } .elem--span-14[data-v-09e682aa] { grid-column: span 14; } .elem--span-16[data-v-09e682aa] { grid-column: span 16; } .elem--span-18[data-v-09e682aa] { grid-column: span 18; } .elem--span-20[data-v-09e682aa] { grid-column: span 20; } .elem--span-32[data-v-09e682aa] { grid-column: span 32; } .elem--span-36[data-v-09e682aa] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-09e682aa] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-09e682aa] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-09e682aa]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-09e682aa] { display: flex; } /* flex-direction */ .flex-column[data-v-09e682aa] { flex-direction: column; } .flex-row[data-v-09e682aa] { flex-direction: row; } /* flex */ .flex-1[data-v-09e682aa] { flex: 1 !important; } .flex-2[data-v-09e682aa] { flex: 2; } .flex-3[data-v-09e682aa] { flex: 3; } .flex-3[data-v-09e682aa] { flex: 4; } .flex-5[data-v-09e682aa] { flex: 5; } .flex-auto[data-v-09e682aa] { flex: auto; } .flex-none[data-v-09e682aa] { flex: none; } .flex-content[data-v-09e682aa] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-09e682aa] { flex-wrap: wrap; } .flex-nowrap[data-v-09e682aa] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-09e682aa] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-09e682aa] { justify-content: flex-start; } .justify-content-end[data-v-09e682aa] { justify-content: flex-end; } .justify-content-baseline[data-v-09e682aa] { justify-content: baseline; } .justify-content-center[data-v-09e682aa] { justify-content: center; } .justify-content-space-between[data-v-09e682aa] { justify-content: space-between; } .justify-content-space-around[data-v-09e682aa] { justify-content: space-around; } .justify-content-space-evenly[data-v-09e682aa] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-09e682aa] { align-items: flex-start; } .align-items-flex-end[data-v-09e682aa] { align-items: flex-end; } .align-items-stretch[data-v-09e682aa] { align-items: stretch; } .align-items-baseline[data-v-09e682aa] { align-items: baseline; } .align-items-center[data-v-09e682aa] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-09e682aa] { align-content: flex-start; } .align-content-flex-end[data-v-09e682aa] { align-content: flex-end; } .align-content-center[data-v-09e682aa] { align-content: center; } .align-content-stretch[data-v-09e682aa] { align-content: stretch; } .align-content-space-between[data-v-09e682aa] { align-content: space-between; } .align-content-space-around[data-v-09e682aa] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-09e682aa] { align-self: flex-start; } .align-self-flex-end[data-v-09e682aa] { align-self: flex-end; } .align-self-stretch[data-v-09e682aa] { align-self: stretch; } .align-self-flex-baseline[data-v-09e682aa] { align-self: baseline; } .align-self-center[data-v-09e682aa] { align-self: center; } .align-self-auto[data-v-09e682aa] { align-self: auto; } .flex-gap-1[data-v-09e682aa] { gap: 4px; } .flex-gap-2[data-v-09e682aa] { gap: 8px; } .flex-gap-3[data-v-09e682aa] { gap: 12px; } .flex-gap-4[data-v-09e682aa] { gap: 16px; } .flex-gap-5[data-v-09e682aa] { gap: 20px; } .flex-gap-6[data-v-09e682aa] { gap: 24px; } .flex-gap-7[data-v-09e682aa] { gap: 28px; } .flex-gap-8[data-v-09e682aa] { gap: 32px; } .flex-gap-10[data-v-09e682aa] { gap: 40px; } .flex-gap-12[data-v-09e682aa] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-09e682aa] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-09e682aa] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-09e682aa] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-09e682aa] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-09e682aa] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-09e682aa] { display: none !important; } } .col-none[data-v-09e682aa] { display: none; } .col-auto[data-v-09e682aa] { grid-column: auto; } .col-1[data-v-09e682aa] { grid-column: span 1; } .col-2[data-v-09e682aa] { grid-column: span 2; } .col-3[data-v-09e682aa] { grid-column: span 3; } .col-4[data-v-09e682aa] { grid-column: span 4; } .col-5[data-v-09e682aa] { grid-column: span 5; } .col-6[data-v-09e682aa] { grid-column: span 6; } .col-7[data-v-09e682aa] { grid-column: span 7; } .col-8[data-v-09e682aa] { grid-column: span 8; } .col-9[data-v-09e682aa] { grid-column: span 9; } .col-10[data-v-09e682aa] { grid-column: span 10; } .col-12[data-v-09e682aa] { grid-column: span 12; } .col-13[data-v-09e682aa] { grid-column: span 13; } .col-14[data-v-09e682aa] { grid-column: span 14; } .col-15[data-v-09e682aa] { grid-column: span 15; } .col-16[data-v-09e682aa] { grid-column: span 16; } .col-18[data-v-09e682aa] { grid-column: span 18; } .col-20[data-v-09e682aa] { grid-column: span 20; } .col-22[data-v-09e682aa] { grid-column: span 22; } .col-24[data-v-09e682aa] { grid-column: span 24; } .col-26[data-v-09e682aa] { grid-column: span 26; } .col-27[data-v-09e682aa] { grid-column: span 27; } .col-28[data-v-09e682aa] { grid-column: span 28; } .col-30[data-v-09e682aa] { grid-column: span 30; } .col-36[data-v-09e682aa] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-09e682aa] { display: none; } .col-md-36[data-v-09e682aa] { grid-column: span 36; } .col-md-28[data-v-09e682aa] { grid-column: span 28; } .col-md-27[data-v-09e682aa] { grid-column: span 27; } .col-md-24[data-v-09e682aa] { grid-column: span 24; } .col-md-22[data-v-09e682aa] { grid-column: span 22; } .col-md-20[data-v-09e682aa] { grid-column: span 20; } .col-md-19[data-v-09e682aa] { grid-column: span 19; } .col-md-18[data-v-09e682aa] { grid-column: span 18; } .col-md-17[data-v-09e682aa] { grid-column: span 17; } .col-md-16[data-v-09e682aa] { grid-column: span 16; } .col-md-15[data-v-09e682aa] { grid-column: span 15; } .col-md-14[data-v-09e682aa] { grid-column: span 14; } .col-md-13[data-v-09e682aa] { grid-column: span 13; } .col-md-12[data-v-09e682aa] { grid-column: span 12; } .col-md-10[data-v-09e682aa] { grid-column: span 10; } .col-md-9[data-v-09e682aa] { grid-column: span 9; } .col-md-8[data-v-09e682aa] { grid-column: span 8; } .col-md-6[data-v-09e682aa] { grid-column: span 6; } .col-md-5[data-v-09e682aa] { grid-column: span 5; } .col-md-4[data-v-09e682aa] { grid-column: span 4; } .col-md-3[data-v-09e682aa] { grid-column: span 3; } .col-md-2[data-v-09e682aa] { grid-column: span 2; } .col-md-1[data-v-09e682aa] { grid-column: span 1; } .col-md-auto[data-v-09e682aa] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-09e682aa] { display: none; } .col-sm-36[data-v-09e682aa] { grid-column: span 36; } .col-sm-32[data-v-09e682aa] { grid-column: span 32; } .col-sm-28[data-v-09e682aa] { grid-column: span 28; } .col-sm-27[data-v-09e682aa] { grid-column: span 27; } .col-sm-24[data-v-09e682aa] { grid-column: span 24; } .col-sm-22[data-v-09e682aa] { grid-column: span 22; } .col-sm-20[data-v-09e682aa] { grid-column: span 20; } .col-sm-18[data-v-09e682aa] { grid-column: span 18; } .col-sm-16[data-v-09e682aa] { grid-column: span 16; } .col-sm-15[data-v-09e682aa] { grid-column: span 15; } .col-sm-14[data-v-09e682aa] { grid-column: span 14; } .col-sm-13[data-v-09e682aa] { grid-column: span 12; } .col-sm-12[data-v-09e682aa] { grid-column: span 12; } .col-sm-10[data-v-09e682aa] { grid-column: span 10; } .col-sm-9[data-v-09e682aa] { grid-column: span 8; } .col-sm-8[data-v-09e682aa] { grid-column: span 8; } .col-sm-6[data-v-09e682aa] { grid-column: span 6; } .col-sm-4[data-v-09e682aa] { grid-column: span 4; } .col-sm-auto[data-v-09e682aa] { grid-column: auto; } } .fade-enter-active[data-v-09e682aa] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-09e682aa] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-09e682aa], .fade-leave-to[data-v-09e682aa] { opacity: 0; } .header-logo[data-v-09e682aa] { display: flex; align-items: center; gap: 10px; text-decoration: none; outline: none; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .header-logo[data-v-09e682aa]:hover { opacity: 0.85; } .header-logo[data-v-09e682aa]:active { opacity: 0.7; } .header-logo[data-v-09e682aa]:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 4px; border-radius: 4px; } .header-logo__text[data-v-09e682aa] { display: flex; align-items: baseline; gap: 4px; } .header-logo__text--short[data-v-09e682aa] { gap: 2px; } .header-logo__fast[data-v-09e682aa] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 20px; font-weight: 800; font-style: italic; color: #f8f9fb; letter-spacing: -0.5px; } .header-logo__peptides[data-v-09e682aa] { font-family: 'Instrument Sans', 'SF Pro Display', -apple-system, sans-serif; font-size: 20px; font-weight: 600; color: var(--primary-400); letter-spacing: 0.5px; } @media (max-width: 1160px) { .header-logo__fast[data-v-09e682aa], .header-logo__peptides[data-v-09e682aa] { font-size: 18px; } } @media (max-width: 720px) { .header-logo[data-v-09e682aa] { gap: 8px; } .header-logo__fast[data-v-09e682aa], .header-logo__peptides[data-v-09e682aa] { font-size: 22px; } } /* ══════════════════════════════════════════════════════════════ 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-89daf49b]: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-89daf49b] { /* 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-89daf49b] { /* 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-89daf49b]: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-89daf49b], .theme-mode-light[data-v-89daf49b] { /* ═══════════════════════════════════════════════════════════════ 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-89daf49b], .theme-mode-dark[data-v-89daf49b] { /* ═══════════════════════════════════════════════════════════════ 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-89daf49b]: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-89daf49b]: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-89daf49b] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-89daf49b] { 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-89daf49b]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-89daf49b], input[disabled][data-v-89daf49b] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-89daf49b] { opacity: 0.9; } input[readonly][data-v-89daf49b] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-89daf49b] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-89daf49b]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-89daf49b]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-89daf49b]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-89daf49b] { 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-89daf49b]:nth-child(odd), .list-card-desktop__wrapper[data-v-89daf49b]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-89daf49b]:nth-child(even), .list-card-desktop__wrapper[data-v-89daf49b]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-89daf49b]:nth-child(odd), .listCardDesktopWrapper[data-v-89daf49b]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-89daf49b]:nth-child(even), .listCardDesktopWrapper[data-v-89daf49b]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-89daf49b] { 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-89daf49b] { cursor: pointer; } .card-layout--selectionnable[data-v-89daf49b]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-89daf49b] { cursor: auto; } .card-layout--drawer[data-v-89daf49b] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-89daf49b] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-89daf49b] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-89daf49b] { 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-89daf49b] { 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-89daf49b] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-89daf49b]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-89daf49b] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-89daf49b] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-89daf49b] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-89daf49b] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-89daf49b] { 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-89daf49b] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-89daf49b] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-89daf49b] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-89daf49b] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-89daf49b] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-89daf49b] { background-color: #eb1515; } .color-chip--dossiers[data-v-89daf49b] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-89daf49b] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-89daf49b] { background-color: #00a79b; } .color-chip--virements[data-v-89daf49b] { background-color: var(--secondary-400); } .color-chip--factures[data-v-89daf49b] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-89daf49b] { background-color: #eb1515; } .color-recherche-dossiers[data-v-89daf49b] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-89daf49b] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-89daf49b] { background-color: #00a79b; } .color-recherche-virements[data-v-89daf49b] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-89daf49b] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-89daf49b] { color: #00a79b; cursor: pointer; } .scrollable[data-v-89daf49b] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-89daf49b] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-89daf49b] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-89daf49b] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-89daf49b] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-89daf49b] { font-weight: 800; } .grid-cell--column[data-v-89daf49b] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-89daf49b] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-89daf49b] { fill: #00a79b; } .grid-cell--disabled[data-v-89daf49b] { color: #cccccc; } .grid-cell--disabled svg[data-v-89daf49b] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-89daf49b] { white-space: nowrap; } .grid-cell--danger svg[data-v-89daf49b] { fill: #eb1515; } .grid-cell--span-1[data-v-89daf49b] { grid-column: span 1; } .grid-cell--span-2[data-v-89daf49b] { grid-column: span 2; } .grid-cell--span-3[data-v-89daf49b] { grid-column: span 3; } .grid-cell--span-4[data-v-89daf49b] { grid-column: span 4; } .grid-cell--span-5[data-v-89daf49b] { grid-column: span 5; } .grid-cell--span-6[data-v-89daf49b] { grid-column: span 6; } .grid-cell--span-7[data-v-89daf49b] { grid-column: span 7; } .grid-cell--span-8[data-v-89daf49b] { grid-column: span 8; } .grid-cell--span-9[data-v-89daf49b] { grid-column: span 9; } .grid-cell--span-10[data-v-89daf49b] { grid-column: span 10; } .grid-cell--span-12[data-v-89daf49b] { grid-column: span 12; } .grid-cell--span-13[data-v-89daf49b] { grid-column: span 13; } .grid-cell--span-14[data-v-89daf49b] { grid-column: span 14; } .grid-cell--span-16[data-v-89daf49b] { grid-column: span 16; } .grid-cell--span-18[data-v-89daf49b] { grid-column: span 18; } .grid-cell--span-20[data-v-89daf49b] { grid-column: span 20; } .grid-cell--span-32[data-v-89daf49b] { grid-column: span 32; } .grid-cell--span-36[data-v-89daf49b] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-89daf49b] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-89daf49b] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-89daf49b] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-89daf49b] { justify-content: center !important; } .elem--bold span[data-v-89daf49b] { font-weight: 800; } .elem--column[data-v-89daf49b] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-89daf49b] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-89daf49b] { fill: #00a79b; } .elem--clickable[data-v-89daf49b]:hover { cursor: pointer; } .elem--disabled[data-v-89daf49b] { color: #cccccc; } .elem--disabled svg[data-v-89daf49b] { fill: #cccccc; } .elem--nowrap span[data-v-89daf49b] { white-space: nowrap; } .elem--danger svg[data-v-89daf49b] { fill: #eb1515; } .elem--span-1[data-v-89daf49b] { grid-column: span 1; } .elem--span-2[data-v-89daf49b] { grid-column: span 2; } .elem--span-3[data-v-89daf49b] { grid-column: span 3; } .elem--span-4[data-v-89daf49b] { grid-column: span 4; } .elem--span-5[data-v-89daf49b] { grid-column: span 5; } .elem--span-6[data-v-89daf49b] { grid-column: span 6; } .elem--span-7[data-v-89daf49b] { grid-column: span 7; } .elem--span-8[data-v-89daf49b] { grid-column: span 8; } .elem--span-9[data-v-89daf49b] { grid-column: span 9; } .elem--span-10[data-v-89daf49b] { grid-column: span 10; } .elem--span-12[data-v-89daf49b] { grid-column: span 12; } .elem--span-13[data-v-89daf49b] { grid-column: span 13; } .elem--span-14[data-v-89daf49b] { grid-column: span 14; } .elem--span-16[data-v-89daf49b] { grid-column: span 16; } .elem--span-18[data-v-89daf49b] { grid-column: span 18; } .elem--span-20[data-v-89daf49b] { grid-column: span 20; } .elem--span-32[data-v-89daf49b] { grid-column: span 32; } .elem--span-36[data-v-89daf49b] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-89daf49b] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-89daf49b] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-89daf49b]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-89daf49b] { display: flex; } /* flex-direction */ .flex-column[data-v-89daf49b] { flex-direction: column; } .flex-row[data-v-89daf49b] { flex-direction: row; } /* flex */ .flex-1[data-v-89daf49b] { flex: 1 !important; } .flex-2[data-v-89daf49b] { flex: 2; } .flex-3[data-v-89daf49b] { flex: 3; } .flex-3[data-v-89daf49b] { flex: 4; } .flex-5[data-v-89daf49b] { flex: 5; } .flex-auto[data-v-89daf49b] { flex: auto; } .flex-none[data-v-89daf49b] { flex: none; } .flex-content[data-v-89daf49b] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-89daf49b] { flex-wrap: wrap; } .flex-nowrap[data-v-89daf49b] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-89daf49b] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-89daf49b] { justify-content: flex-start; } .justify-content-end[data-v-89daf49b] { justify-content: flex-end; } .justify-content-baseline[data-v-89daf49b] { justify-content: baseline; } .justify-content-center[data-v-89daf49b] { justify-content: center; } .justify-content-space-between[data-v-89daf49b] { justify-content: space-between; } .justify-content-space-around[data-v-89daf49b] { justify-content: space-around; } .justify-content-space-evenly[data-v-89daf49b] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-89daf49b] { align-items: flex-start; } .align-items-flex-end[data-v-89daf49b] { align-items: flex-end; } .align-items-stretch[data-v-89daf49b] { align-items: stretch; } .align-items-baseline[data-v-89daf49b] { align-items: baseline; } .align-items-center[data-v-89daf49b] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-89daf49b] { align-content: flex-start; } .align-content-flex-end[data-v-89daf49b] { align-content: flex-end; } .align-content-center[data-v-89daf49b] { align-content: center; } .align-content-stretch[data-v-89daf49b] { align-content: stretch; } .align-content-space-between[data-v-89daf49b] { align-content: space-between; } .align-content-space-around[data-v-89daf49b] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-89daf49b] { align-self: flex-start; } .align-self-flex-end[data-v-89daf49b] { align-self: flex-end; } .align-self-stretch[data-v-89daf49b] { align-self: stretch; } .align-self-flex-baseline[data-v-89daf49b] { align-self: baseline; } .align-self-center[data-v-89daf49b] { align-self: center; } .align-self-auto[data-v-89daf49b] { align-self: auto; } .flex-gap-1[data-v-89daf49b] { gap: 4px; } .flex-gap-2[data-v-89daf49b] { gap: 8px; } .flex-gap-3[data-v-89daf49b] { gap: 12px; } .flex-gap-4[data-v-89daf49b] { gap: 16px; } .flex-gap-5[data-v-89daf49b] { gap: 20px; } .flex-gap-6[data-v-89daf49b] { gap: 24px; } .flex-gap-7[data-v-89daf49b] { gap: 28px; } .flex-gap-8[data-v-89daf49b] { gap: 32px; } .flex-gap-10[data-v-89daf49b] { gap: 40px; } .flex-gap-12[data-v-89daf49b] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-89daf49b] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-89daf49b] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-89daf49b] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-89daf49b] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-89daf49b] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-89daf49b] { display: none !important; } } .col-none[data-v-89daf49b] { display: none; } .col-auto[data-v-89daf49b] { grid-column: auto; } .col-1[data-v-89daf49b] { grid-column: span 1; } .col-2[data-v-89daf49b] { grid-column: span 2; } .col-3[data-v-89daf49b] { grid-column: span 3; } .col-4[data-v-89daf49b] { grid-column: span 4; } .col-5[data-v-89daf49b] { grid-column: span 5; } .col-6[data-v-89daf49b] { grid-column: span 6; } .col-7[data-v-89daf49b] { grid-column: span 7; } .col-8[data-v-89daf49b] { grid-column: span 8; } .col-9[data-v-89daf49b] { grid-column: span 9; } .col-10[data-v-89daf49b] { grid-column: span 10; } .col-12[data-v-89daf49b] { grid-column: span 12; } .col-13[data-v-89daf49b] { grid-column: span 13; } .col-14[data-v-89daf49b] { grid-column: span 14; } .col-15[data-v-89daf49b] { grid-column: span 15; } .col-16[data-v-89daf49b] { grid-column: span 16; } .col-18[data-v-89daf49b] { grid-column: span 18; } .col-20[data-v-89daf49b] { grid-column: span 20; } .col-22[data-v-89daf49b] { grid-column: span 22; } .col-24[data-v-89daf49b] { grid-column: span 24; } .col-26[data-v-89daf49b] { grid-column: span 26; } .col-27[data-v-89daf49b] { grid-column: span 27; } .col-28[data-v-89daf49b] { grid-column: span 28; } .col-30[data-v-89daf49b] { grid-column: span 30; } .col-36[data-v-89daf49b] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-89daf49b] { display: none; } .col-md-36[data-v-89daf49b] { grid-column: span 36; } .col-md-28[data-v-89daf49b] { grid-column: span 28; } .col-md-27[data-v-89daf49b] { grid-column: span 27; } .col-md-24[data-v-89daf49b] { grid-column: span 24; } .col-md-22[data-v-89daf49b] { grid-column: span 22; } .col-md-20[data-v-89daf49b] { grid-column: span 20; } .col-md-19[data-v-89daf49b] { grid-column: span 19; } .col-md-18[data-v-89daf49b] { grid-column: span 18; } .col-md-17[data-v-89daf49b] { grid-column: span 17; } .col-md-16[data-v-89daf49b] { grid-column: span 16; } .col-md-15[data-v-89daf49b] { grid-column: span 15; } .col-md-14[data-v-89daf49b] { grid-column: span 14; } .col-md-13[data-v-89daf49b] { grid-column: span 13; } .col-md-12[data-v-89daf49b] { grid-column: span 12; } .col-md-10[data-v-89daf49b] { grid-column: span 10; } .col-md-9[data-v-89daf49b] { grid-column: span 9; } .col-md-8[data-v-89daf49b] { grid-column: span 8; } .col-md-6[data-v-89daf49b] { grid-column: span 6; } .col-md-5[data-v-89daf49b] { grid-column: span 5; } .col-md-4[data-v-89daf49b] { grid-column: span 4; } .col-md-3[data-v-89daf49b] { grid-column: span 3; } .col-md-2[data-v-89daf49b] { grid-column: span 2; } .col-md-1[data-v-89daf49b] { grid-column: span 1; } .col-md-auto[data-v-89daf49b] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-89daf49b] { display: none; } .col-sm-36[data-v-89daf49b] { grid-column: span 36; } .col-sm-32[data-v-89daf49b] { grid-column: span 32; } .col-sm-28[data-v-89daf49b] { grid-column: span 28; } .col-sm-27[data-v-89daf49b] { grid-column: span 27; } .col-sm-24[data-v-89daf49b] { grid-column: span 24; } .col-sm-22[data-v-89daf49b] { grid-column: span 22; } .col-sm-20[data-v-89daf49b] { grid-column: span 20; } .col-sm-18[data-v-89daf49b] { grid-column: span 18; } .col-sm-16[data-v-89daf49b] { grid-column: span 16; } .col-sm-15[data-v-89daf49b] { grid-column: span 15; } .col-sm-14[data-v-89daf49b] { grid-column: span 14; } .col-sm-13[data-v-89daf49b] { grid-column: span 12; } .col-sm-12[data-v-89daf49b] { grid-column: span 12; } .col-sm-10[data-v-89daf49b] { grid-column: span 10; } .col-sm-9[data-v-89daf49b] { grid-column: span 8; } .col-sm-8[data-v-89daf49b] { grid-column: span 8; } .col-sm-6[data-v-89daf49b] { grid-column: span 6; } .col-sm-4[data-v-89daf49b] { grid-column: span 4; } .col-sm-auto[data-v-89daf49b] { grid-column: auto; } } .fade-enter-active[data-v-89daf49b] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-89daf49b] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-89daf49b], .fade-leave-to[data-v-89daf49b] { opacity: 0; } .header-search-wrapper[data-v-89daf49b] { display: flex; align-items: center; flex: 1; min-width: 0; } .header-search-icon[data-v-89daf49b] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .header-search-icon[data-v-89daf49b]:hover { background: rgba(255, 255, 255, 0.06); } .header-search-icon[data-v-89daf49b]:active { opacity: 0.8; } .header-search[data-v-89daf49b] { position: relative; flex: 1; min-width: 0; max-width: 320px; } .header-search--focused[data-v-89daf49b] { z-index: 100; } .header-search__form[data-v-89daf49b] { display: flex; align-items: center; height: 36px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .header-search__form[data-v-89daf49b]:focus-within { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb), 0.1); } .header-search__icon[data-v-89daf49b] { display: flex; align-items: center; justify-content: center; width: 36px; height: 100%; flex-shrink: 0; pointer-events: none; } .header-search__input[data-v-89daf49b] { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 0; background: transparent; border: none; outline: none; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 14px; font-weight: 400; color: #edf1f5; } .header-search__input[data-v-89daf49b]::placeholder { color: #94a2b8; } .header-search__clear[data-v-89daf49b] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 4px; padding: 0; background: rgba(255, 255, 255, 0.08); border: none; border-radius: 6px; cursor: pointer; flex-shrink: 0; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .header-search__clear[data-v-89daf49b]:hover { background: rgba(255, 255, 255, 0.12); } .header-search__dropdown[data-v-89daf49b] { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: rgba(var(--secondary-900-rgb), 0.98); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3); overflow: hidden; } .header-search__results[data-v-89daf49b] { max-height: 320px; overflow-y: auto; } .header-search__item[data-v-89daf49b] { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; background: transparent; border: none; cursor: pointer; transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1); text-align: left; } .header-search__item[data-v-89daf49b]:hover, .header-search__item--active[data-v-89daf49b] { background: rgba(255, 255, 255, 0.06); } .header-search__item-image[data-v-89daf49b] { width: 44px; height: 44px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); overflow: hidden; flex-shrink: 0; } .header-search__item-image img[data-v-89daf49b] { width: 100%; height: 100%; object-fit: cover; } .header-search__item-info[data-v-89daf49b] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .header-search__item-category[data-v-89daf49b] { font-size: 11px; font-weight: 500; color: var(--primary-400); text-transform: uppercase; letter-spacing: 0.5px; } .header-search__item-name[data-v-89daf49b] { font-size: 13px; font-weight: 500; color: #edf1f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-search__item-price[data-v-89daf49b] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .header-search__item-price span[data-v-89daf49b] { font-size: 13px; font-weight: 600; color: #edf1f5; } .header-search__item-price--sale[data-v-89daf49b] { color: var(--success-400) !important; } .header-search__item-price--old[data-v-89daf49b] { font-size: 11px !important; font-weight: 400 !important; color: #94a2b8 !important; text-decoration: line-through; } .header-search__view-all[data-v-89daf49b] { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: rgba(var(--primary-500-rgb), 0.1); border: none; border-top: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .header-search__view-all span[data-v-89daf49b] { font-size: 13px; font-weight: 500; color: var(--primary-300); } .header-search__view-all[data-v-89daf49b]:hover { background: rgba(var(--primary-500-rgb), 0.15); } .search-overlay[data-v-89daf49b] { position: fixed; inset: 0; z-index: 2000; background: rgba(var(--secondary-950-rgb), 0.98); backdrop-filter: blur(20px); display: flex; flex-direction: column; } .search-overlay__header[data-v-89daf49b] { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: rgba(var(--secondary-900-rgb), 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .search-overlay__form[data-v-89daf49b] { flex: 1; min-width: 0; } .search-overlay__input-wrapper[data-v-89daf49b] { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .search-overlay__input-wrapper[data-v-89daf49b]:focus-within { background: rgba(255, 255, 255, 0.08); border-color: rgba(var(--primary-500-rgb), 0.4); } .search-overlay__input[data-v-89daf49b] { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: none; outline: none; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 16px; font-weight: 400; color: #edf1f5; } .search-overlay__input[data-v-89daf49b]::placeholder { color: #94a2b8; } .search-overlay__clear[data-v-89daf49b] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 6px; cursor: pointer; flex-shrink: 0; } .search-overlay__cancel[data-v-89daf49b] { padding: 10px 4px; background: transparent; border: none; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 15px; font-weight: 500; color: var(--primary-400); cursor: pointer; white-space: nowrap; } .search-overlay__results[data-v-89daf49b] { flex: 1; overflow-y: auto; padding: 8px 0; } .search-overlay__item[data-v-89daf49b] { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; background: transparent; border: none; cursor: pointer; transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1); text-align: left; } .search-overlay__item[data-v-89daf49b]:active, .search-overlay__item--active[data-v-89daf49b] { background: rgba(255, 255, 255, 0.06); } .search-overlay__item-image[data-v-89daf49b] { width: 56px; height: 56px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); overflow: hidden; flex-shrink: 0; } .search-overlay__item-image img[data-v-89daf49b] { width: 100%; height: 100%; object-fit: cover; } .search-overlay__item-info[data-v-89daf49b] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .search-overlay__item-category[data-v-89daf49b] { font-size: 11px; font-weight: 500; color: var(--primary-400); text-transform: uppercase; letter-spacing: 0.5px; } .search-overlay__item-name[data-v-89daf49b] { font-size: 15px; font-weight: 500; color: #edf1f5; } .search-overlay__item-price[data-v-89daf49b] { display: flex; align-items: center; gap: 8px; } .search-overlay__item-price span[data-v-89daf49b] { font-size: 14px; font-weight: 600; color: #edf1f5; } .search-overlay__item-price--sale[data-v-89daf49b] { color: var(--success-400) !important; } .search-overlay__item-price--old[data-v-89daf49b] { font-size: 12px !important; font-weight: 400 !important; color: #94a2b8 !important; text-decoration: line-through; } .search-overlay__view-all[data-v-89daf49b] { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); margin: 8px 16px 16px; padding: 14px; background: rgba(var(--primary-500-rgb), 0.15); border: 1px solid rgba(var(--primary-500-rgb), 0.3); border-radius: 12px; cursor: pointer; } .search-overlay__view-all span[data-v-89daf49b] { font-size: 14px; font-weight: 500; color: var(--primary-300); } .search-overlay__empty[data-v-89daf49b] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px; } .search-overlay__empty span[data-v-89daf49b] { font-size: 15px; color: #94a2b8; } .dropdown-enter-active[data-v-89daf49b], .dropdown-leave-active[data-v-89daf49b] { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-enter-from[data-v-89daf49b], .dropdown-leave-to[data-v-89daf49b] { opacity: 0; transform: translateY(-8px); } .overlay-enter-active[data-v-89daf49b], .overlay-leave-active[data-v-89daf49b] { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .overlay-enter-from[data-v-89daf49b], .overlay-leave-to[data-v-89daf49b] { 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-974e7ad8]: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-974e7ad8] { /* 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-974e7ad8] { /* 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-974e7ad8]: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-974e7ad8], .theme-mode-light[data-v-974e7ad8] { /* ═══════════════════════════════════════════════════════════════ 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-974e7ad8], .theme-mode-dark[data-v-974e7ad8] { /* ═══════════════════════════════════════════════════════════════ 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-974e7ad8]: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-974e7ad8]: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-974e7ad8] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-974e7ad8] { 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-974e7ad8]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-974e7ad8], input[disabled][data-v-974e7ad8] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-974e7ad8] { opacity: 0.9; } input[readonly][data-v-974e7ad8] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-974e7ad8] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-974e7ad8]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-974e7ad8]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-974e7ad8]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-974e7ad8] { 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-974e7ad8]:nth-child(odd), .list-card-desktop__wrapper[data-v-974e7ad8]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-974e7ad8]:nth-child(even), .list-card-desktop__wrapper[data-v-974e7ad8]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-974e7ad8]:nth-child(odd), .listCardDesktopWrapper[data-v-974e7ad8]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-974e7ad8]:nth-child(even), .listCardDesktopWrapper[data-v-974e7ad8]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-974e7ad8] { 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-974e7ad8] { cursor: pointer; } .card-layout--selectionnable[data-v-974e7ad8]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-974e7ad8] { cursor: auto; } .card-layout--drawer[data-v-974e7ad8] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-974e7ad8] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-974e7ad8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-974e7ad8] { 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-974e7ad8] { 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-974e7ad8] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-974e7ad8]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-974e7ad8] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-974e7ad8] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-974e7ad8] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-974e7ad8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-974e7ad8] { 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-974e7ad8] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-974e7ad8] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-974e7ad8] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-974e7ad8] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-974e7ad8] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-974e7ad8] { background-color: #eb1515; } .color-chip--dossiers[data-v-974e7ad8] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-974e7ad8] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-974e7ad8] { background-color: #00a79b; } .color-chip--virements[data-v-974e7ad8] { background-color: var(--secondary-400); } .color-chip--factures[data-v-974e7ad8] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-974e7ad8] { background-color: #eb1515; } .color-recherche-dossiers[data-v-974e7ad8] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-974e7ad8] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-974e7ad8] { background-color: #00a79b; } .color-recherche-virements[data-v-974e7ad8] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-974e7ad8] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-974e7ad8] { color: #00a79b; cursor: pointer; } .scrollable[data-v-974e7ad8] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-974e7ad8] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-974e7ad8] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-974e7ad8] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-974e7ad8] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-974e7ad8] { font-weight: 800; } .grid-cell--column[data-v-974e7ad8] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-974e7ad8] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-974e7ad8] { fill: #00a79b; } .grid-cell--disabled[data-v-974e7ad8] { color: #cccccc; } .grid-cell--disabled svg[data-v-974e7ad8] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-974e7ad8] { white-space: nowrap; } .grid-cell--danger svg[data-v-974e7ad8] { fill: #eb1515; } .grid-cell--span-1[data-v-974e7ad8] { grid-column: span 1; } .grid-cell--span-2[data-v-974e7ad8] { grid-column: span 2; } .grid-cell--span-3[data-v-974e7ad8] { grid-column: span 3; } .grid-cell--span-4[data-v-974e7ad8] { grid-column: span 4; } .grid-cell--span-5[data-v-974e7ad8] { grid-column: span 5; } .grid-cell--span-6[data-v-974e7ad8] { grid-column: span 6; } .grid-cell--span-7[data-v-974e7ad8] { grid-column: span 7; } .grid-cell--span-8[data-v-974e7ad8] { grid-column: span 8; } .grid-cell--span-9[data-v-974e7ad8] { grid-column: span 9; } .grid-cell--span-10[data-v-974e7ad8] { grid-column: span 10; } .grid-cell--span-12[data-v-974e7ad8] { grid-column: span 12; } .grid-cell--span-13[data-v-974e7ad8] { grid-column: span 13; } .grid-cell--span-14[data-v-974e7ad8] { grid-column: span 14; } .grid-cell--span-16[data-v-974e7ad8] { grid-column: span 16; } .grid-cell--span-18[data-v-974e7ad8] { grid-column: span 18; } .grid-cell--span-20[data-v-974e7ad8] { grid-column: span 20; } .grid-cell--span-32[data-v-974e7ad8] { grid-column: span 32; } .grid-cell--span-36[data-v-974e7ad8] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-974e7ad8] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-974e7ad8] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-974e7ad8] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-974e7ad8] { justify-content: center !important; } .elem--bold span[data-v-974e7ad8] { font-weight: 800; } .elem--column[data-v-974e7ad8] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-974e7ad8] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-974e7ad8] { fill: #00a79b; } .elem--clickable[data-v-974e7ad8]:hover { cursor: pointer; } .elem--disabled[data-v-974e7ad8] { color: #cccccc; } .elem--disabled svg[data-v-974e7ad8] { fill: #cccccc; } .elem--nowrap span[data-v-974e7ad8] { white-space: nowrap; } .elem--danger svg[data-v-974e7ad8] { fill: #eb1515; } .elem--span-1[data-v-974e7ad8] { grid-column: span 1; } .elem--span-2[data-v-974e7ad8] { grid-column: span 2; } .elem--span-3[data-v-974e7ad8] { grid-column: span 3; } .elem--span-4[data-v-974e7ad8] { grid-column: span 4; } .elem--span-5[data-v-974e7ad8] { grid-column: span 5; } .elem--span-6[data-v-974e7ad8] { grid-column: span 6; } .elem--span-7[data-v-974e7ad8] { grid-column: span 7; } .elem--span-8[data-v-974e7ad8] { grid-column: span 8; } .elem--span-9[data-v-974e7ad8] { grid-column: span 9; } .elem--span-10[data-v-974e7ad8] { grid-column: span 10; } .elem--span-12[data-v-974e7ad8] { grid-column: span 12; } .elem--span-13[data-v-974e7ad8] { grid-column: span 13; } .elem--span-14[data-v-974e7ad8] { grid-column: span 14; } .elem--span-16[data-v-974e7ad8] { grid-column: span 16; } .elem--span-18[data-v-974e7ad8] { grid-column: span 18; } .elem--span-20[data-v-974e7ad8] { grid-column: span 20; } .elem--span-32[data-v-974e7ad8] { grid-column: span 32; } .elem--span-36[data-v-974e7ad8] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-974e7ad8] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-974e7ad8] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-974e7ad8]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-974e7ad8] { display: flex; } /* flex-direction */ .flex-column[data-v-974e7ad8] { flex-direction: column; } .flex-row[data-v-974e7ad8] { flex-direction: row; } /* flex */ .flex-1[data-v-974e7ad8] { flex: 1 !important; } .flex-2[data-v-974e7ad8] { flex: 2; } .flex-3[data-v-974e7ad8] { flex: 3; } .flex-3[data-v-974e7ad8] { flex: 4; } .flex-5[data-v-974e7ad8] { flex: 5; } .flex-auto[data-v-974e7ad8] { flex: auto; } .flex-none[data-v-974e7ad8] { flex: none; } .flex-content[data-v-974e7ad8] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-974e7ad8] { flex-wrap: wrap; } .flex-nowrap[data-v-974e7ad8] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-974e7ad8] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-974e7ad8] { justify-content: flex-start; } .justify-content-end[data-v-974e7ad8] { justify-content: flex-end; } .justify-content-baseline[data-v-974e7ad8] { justify-content: baseline; } .justify-content-center[data-v-974e7ad8] { justify-content: center; } .justify-content-space-between[data-v-974e7ad8] { justify-content: space-between; } .justify-content-space-around[data-v-974e7ad8] { justify-content: space-around; } .justify-content-space-evenly[data-v-974e7ad8] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-974e7ad8] { align-items: flex-start; } .align-items-flex-end[data-v-974e7ad8] { align-items: flex-end; } .align-items-stretch[data-v-974e7ad8] { align-items: stretch; } .align-items-baseline[data-v-974e7ad8] { align-items: baseline; } .align-items-center[data-v-974e7ad8] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-974e7ad8] { align-content: flex-start; } .align-content-flex-end[data-v-974e7ad8] { align-content: flex-end; } .align-content-center[data-v-974e7ad8] { align-content: center; } .align-content-stretch[data-v-974e7ad8] { align-content: stretch; } .align-content-space-between[data-v-974e7ad8] { align-content: space-between; } .align-content-space-around[data-v-974e7ad8] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-974e7ad8] { align-self: flex-start; } .align-self-flex-end[data-v-974e7ad8] { align-self: flex-end; } .align-self-stretch[data-v-974e7ad8] { align-self: stretch; } .align-self-flex-baseline[data-v-974e7ad8] { align-self: baseline; } .align-self-center[data-v-974e7ad8] { align-self: center; } .align-self-auto[data-v-974e7ad8] { align-self: auto; } .flex-gap-1[data-v-974e7ad8] { gap: 4px; } .flex-gap-2[data-v-974e7ad8] { gap: 8px; } .flex-gap-3[data-v-974e7ad8] { gap: 12px; } .flex-gap-4[data-v-974e7ad8] { gap: 16px; } .flex-gap-5[data-v-974e7ad8] { gap: 20px; } .flex-gap-6[data-v-974e7ad8] { gap: 24px; } .flex-gap-7[data-v-974e7ad8] { gap: 28px; } .flex-gap-8[data-v-974e7ad8] { gap: 32px; } .flex-gap-10[data-v-974e7ad8] { gap: 40px; } .flex-gap-12[data-v-974e7ad8] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-974e7ad8] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-974e7ad8] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-974e7ad8] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-974e7ad8] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-974e7ad8] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-974e7ad8] { display: none !important; } } .col-none[data-v-974e7ad8] { display: none; } .col-auto[data-v-974e7ad8] { grid-column: auto; } .col-1[data-v-974e7ad8] { grid-column: span 1; } .col-2[data-v-974e7ad8] { grid-column: span 2; } .col-3[data-v-974e7ad8] { grid-column: span 3; } .col-4[data-v-974e7ad8] { grid-column: span 4; } .col-5[data-v-974e7ad8] { grid-column: span 5; } .col-6[data-v-974e7ad8] { grid-column: span 6; } .col-7[data-v-974e7ad8] { grid-column: span 7; } .col-8[data-v-974e7ad8] { grid-column: span 8; } .col-9[data-v-974e7ad8] { grid-column: span 9; } .col-10[data-v-974e7ad8] { grid-column: span 10; } .col-12[data-v-974e7ad8] { grid-column: span 12; } .col-13[data-v-974e7ad8] { grid-column: span 13; } .col-14[data-v-974e7ad8] { grid-column: span 14; } .col-15[data-v-974e7ad8] { grid-column: span 15; } .col-16[data-v-974e7ad8] { grid-column: span 16; } .col-18[data-v-974e7ad8] { grid-column: span 18; } .col-20[data-v-974e7ad8] { grid-column: span 20; } .col-22[data-v-974e7ad8] { grid-column: span 22; } .col-24[data-v-974e7ad8] { grid-column: span 24; } .col-26[data-v-974e7ad8] { grid-column: span 26; } .col-27[data-v-974e7ad8] { grid-column: span 27; } .col-28[data-v-974e7ad8] { grid-column: span 28; } .col-30[data-v-974e7ad8] { grid-column: span 30; } .col-36[data-v-974e7ad8] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-974e7ad8] { display: none; } .col-md-36[data-v-974e7ad8] { grid-column: span 36; } .col-md-28[data-v-974e7ad8] { grid-column: span 28; } .col-md-27[data-v-974e7ad8] { grid-column: span 27; } .col-md-24[data-v-974e7ad8] { grid-column: span 24; } .col-md-22[data-v-974e7ad8] { grid-column: span 22; } .col-md-20[data-v-974e7ad8] { grid-column: span 20; } .col-md-19[data-v-974e7ad8] { grid-column: span 19; } .col-md-18[data-v-974e7ad8] { grid-column: span 18; } .col-md-17[data-v-974e7ad8] { grid-column: span 17; } .col-md-16[data-v-974e7ad8] { grid-column: span 16; } .col-md-15[data-v-974e7ad8] { grid-column: span 15; } .col-md-14[data-v-974e7ad8] { grid-column: span 14; } .col-md-13[data-v-974e7ad8] { grid-column: span 13; } .col-md-12[data-v-974e7ad8] { grid-column: span 12; } .col-md-10[data-v-974e7ad8] { grid-column: span 10; } .col-md-9[data-v-974e7ad8] { grid-column: span 9; } .col-md-8[data-v-974e7ad8] { grid-column: span 8; } .col-md-6[data-v-974e7ad8] { grid-column: span 6; } .col-md-5[data-v-974e7ad8] { grid-column: span 5; } .col-md-4[data-v-974e7ad8] { grid-column: span 4; } .col-md-3[data-v-974e7ad8] { grid-column: span 3; } .col-md-2[data-v-974e7ad8] { grid-column: span 2; } .col-md-1[data-v-974e7ad8] { grid-column: span 1; } .col-md-auto[data-v-974e7ad8] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-974e7ad8] { display: none; } .col-sm-36[data-v-974e7ad8] { grid-column: span 36; } .col-sm-32[data-v-974e7ad8] { grid-column: span 32; } .col-sm-28[data-v-974e7ad8] { grid-column: span 28; } .col-sm-27[data-v-974e7ad8] { grid-column: span 27; } .col-sm-24[data-v-974e7ad8] { grid-column: span 24; } .col-sm-22[data-v-974e7ad8] { grid-column: span 22; } .col-sm-20[data-v-974e7ad8] { grid-column: span 20; } .col-sm-18[data-v-974e7ad8] { grid-column: span 18; } .col-sm-16[data-v-974e7ad8] { grid-column: span 16; } .col-sm-15[data-v-974e7ad8] { grid-column: span 15; } .col-sm-14[data-v-974e7ad8] { grid-column: span 14; } .col-sm-13[data-v-974e7ad8] { grid-column: span 12; } .col-sm-12[data-v-974e7ad8] { grid-column: span 12; } .col-sm-10[data-v-974e7ad8] { grid-column: span 10; } .col-sm-9[data-v-974e7ad8] { grid-column: span 8; } .col-sm-8[data-v-974e7ad8] { grid-column: span 8; } .col-sm-6[data-v-974e7ad8] { grid-column: span 6; } .col-sm-4[data-v-974e7ad8] { grid-column: span 4; } .col-sm-auto[data-v-974e7ad8] { grid-column: auto; } } .fade-enter-active[data-v-974e7ad8] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-974e7ad8] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-974e7ad8], .fade-leave-to[data-v-974e7ad8] { opacity: 0; } .language-selector[data-v-974e7ad8] { position: relative; } .language-selector__trigger[data-v-974e7ad8] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .language-selector__trigger[data-v-974e7ad8]:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } .language-selector__trigger[data-v-974e7ad8]:active { opacity: 0.8; } .language-selector__trigger--ghost[data-v-974e7ad8] { background: transparent; border-color: transparent; } .language-selector__trigger--ghost[data-v-974e7ad8]:hover { background: rgba(255, 255, 255, 0.06); border-color: transparent; } .language-selector--open .language-selector__trigger[data-v-974e7ad8] { background: rgba(255, 255, 255, 0.06); border-color: transparent; } .language-selector__flag[data-v-974e7ad8] { width: 16px; height: 12px; border-radius: 1px; overflow: hidden; } .language-selector__dropdown[data-v-974e7ad8] { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: linear-gradient(135deg, rgba(30, 32, 40, 0.98) 0%, rgba(24, 26, 32, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 6px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); z-index: 100; overflow: hidden; } .language-selector__list[data-v-974e7ad8] { display: flex; flex-direction: column; gap: 2px; } .language-selector__option[data-v-974e7ad8] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; text-align: left; } .language-selector__option[data-v-974e7ad8]:hover { background: rgba(255, 255, 255, 0.06); } .language-selector__option--active[data-v-974e7ad8] { background: rgba(var(--primary-500-rgb), 0.1); } .language-selector__option--active[data-v-974e7ad8]:hover { background: rgba(var(--primary-500-rgb), 0.15); } .language-selector__option-flag[data-v-974e7ad8] { width: 20px; height: 15px; border-radius: 2px; flex-shrink: 0; overflow: hidden; } .language-selector__option-name[data-v-974e7ad8] { flex: 1; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 13px; font-weight: 500; color: #e2e7ef; } .language-selector__option--active .language-selector__option-name[data-v-974e7ad8] { color: var(--primary-300); font-weight: 600; } .language-selector__option-check[data-v-974e7ad8] { color: var(--primary-400); flex-shrink: 0; } .language-selector .dropdown-enter-active[data-v-974e7ad8] { animation: dropdownIn-974e7ad8 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .language-selector .dropdown-leave-active[data-v-974e7ad8] { animation: dropdownOut-974e7ad8 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes dropdownIn-974e7ad8 { 0% { opacity: 0; transform: translateY(-8px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes dropdownOut-974e7ad8 { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-4px) scale(0.98); } } @media (max-width: 720px) { .language-selector__trigger[data-v-974e7ad8] { width: 32px; height: 32px; } .language-selector__flag[data-v-974e7ad8] { font-size: 16px; } .language-selector__dropdown[data-v-974e7ad8] { right: -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-a806bf08]: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-a806bf08] { /* 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-a806bf08] { /* 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-a806bf08]: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-a806bf08], .theme-mode-light[data-v-a806bf08] { /* ═══════════════════════════════════════════════════════════════ 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-a806bf08], .theme-mode-dark[data-v-a806bf08] { /* ═══════════════════════════════════════════════════════════════ 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-a806bf08]: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-a806bf08]: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-a806bf08] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-a806bf08] { 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-a806bf08]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-a806bf08], input[disabled][data-v-a806bf08] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-a806bf08] { opacity: 0.9; } input[readonly][data-v-a806bf08] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-a806bf08] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-a806bf08]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-a806bf08]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-a806bf08]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-a806bf08] { 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-a806bf08]:nth-child(odd), .list-card-desktop__wrapper[data-v-a806bf08]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-a806bf08]:nth-child(even), .list-card-desktop__wrapper[data-v-a806bf08]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-a806bf08]:nth-child(odd), .listCardDesktopWrapper[data-v-a806bf08]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-a806bf08]:nth-child(even), .listCardDesktopWrapper[data-v-a806bf08]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-a806bf08] { 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-a806bf08] { cursor: pointer; } .card-layout--selectionnable[data-v-a806bf08]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-a806bf08] { cursor: auto; } .card-layout--drawer[data-v-a806bf08] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-a806bf08] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-a806bf08] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-a806bf08] { 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-a806bf08] { 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-a806bf08] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-a806bf08]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-a806bf08] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-a806bf08] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-a806bf08] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-a806bf08] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-a806bf08] { 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-a806bf08] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-a806bf08] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-a806bf08] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-a806bf08] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-a806bf08] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-a806bf08] { background-color: #eb1515; } .color-chip--dossiers[data-v-a806bf08] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-a806bf08] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-a806bf08] { background-color: #00a79b; } .color-chip--virements[data-v-a806bf08] { background-color: var(--secondary-400); } .color-chip--factures[data-v-a806bf08] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-a806bf08] { background-color: #eb1515; } .color-recherche-dossiers[data-v-a806bf08] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-a806bf08] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-a806bf08] { background-color: #00a79b; } .color-recherche-virements[data-v-a806bf08] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-a806bf08] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-a806bf08] { color: #00a79b; cursor: pointer; } .scrollable[data-v-a806bf08] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-a806bf08] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-a806bf08] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-a806bf08] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-a806bf08] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-a806bf08] { font-weight: 800; } .grid-cell--column[data-v-a806bf08] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-a806bf08] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-a806bf08] { fill: #00a79b; } .grid-cell--disabled[data-v-a806bf08] { color: #cccccc; } .grid-cell--disabled svg[data-v-a806bf08] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-a806bf08] { white-space: nowrap; } .grid-cell--danger svg[data-v-a806bf08] { fill: #eb1515; } .grid-cell--span-1[data-v-a806bf08] { grid-column: span 1; } .grid-cell--span-2[data-v-a806bf08] { grid-column: span 2; } .grid-cell--span-3[data-v-a806bf08] { grid-column: span 3; } .grid-cell--span-4[data-v-a806bf08] { grid-column: span 4; } .grid-cell--span-5[data-v-a806bf08] { grid-column: span 5; } .grid-cell--span-6[data-v-a806bf08] { grid-column: span 6; } .grid-cell--span-7[data-v-a806bf08] { grid-column: span 7; } .grid-cell--span-8[data-v-a806bf08] { grid-column: span 8; } .grid-cell--span-9[data-v-a806bf08] { grid-column: span 9; } .grid-cell--span-10[data-v-a806bf08] { grid-column: span 10; } .grid-cell--span-12[data-v-a806bf08] { grid-column: span 12; } .grid-cell--span-13[data-v-a806bf08] { grid-column: span 13; } .grid-cell--span-14[data-v-a806bf08] { grid-column: span 14; } .grid-cell--span-16[data-v-a806bf08] { grid-column: span 16; } .grid-cell--span-18[data-v-a806bf08] { grid-column: span 18; } .grid-cell--span-20[data-v-a806bf08] { grid-column: span 20; } .grid-cell--span-32[data-v-a806bf08] { grid-column: span 32; } .grid-cell--span-36[data-v-a806bf08] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-a806bf08] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-a806bf08] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-a806bf08] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-a806bf08] { justify-content: center !important; } .elem--bold span[data-v-a806bf08] { font-weight: 800; } .elem--column[data-v-a806bf08] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-a806bf08] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-a806bf08] { fill: #00a79b; } .elem--clickable[data-v-a806bf08]:hover { cursor: pointer; } .elem--disabled[data-v-a806bf08] { color: #cccccc; } .elem--disabled svg[data-v-a806bf08] { fill: #cccccc; } .elem--nowrap span[data-v-a806bf08] { white-space: nowrap; } .elem--danger svg[data-v-a806bf08] { fill: #eb1515; } .elem--span-1[data-v-a806bf08] { grid-column: span 1; } .elem--span-2[data-v-a806bf08] { grid-column: span 2; } .elem--span-3[data-v-a806bf08] { grid-column: span 3; } .elem--span-4[data-v-a806bf08] { grid-column: span 4; } .elem--span-5[data-v-a806bf08] { grid-column: span 5; } .elem--span-6[data-v-a806bf08] { grid-column: span 6; } .elem--span-7[data-v-a806bf08] { grid-column: span 7; } .elem--span-8[data-v-a806bf08] { grid-column: span 8; } .elem--span-9[data-v-a806bf08] { grid-column: span 9; } .elem--span-10[data-v-a806bf08] { grid-column: span 10; } .elem--span-12[data-v-a806bf08] { grid-column: span 12; } .elem--span-13[data-v-a806bf08] { grid-column: span 13; } .elem--span-14[data-v-a806bf08] { grid-column: span 14; } .elem--span-16[data-v-a806bf08] { grid-column: span 16; } .elem--span-18[data-v-a806bf08] { grid-column: span 18; } .elem--span-20[data-v-a806bf08] { grid-column: span 20; } .elem--span-32[data-v-a806bf08] { grid-column: span 32; } .elem--span-36[data-v-a806bf08] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-a806bf08] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-a806bf08] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-a806bf08]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-a806bf08] { display: flex; } /* flex-direction */ .flex-column[data-v-a806bf08] { flex-direction: column; } .flex-row[data-v-a806bf08] { flex-direction: row; } /* flex */ .flex-1[data-v-a806bf08] { flex: 1 !important; } .flex-2[data-v-a806bf08] { flex: 2; } .flex-3[data-v-a806bf08] { flex: 3; } .flex-3[data-v-a806bf08] { flex: 4; } .flex-5[data-v-a806bf08] { flex: 5; } .flex-auto[data-v-a806bf08] { flex: auto; } .flex-none[data-v-a806bf08] { flex: none; } .flex-content[data-v-a806bf08] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-a806bf08] { flex-wrap: wrap; } .flex-nowrap[data-v-a806bf08] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-a806bf08] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-a806bf08] { justify-content: flex-start; } .justify-content-end[data-v-a806bf08] { justify-content: flex-end; } .justify-content-baseline[data-v-a806bf08] { justify-content: baseline; } .justify-content-center[data-v-a806bf08] { justify-content: center; } .justify-content-space-between[data-v-a806bf08] { justify-content: space-between; } .justify-content-space-around[data-v-a806bf08] { justify-content: space-around; } .justify-content-space-evenly[data-v-a806bf08] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-a806bf08] { align-items: flex-start; } .align-items-flex-end[data-v-a806bf08] { align-items: flex-end; } .align-items-stretch[data-v-a806bf08] { align-items: stretch; } .align-items-baseline[data-v-a806bf08] { align-items: baseline; } .align-items-center[data-v-a806bf08] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-a806bf08] { align-content: flex-start; } .align-content-flex-end[data-v-a806bf08] { align-content: flex-end; } .align-content-center[data-v-a806bf08] { align-content: center; } .align-content-stretch[data-v-a806bf08] { align-content: stretch; } .align-content-space-between[data-v-a806bf08] { align-content: space-between; } .align-content-space-around[data-v-a806bf08] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-a806bf08] { align-self: flex-start; } .align-self-flex-end[data-v-a806bf08] { align-self: flex-end; } .align-self-stretch[data-v-a806bf08] { align-self: stretch; } .align-self-flex-baseline[data-v-a806bf08] { align-self: baseline; } .align-self-center[data-v-a806bf08] { align-self: center; } .align-self-auto[data-v-a806bf08] { align-self: auto; } .flex-gap-1[data-v-a806bf08] { gap: 4px; } .flex-gap-2[data-v-a806bf08] { gap: 8px; } .flex-gap-3[data-v-a806bf08] { gap: 12px; } .flex-gap-4[data-v-a806bf08] { gap: 16px; } .flex-gap-5[data-v-a806bf08] { gap: 20px; } .flex-gap-6[data-v-a806bf08] { gap: 24px; } .flex-gap-7[data-v-a806bf08] { gap: 28px; } .flex-gap-8[data-v-a806bf08] { gap: 32px; } .flex-gap-10[data-v-a806bf08] { gap: 40px; } .flex-gap-12[data-v-a806bf08] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-a806bf08] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-a806bf08] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-a806bf08] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-a806bf08] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-a806bf08] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-a806bf08] { display: none !important; } } .col-none[data-v-a806bf08] { display: none; } .col-auto[data-v-a806bf08] { grid-column: auto; } .col-1[data-v-a806bf08] { grid-column: span 1; } .col-2[data-v-a806bf08] { grid-column: span 2; } .col-3[data-v-a806bf08] { grid-column: span 3; } .col-4[data-v-a806bf08] { grid-column: span 4; } .col-5[data-v-a806bf08] { grid-column: span 5; } .col-6[data-v-a806bf08] { grid-column: span 6; } .col-7[data-v-a806bf08] { grid-column: span 7; } .col-8[data-v-a806bf08] { grid-column: span 8; } .col-9[data-v-a806bf08] { grid-column: span 9; } .col-10[data-v-a806bf08] { grid-column: span 10; } .col-12[data-v-a806bf08] { grid-column: span 12; } .col-13[data-v-a806bf08] { grid-column: span 13; } .col-14[data-v-a806bf08] { grid-column: span 14; } .col-15[data-v-a806bf08] { grid-column: span 15; } .col-16[data-v-a806bf08] { grid-column: span 16; } .col-18[data-v-a806bf08] { grid-column: span 18; } .col-20[data-v-a806bf08] { grid-column: span 20; } .col-22[data-v-a806bf08] { grid-column: span 22; } .col-24[data-v-a806bf08] { grid-column: span 24; } .col-26[data-v-a806bf08] { grid-column: span 26; } .col-27[data-v-a806bf08] { grid-column: span 27; } .col-28[data-v-a806bf08] { grid-column: span 28; } .col-30[data-v-a806bf08] { grid-column: span 30; } .col-36[data-v-a806bf08] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-a806bf08] { display: none; } .col-md-36[data-v-a806bf08] { grid-column: span 36; } .col-md-28[data-v-a806bf08] { grid-column: span 28; } .col-md-27[data-v-a806bf08] { grid-column: span 27; } .col-md-24[data-v-a806bf08] { grid-column: span 24; } .col-md-22[data-v-a806bf08] { grid-column: span 22; } .col-md-20[data-v-a806bf08] { grid-column: span 20; } .col-md-19[data-v-a806bf08] { grid-column: span 19; } .col-md-18[data-v-a806bf08] { grid-column: span 18; } .col-md-17[data-v-a806bf08] { grid-column: span 17; } .col-md-16[data-v-a806bf08] { grid-column: span 16; } .col-md-15[data-v-a806bf08] { grid-column: span 15; } .col-md-14[data-v-a806bf08] { grid-column: span 14; } .col-md-13[data-v-a806bf08] { grid-column: span 13; } .col-md-12[data-v-a806bf08] { grid-column: span 12; } .col-md-10[data-v-a806bf08] { grid-column: span 10; } .col-md-9[data-v-a806bf08] { grid-column: span 9; } .col-md-8[data-v-a806bf08] { grid-column: span 8; } .col-md-6[data-v-a806bf08] { grid-column: span 6; } .col-md-5[data-v-a806bf08] { grid-column: span 5; } .col-md-4[data-v-a806bf08] { grid-column: span 4; } .col-md-3[data-v-a806bf08] { grid-column: span 3; } .col-md-2[data-v-a806bf08] { grid-column: span 2; } .col-md-1[data-v-a806bf08] { grid-column: span 1; } .col-md-auto[data-v-a806bf08] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-a806bf08] { display: none; } .col-sm-36[data-v-a806bf08] { grid-column: span 36; } .col-sm-32[data-v-a806bf08] { grid-column: span 32; } .col-sm-28[data-v-a806bf08] { grid-column: span 28; } .col-sm-27[data-v-a806bf08] { grid-column: span 27; } .col-sm-24[data-v-a806bf08] { grid-column: span 24; } .col-sm-22[data-v-a806bf08] { grid-column: span 22; } .col-sm-20[data-v-a806bf08] { grid-column: span 20; } .col-sm-18[data-v-a806bf08] { grid-column: span 18; } .col-sm-16[data-v-a806bf08] { grid-column: span 16; } .col-sm-15[data-v-a806bf08] { grid-column: span 15; } .col-sm-14[data-v-a806bf08] { grid-column: span 14; } .col-sm-13[data-v-a806bf08] { grid-column: span 12; } .col-sm-12[data-v-a806bf08] { grid-column: span 12; } .col-sm-10[data-v-a806bf08] { grid-column: span 10; } .col-sm-9[data-v-a806bf08] { grid-column: span 8; } .col-sm-8[data-v-a806bf08] { grid-column: span 8; } .col-sm-6[data-v-a806bf08] { grid-column: span 6; } .col-sm-4[data-v-a806bf08] { grid-column: span 4; } .col-sm-auto[data-v-a806bf08] { grid-column: auto; } } .fade-enter-active[data-v-a806bf08] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-a806bf08] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-a806bf08], .fade-leave-to[data-v-a806bf08] { opacity: 0; } .nav[data-v-a806bf08] { display: flex; align-items: center; } .nav--horizontal[data-v-a806bf08] { flex-direction: row; justify-content: center; gap: 4px; flex-wrap: nowrap; } .nav--horizontal .nav__link[data-v-a806bf08] { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 14px; font-weight: 500; color: #b4bfce; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; white-space: nowrap; } .nav--horizontal .nav__link[data-v-a806bf08]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .nav--horizontal .nav__link[data-v-a806bf08]:hover { color: #e2e7ef; } .nav--horizontal .nav__link[data-v-a806bf08]:hover::before { opacity: 1; } .nav--horizontal .nav__link:hover .nav__icon[data-v-a806bf08] { color: var(--primary-400); } .nav--horizontal .nav__link:hover .nav__glow[data-v-a806bf08] { opacity: 1; } .nav--horizontal .nav__link--active[data-v-a806bf08] { color: white; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.06); } .nav--horizontal .nav__link--active .nav__icon[data-v-a806bf08] { color: var(--primary-400); } .nav--horizontal .nav__link--active .nav__indicator[data-v-a806bf08] { transform: scaleX(1); opacity: 1; } .nav--horizontal .nav__link--active .nav__glow[data-v-a806bf08] { opacity: 0.5; } .nav--horizontal .nav__indicator[data-v-a806bf08] { position: absolute; bottom: 6px; left: 0; right: 0; margin: 0 auto; width: 20px; height: 3px; background: linear-gradient(90deg, var(--primary-400), var(--primary-500)); border-radius: 3px; opacity: 0; transform: scaleX(0); transform-origin: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @media (min-width: 1301px) { .nav--horizontal[data-v-a806bf08] { gap: 6px; } .nav--horizontal .nav__link[data-v-a806bf08] { padding: 10px 18px; font-size: 14px; } } @media (max-width: 1300px) and (min-width: 1101px) { .nav--horizontal[data-v-a806bf08] { gap: 4px; } .nav--horizontal .nav__link[data-v-a806bf08] { padding: 10px 14px; font-size: 13px; } } @media (max-width: 1100px) and (min-width: 1001px) { .nav--horizontal[data-v-a806bf08] { gap: 2px; } .nav--horizontal .nav__link[data-v-a806bf08] { padding: 8px 10px; font-size: 12px; } } @media (max-width: 1000px) and (min-width: 751px) { .nav--horizontal[data-v-a806bf08] { gap: 0; } .nav--horizontal .nav__link[data-v-a806bf08] { padding: 8px 8px; font-size: 11px; } } .nav--vertical[data-v-a806bf08] { flex-direction: column; gap: 8px; width: 100%; } .nav--vertical .nav__link[data-v-a806bf08] { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border-radius: 14px; text-decoration: none; font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif; font-size: 15px; font-weight: 500; color: #b4bfce; background: transparent; border: 1px solid transparent; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .nav--vertical .nav__link[data-v-a806bf08]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .nav--vertical .nav__link[data-v-a806bf08]:hover { color: #e2e7ef; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06); } .nav--vertical .nav__link[data-v-a806bf08]:hover::before { opacity: 1; } .nav--vertical .nav__link:hover .nav__icon[data-v-a806bf08] { color: var(--primary-400); transform: rotate(-3deg); } .nav--vertical .nav__link--active[data-v-a806bf08] { color: white; background: linear-gradient(135deg, rgba(var(--primary-500-rgb), 0.12) 0%, rgba(var(--primary-600-rgb), 0.08) 100%); border-color: rgba(var(--primary-500-rgb), 0.2); box-shadow: 0 4px 16px rgba(var(--primary-500-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .nav--vertical .nav__link--active .nav__icon[data-v-a806bf08] { color: var(--primary-400); } .nav--vertical .nav__link--active .nav__indicator[data-v-a806bf08] { transform: translateY(-50%) scaleY(1); opacity: 1; } .nav--vertical .nav__indicator[data-v-a806bf08] { position: absolute; top: 50%; left: 0; right: auto; bottom: auto; margin: 0; transform: translateY(-50%) scaleY(0); width: 4px; height: 24px; background: linear-gradient(180deg, var(--primary-400), var(--primary-500)); border-radius: 0 4px 4px 0; opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav__icon[data-v-a806bf08] { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #94a2b8; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; } .nav__label[data-v-a806bf08] { white-space: nowrap; transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .nav__glow[data-v-a806bf08] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: radial-gradient(circle, rgba(var(--primary-500-rgb), 0.15) 0%, transparent 70%); opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes pulse-indicator-a806bf08 { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-500-rgb), 0.4); } 50% { box-shadow: 0 0 0 4px rgba(var(--primary-500-rgb), 0); } } .nav__link--active .nav__indicator[data-v-a806bf08] { animation: pulse-indicator-a806bf08 2s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════════ 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-a96fd191]: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-a96fd191] { /* 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-a96fd191] { /* 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-a96fd191]: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-a96fd191], .theme-mode-light[data-v-a96fd191] { /* ═══════════════════════════════════════════════════════════════ 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-a96fd191], .theme-mode-dark[data-v-a96fd191] { /* ═══════════════════════════════════════════════════════════════ 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-a96fd191]: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-a96fd191]: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-a96fd191] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-a96fd191] { 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-a96fd191]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-a96fd191], input[disabled][data-v-a96fd191] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-a96fd191] { opacity: 0.9; } input[readonly][data-v-a96fd191] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-a96fd191] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-a96fd191]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-a96fd191]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-a96fd191]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-a96fd191] { 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-a96fd191]:nth-child(odd), .list-card-desktop__wrapper[data-v-a96fd191]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-a96fd191]:nth-child(even), .list-card-desktop__wrapper[data-v-a96fd191]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-a96fd191]:nth-child(odd), .listCardDesktopWrapper[data-v-a96fd191]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-a96fd191]:nth-child(even), .listCardDesktopWrapper[data-v-a96fd191]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-a96fd191] { 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-a96fd191] { cursor: pointer; } .card-layout--selectionnable[data-v-a96fd191]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-a96fd191] { cursor: auto; } .card-layout--drawer[data-v-a96fd191] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-a96fd191] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-a96fd191] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-a96fd191] { 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-a96fd191] { 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-a96fd191] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-a96fd191]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-a96fd191] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-a96fd191] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-a96fd191] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-a96fd191] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-a96fd191] { 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-a96fd191] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-a96fd191] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-a96fd191] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-a96fd191] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-a96fd191] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-a96fd191] { background-color: #eb1515; } .color-chip--dossiers[data-v-a96fd191] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-a96fd191] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-a96fd191] { background-color: #00a79b; } .color-chip--virements[data-v-a96fd191] { background-color: var(--secondary-400); } .color-chip--factures[data-v-a96fd191] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-a96fd191] { background-color: #eb1515; } .color-recherche-dossiers[data-v-a96fd191] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-a96fd191] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-a96fd191] { background-color: #00a79b; } .color-recherche-virements[data-v-a96fd191] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-a96fd191] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-a96fd191] { color: #00a79b; cursor: pointer; } .scrollable[data-v-a96fd191] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-a96fd191] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-a96fd191] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-a96fd191] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-a96fd191] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-a96fd191] { font-weight: 800; } .grid-cell--column[data-v-a96fd191] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-a96fd191] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-a96fd191] { fill: #00a79b; } .grid-cell--disabled[data-v-a96fd191] { color: #cccccc; } .grid-cell--disabled svg[data-v-a96fd191] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-a96fd191] { white-space: nowrap; } .grid-cell--danger svg[data-v-a96fd191] { fill: #eb1515; } .grid-cell--span-1[data-v-a96fd191] { grid-column: span 1; } .grid-cell--span-2[data-v-a96fd191] { grid-column: span 2; } .grid-cell--span-3[data-v-a96fd191] { grid-column: span 3; } .grid-cell--span-4[data-v-a96fd191] { grid-column: span 4; } .grid-cell--span-5[data-v-a96fd191] { grid-column: span 5; } .grid-cell--span-6[data-v-a96fd191] { grid-column: span 6; } .grid-cell--span-7[data-v-a96fd191] { grid-column: span 7; } .grid-cell--span-8[data-v-a96fd191] { grid-column: span 8; } .grid-cell--span-9[data-v-a96fd191] { grid-column: span 9; } .grid-cell--span-10[data-v-a96fd191] { grid-column: span 10; } .grid-cell--span-12[data-v-a96fd191] { grid-column: span 12; } .grid-cell--span-13[data-v-a96fd191] { grid-column: span 13; } .grid-cell--span-14[data-v-a96fd191] { grid-column: span 14; } .grid-cell--span-16[data-v-a96fd191] { grid-column: span 16; } .grid-cell--span-18[data-v-a96fd191] { grid-column: span 18; } .grid-cell--span-20[data-v-a96fd191] { grid-column: span 20; } .grid-cell--span-32[data-v-a96fd191] { grid-column: span 32; } .grid-cell--span-36[data-v-a96fd191] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-a96fd191] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-a96fd191] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-a96fd191] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-a96fd191] { justify-content: center !important; } .elem--bold span[data-v-a96fd191] { font-weight: 800; } .elem--column[data-v-a96fd191] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-a96fd191] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-a96fd191] { fill: #00a79b; } .elem--clickable[data-v-a96fd191]:hover { cursor: pointer; } .elem--disabled[data-v-a96fd191] { color: #cccccc; } .elem--disabled svg[data-v-a96fd191] { fill: #cccccc; } .elem--nowrap span[data-v-a96fd191] { white-space: nowrap; } .elem--danger svg[data-v-a96fd191] { fill: #eb1515; } .elem--span-1[data-v-a96fd191] { grid-column: span 1; } .elem--span-2[data-v-a96fd191] { grid-column: span 2; } .elem--span-3[data-v-a96fd191] { grid-column: span 3; } .elem--span-4[data-v-a96fd191] { grid-column: span 4; } .elem--span-5[data-v-a96fd191] { grid-column: span 5; } .elem--span-6[data-v-a96fd191] { grid-column: span 6; } .elem--span-7[data-v-a96fd191] { grid-column: span 7; } .elem--span-8[data-v-a96fd191] { grid-column: span 8; } .elem--span-9[data-v-a96fd191] { grid-column: span 9; } .elem--span-10[data-v-a96fd191] { grid-column: span 10; } .elem--span-12[data-v-a96fd191] { grid-column: span 12; } .elem--span-13[data-v-a96fd191] { grid-column: span 13; } .elem--span-14[data-v-a96fd191] { grid-column: span 14; } .elem--span-16[data-v-a96fd191] { grid-column: span 16; } .elem--span-18[data-v-a96fd191] { grid-column: span 18; } .elem--span-20[data-v-a96fd191] { grid-column: span 20; } .elem--span-32[data-v-a96fd191] { grid-column: span 32; } .elem--span-36[data-v-a96fd191] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-a96fd191] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-a96fd191] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-a96fd191]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-a96fd191] { display: flex; } /* flex-direction */ .flex-column[data-v-a96fd191] { flex-direction: column; } .flex-row[data-v-a96fd191] { flex-direction: row; } /* flex */ .flex-1[data-v-a96fd191] { flex: 1 !important; } .flex-2[data-v-a96fd191] { flex: 2; } .flex-3[data-v-a96fd191] { flex: 3; } .flex-3[data-v-a96fd191] { flex: 4; } .flex-5[data-v-a96fd191] { flex: 5; } .flex-auto[data-v-a96fd191] { flex: auto; } .flex-none[data-v-a96fd191] { flex: none; } .flex-content[data-v-a96fd191] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-a96fd191] { flex-wrap: wrap; } .flex-nowrap[data-v-a96fd191] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-a96fd191] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-a96fd191] { justify-content: flex-start; } .justify-content-end[data-v-a96fd191] { justify-content: flex-end; } .justify-content-baseline[data-v-a96fd191] { justify-content: baseline; } .justify-content-center[data-v-a96fd191] { justify-content: center; } .justify-content-space-between[data-v-a96fd191] { justify-content: space-between; } .justify-content-space-around[data-v-a96fd191] { justify-content: space-around; } .justify-content-space-evenly[data-v-a96fd191] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-a96fd191] { align-items: flex-start; } .align-items-flex-end[data-v-a96fd191] { align-items: flex-end; } .align-items-stretch[data-v-a96fd191] { align-items: stretch; } .align-items-baseline[data-v-a96fd191] { align-items: baseline; } .align-items-center[data-v-a96fd191] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-a96fd191] { align-content: flex-start; } .align-content-flex-end[data-v-a96fd191] { align-content: flex-end; } .align-content-center[data-v-a96fd191] { align-content: center; } .align-content-stretch[data-v-a96fd191] { align-content: stretch; } .align-content-space-between[data-v-a96fd191] { align-content: space-between; } .align-content-space-around[data-v-a96fd191] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-a96fd191] { align-self: flex-start; } .align-self-flex-end[data-v-a96fd191] { align-self: flex-end; } .align-self-stretch[data-v-a96fd191] { align-self: stretch; } .align-self-flex-baseline[data-v-a96fd191] { align-self: baseline; } .align-self-center[data-v-a96fd191] { align-self: center; } .align-self-auto[data-v-a96fd191] { align-self: auto; } .flex-gap-1[data-v-a96fd191] { gap: 4px; } .flex-gap-2[data-v-a96fd191] { gap: 8px; } .flex-gap-3[data-v-a96fd191] { gap: 12px; } .flex-gap-4[data-v-a96fd191] { gap: 16px; } .flex-gap-5[data-v-a96fd191] { gap: 20px; } .flex-gap-6[data-v-a96fd191] { gap: 24px; } .flex-gap-7[data-v-a96fd191] { gap: 28px; } .flex-gap-8[data-v-a96fd191] { gap: 32px; } .flex-gap-10[data-v-a96fd191] { gap: 40px; } .flex-gap-12[data-v-a96fd191] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-a96fd191] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-a96fd191] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-a96fd191] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-a96fd191] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-a96fd191] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-a96fd191] { display: none !important; } } .col-none[data-v-a96fd191] { display: none; } .col-auto[data-v-a96fd191] { grid-column: auto; } .col-1[data-v-a96fd191] { grid-column: span 1; } .col-2[data-v-a96fd191] { grid-column: span 2; } .col-3[data-v-a96fd191] { grid-column: span 3; } .col-4[data-v-a96fd191] { grid-column: span 4; } .col-5[data-v-a96fd191] { grid-column: span 5; } .col-6[data-v-a96fd191] { grid-column: span 6; } .col-7[data-v-a96fd191] { grid-column: span 7; } .col-8[data-v-a96fd191] { grid-column: span 8; } .col-9[data-v-a96fd191] { grid-column: span 9; } .col-10[data-v-a96fd191] { grid-column: span 10; } .col-12[data-v-a96fd191] { grid-column: span 12; } .col-13[data-v-a96fd191] { grid-column: span 13; } .col-14[data-v-a96fd191] { grid-column: span 14; } .col-15[data-v-a96fd191] { grid-column: span 15; } .col-16[data-v-a96fd191] { grid-column: span 16; } .col-18[data-v-a96fd191] { grid-column: span 18; } .col-20[data-v-a96fd191] { grid-column: span 20; } .col-22[data-v-a96fd191] { grid-column: span 22; } .col-24[data-v-a96fd191] { grid-column: span 24; } .col-26[data-v-a96fd191] { grid-column: span 26; } .col-27[data-v-a96fd191] { grid-column: span 27; } .col-28[data-v-a96fd191] { grid-column: span 28; } .col-30[data-v-a96fd191] { grid-column: span 30; } .col-36[data-v-a96fd191] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-a96fd191] { display: none; } .col-md-36[data-v-a96fd191] { grid-column: span 36; } .col-md-28[data-v-a96fd191] { grid-column: span 28; } .col-md-27[data-v-a96fd191] { grid-column: span 27; } .col-md-24[data-v-a96fd191] { grid-column: span 24; } .col-md-22[data-v-a96fd191] { grid-column: span 22; } .col-md-20[data-v-a96fd191] { grid-column: span 20; } .col-md-19[data-v-a96fd191] { grid-column: span 19; } .col-md-18[data-v-a96fd191] { grid-column: span 18; } .col-md-17[data-v-a96fd191] { grid-column: span 17; } .col-md-16[data-v-a96fd191] { grid-column: span 16; } .col-md-15[data-v-a96fd191] { grid-column: span 15; } .col-md-14[data-v-a96fd191] { grid-column: span 14; } .col-md-13[data-v-a96fd191] { grid-column: span 13; } .col-md-12[data-v-a96fd191] { grid-column: span 12; } .col-md-10[data-v-a96fd191] { grid-column: span 10; } .col-md-9[data-v-a96fd191] { grid-column: span 9; } .col-md-8[data-v-a96fd191] { grid-column: span 8; } .col-md-6[data-v-a96fd191] { grid-column: span 6; } .col-md-5[data-v-a96fd191] { grid-column: span 5; } .col-md-4[data-v-a96fd191] { grid-column: span 4; } .col-md-3[data-v-a96fd191] { grid-column: span 3; } .col-md-2[data-v-a96fd191] { grid-column: span 2; } .col-md-1[data-v-a96fd191] { grid-column: span 1; } .col-md-auto[data-v-a96fd191] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-a96fd191] { display: none; } .col-sm-36[data-v-a96fd191] { grid-column: span 36; } .col-sm-32[data-v-a96fd191] { grid-column: span 32; } .col-sm-28[data-v-a96fd191] { grid-column: span 28; } .col-sm-27[data-v-a96fd191] { grid-column: span 27; } .col-sm-24[data-v-a96fd191] { grid-column: span 24; } .col-sm-22[data-v-a96fd191] { grid-column: span 22; } .col-sm-20[data-v-a96fd191] { grid-column: span 20; } .col-sm-18[data-v-a96fd191] { grid-column: span 18; } .col-sm-16[data-v-a96fd191] { grid-column: span 16; } .col-sm-15[data-v-a96fd191] { grid-column: span 15; } .col-sm-14[data-v-a96fd191] { grid-column: span 14; } .col-sm-13[data-v-a96fd191] { grid-column: span 12; } .col-sm-12[data-v-a96fd191] { grid-column: span 12; } .col-sm-10[data-v-a96fd191] { grid-column: span 10; } .col-sm-9[data-v-a96fd191] { grid-column: span 8; } .col-sm-8[data-v-a96fd191] { grid-column: span 8; } .col-sm-6[data-v-a96fd191] { grid-column: span 6; } .col-sm-4[data-v-a96fd191] { grid-column: span 4; } .col-sm-auto[data-v-a96fd191] { grid-column: auto; } } .fade-enter-active[data-v-a96fd191] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-a96fd191] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-a96fd191], .fade-leave-to[data-v-a96fd191] { opacity: 0; } /* ============================ 🔵 OVERLAY (fond sombre Neural) ============================ */ .mobile-overlay[data-v-a96fd191] { position: fixed; inset: 0; background: rgba(var(--secondary-900-rgb), 0.65); backdrop-filter: blur(6px); z-index: 2000; display: flex; justify-content: flex-start; } /* ============================ 🔵 DRAWER (glass panel Neural) ============================ */ .mobile-drawer[data-v-a96fd191] { width: 270px; height: 100vh; /* Fond en verre bleu sombre */ background: rgba(var(--secondary-900-rgb), 0.92); backdrop-filter: blur(12px); color: white; /* Ombres plus propres, moins noires */ box-shadow: 3px 0 22px rgba(var(--primary-950-rgb), 0.45), inset -3px 0 10px rgba(255, 255, 255, 0.04); border-top-right-radius: 20px; border-bottom-right-radius: 20px; padding: 26px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, #94a2b8 30%, transparent) transparent; } /* ============================ HEADER ============================ */ .drawer-header[data-v-a96fd191] { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .drawer-header .drawer-logo[data-v-a96fd191] { width: 30px; height: 30px; filter: drop-shadow(0 0 4px rgba(var(--primary-700-rgb), 0.4)); } /* ============================ LINKS ============================ */ .drawer-links[data-v-a96fd191] { display: flex; flex-direction: column; gap: 10px; width: 100%; } /* Ligne séparatrice Neural */ .drawer-divider[data-v-a96fd191] { height: 1px; background: color-mix(in srgb, #94a2b8 25%, transparent); margin: 16px 0; } .drawer-link[data-v-a96fd191] { background: none; border: none; color: #f8f9fb; text-align: left; padding: 8px 0; font-size: 16px; cursor: pointer; transition: all 0.25s ease; } .drawer-link[data-v-a96fd191]:hover { color: var(--primary-300); transform: translateX(4px); } /* ============================ AUTH BUTTONS AREA ============================ */ .drawer-auth[data-v-a96fd191] { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } /* ============================ TRANSITIONS ============================ */ .slide-left-enter-active[data-v-a96fd191], .slide-left-leave-active[data-v-a96fd191] { transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .slide-left-enter-from[data-v-a96fd191] { opacity: 0; transform: translateX(-20%); filter: blur(8px); } .slide-left-leave-to[data-v-a96fd191] { opacity: 0; transform: translateX(-16%); filter: blur(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-0f387ca8]: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-0f387ca8] { /* 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-0f387ca8] { /* 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-0f387ca8]: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-0f387ca8], .theme-mode-light[data-v-0f387ca8] { /* ═══════════════════════════════════════════════════════════════ 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-0f387ca8], .theme-mode-dark[data-v-0f387ca8] { /* ═══════════════════════════════════════════════════════════════ 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-0f387ca8]: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-0f387ca8]: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-0f387ca8] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-0f387ca8] { 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-0f387ca8]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-0f387ca8], input[disabled][data-v-0f387ca8] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-0f387ca8] { opacity: 0.9; } input[readonly][data-v-0f387ca8] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-0f387ca8] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-0f387ca8]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-0f387ca8]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-0f387ca8]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-0f387ca8] { 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-0f387ca8]:nth-child(odd), .list-card-desktop__wrapper[data-v-0f387ca8]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-0f387ca8]:nth-child(even), .list-card-desktop__wrapper[data-v-0f387ca8]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-0f387ca8]:nth-child(odd), .listCardDesktopWrapper[data-v-0f387ca8]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-0f387ca8]:nth-child(even), .listCardDesktopWrapper[data-v-0f387ca8]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-0f387ca8] { 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-0f387ca8] { cursor: pointer; } .card-layout--selectionnable[data-v-0f387ca8]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-0f387ca8] { cursor: auto; } .card-layout--drawer[data-v-0f387ca8] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-0f387ca8] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-0f387ca8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-0f387ca8] { 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-0f387ca8] { 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-0f387ca8] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-0f387ca8]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-0f387ca8] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-0f387ca8] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-0f387ca8] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-0f387ca8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-0f387ca8] { 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-0f387ca8] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-0f387ca8] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-0f387ca8] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-0f387ca8] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-0f387ca8] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-0f387ca8] { background-color: #eb1515; } .color-chip--dossiers[data-v-0f387ca8] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-0f387ca8] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-0f387ca8] { background-color: #00a79b; } .color-chip--virements[data-v-0f387ca8] { background-color: var(--secondary-400); } .color-chip--factures[data-v-0f387ca8] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-0f387ca8] { background-color: #eb1515; } .color-recherche-dossiers[data-v-0f387ca8] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-0f387ca8] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-0f387ca8] { background-color: #00a79b; } .color-recherche-virements[data-v-0f387ca8] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-0f387ca8] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-0f387ca8] { color: #00a79b; cursor: pointer; } .scrollable[data-v-0f387ca8] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-0f387ca8] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-0f387ca8] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-0f387ca8] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-0f387ca8] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-0f387ca8] { font-weight: 800; } .grid-cell--column[data-v-0f387ca8] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-0f387ca8] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-0f387ca8] { fill: #00a79b; } .grid-cell--disabled[data-v-0f387ca8] { color: #cccccc; } .grid-cell--disabled svg[data-v-0f387ca8] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-0f387ca8] { white-space: nowrap; } .grid-cell--danger svg[data-v-0f387ca8] { fill: #eb1515; } .grid-cell--span-1[data-v-0f387ca8] { grid-column: span 1; } .grid-cell--span-2[data-v-0f387ca8] { grid-column: span 2; } .grid-cell--span-3[data-v-0f387ca8] { grid-column: span 3; } .grid-cell--span-4[data-v-0f387ca8] { grid-column: span 4; } .grid-cell--span-5[data-v-0f387ca8] { grid-column: span 5; } .grid-cell--span-6[data-v-0f387ca8] { grid-column: span 6; } .grid-cell--span-7[data-v-0f387ca8] { grid-column: span 7; } .grid-cell--span-8[data-v-0f387ca8] { grid-column: span 8; } .grid-cell--span-9[data-v-0f387ca8] { grid-column: span 9; } .grid-cell--span-10[data-v-0f387ca8] { grid-column: span 10; } .grid-cell--span-12[data-v-0f387ca8] { grid-column: span 12; } .grid-cell--span-13[data-v-0f387ca8] { grid-column: span 13; } .grid-cell--span-14[data-v-0f387ca8] { grid-column: span 14; } .grid-cell--span-16[data-v-0f387ca8] { grid-column: span 16; } .grid-cell--span-18[data-v-0f387ca8] { grid-column: span 18; } .grid-cell--span-20[data-v-0f387ca8] { grid-column: span 20; } .grid-cell--span-32[data-v-0f387ca8] { grid-column: span 32; } .grid-cell--span-36[data-v-0f387ca8] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-0f387ca8] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-0f387ca8] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-0f387ca8] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-0f387ca8] { justify-content: center !important; } .elem--bold span[data-v-0f387ca8] { font-weight: 800; } .elem--column[data-v-0f387ca8] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-0f387ca8] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-0f387ca8] { fill: #00a79b; } .elem--clickable[data-v-0f387ca8]:hover { cursor: pointer; } .elem--disabled[data-v-0f387ca8] { color: #cccccc; } .elem--disabled svg[data-v-0f387ca8] { fill: #cccccc; } .elem--nowrap span[data-v-0f387ca8] { white-space: nowrap; } .elem--danger svg[data-v-0f387ca8] { fill: #eb1515; } .elem--span-1[data-v-0f387ca8] { grid-column: span 1; } .elem--span-2[data-v-0f387ca8] { grid-column: span 2; } .elem--span-3[data-v-0f387ca8] { grid-column: span 3; } .elem--span-4[data-v-0f387ca8] { grid-column: span 4; } .elem--span-5[data-v-0f387ca8] { grid-column: span 5; } .elem--span-6[data-v-0f387ca8] { grid-column: span 6; } .elem--span-7[data-v-0f387ca8] { grid-column: span 7; } .elem--span-8[data-v-0f387ca8] { grid-column: span 8; } .elem--span-9[data-v-0f387ca8] { grid-column: span 9; } .elem--span-10[data-v-0f387ca8] { grid-column: span 10; } .elem--span-12[data-v-0f387ca8] { grid-column: span 12; } .elem--span-13[data-v-0f387ca8] { grid-column: span 13; } .elem--span-14[data-v-0f387ca8] { grid-column: span 14; } .elem--span-16[data-v-0f387ca8] { grid-column: span 16; } .elem--span-18[data-v-0f387ca8] { grid-column: span 18; } .elem--span-20[data-v-0f387ca8] { grid-column: span 20; } .elem--span-32[data-v-0f387ca8] { grid-column: span 32; } .elem--span-36[data-v-0f387ca8] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-0f387ca8] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-0f387ca8] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-0f387ca8]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-0f387ca8] { display: flex; } /* flex-direction */ .flex-column[data-v-0f387ca8] { flex-direction: column; } .flex-row[data-v-0f387ca8] { flex-direction: row; } /* flex */ .flex-1[data-v-0f387ca8] { flex: 1 !important; } .flex-2[data-v-0f387ca8] { flex: 2; } .flex-3[data-v-0f387ca8] { flex: 3; } .flex-3[data-v-0f387ca8] { flex: 4; } .flex-5[data-v-0f387ca8] { flex: 5; } .flex-auto[data-v-0f387ca8] { flex: auto; } .flex-none[data-v-0f387ca8] { flex: none; } .flex-content[data-v-0f387ca8] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-0f387ca8] { flex-wrap: wrap; } .flex-nowrap[data-v-0f387ca8] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-0f387ca8] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-0f387ca8] { justify-content: flex-start; } .justify-content-end[data-v-0f387ca8] { justify-content: flex-end; } .justify-content-baseline[data-v-0f387ca8] { justify-content: baseline; } .justify-content-center[data-v-0f387ca8] { justify-content: center; } .justify-content-space-between[data-v-0f387ca8] { justify-content: space-between; } .justify-content-space-around[data-v-0f387ca8] { justify-content: space-around; } .justify-content-space-evenly[data-v-0f387ca8] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-0f387ca8] { align-items: flex-start; } .align-items-flex-end[data-v-0f387ca8] { align-items: flex-end; } .align-items-stretch[data-v-0f387ca8] { align-items: stretch; } .align-items-baseline[data-v-0f387ca8] { align-items: baseline; } .align-items-center[data-v-0f387ca8] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-0f387ca8] { align-content: flex-start; } .align-content-flex-end[data-v-0f387ca8] { align-content: flex-end; } .align-content-center[data-v-0f387ca8] { align-content: center; } .align-content-stretch[data-v-0f387ca8] { align-content: stretch; } .align-content-space-between[data-v-0f387ca8] { align-content: space-between; } .align-content-space-around[data-v-0f387ca8] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-0f387ca8] { align-self: flex-start; } .align-self-flex-end[data-v-0f387ca8] { align-self: flex-end; } .align-self-stretch[data-v-0f387ca8] { align-self: stretch; } .align-self-flex-baseline[data-v-0f387ca8] { align-self: baseline; } .align-self-center[data-v-0f387ca8] { align-self: center; } .align-self-auto[data-v-0f387ca8] { align-self: auto; } .flex-gap-1[data-v-0f387ca8] { gap: 4px; } .flex-gap-2[data-v-0f387ca8] { gap: 8px; } .flex-gap-3[data-v-0f387ca8] { gap: 12px; } .flex-gap-4[data-v-0f387ca8] { gap: 16px; } .flex-gap-5[data-v-0f387ca8] { gap: 20px; } .flex-gap-6[data-v-0f387ca8] { gap: 24px; } .flex-gap-7[data-v-0f387ca8] { gap: 28px; } .flex-gap-8[data-v-0f387ca8] { gap: 32px; } .flex-gap-10[data-v-0f387ca8] { gap: 40px; } .flex-gap-12[data-v-0f387ca8] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-0f387ca8] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-0f387ca8] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-0f387ca8] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-0f387ca8] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-0f387ca8] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-0f387ca8] { display: none !important; } } .col-none[data-v-0f387ca8] { display: none; } .col-auto[data-v-0f387ca8] { grid-column: auto; } .col-1[data-v-0f387ca8] { grid-column: span 1; } .col-2[data-v-0f387ca8] { grid-column: span 2; } .col-3[data-v-0f387ca8] { grid-column: span 3; } .col-4[data-v-0f387ca8] { grid-column: span 4; } .col-5[data-v-0f387ca8] { grid-column: span 5; } .col-6[data-v-0f387ca8] { grid-column: span 6; } .col-7[data-v-0f387ca8] { grid-column: span 7; } .col-8[data-v-0f387ca8] { grid-column: span 8; } .col-9[data-v-0f387ca8] { grid-column: span 9; } .col-10[data-v-0f387ca8] { grid-column: span 10; } .col-12[data-v-0f387ca8] { grid-column: span 12; } .col-13[data-v-0f387ca8] { grid-column: span 13; } .col-14[data-v-0f387ca8] { grid-column: span 14; } .col-15[data-v-0f387ca8] { grid-column: span 15; } .col-16[data-v-0f387ca8] { grid-column: span 16; } .col-18[data-v-0f387ca8] { grid-column: span 18; } .col-20[data-v-0f387ca8] { grid-column: span 20; } .col-22[data-v-0f387ca8] { grid-column: span 22; } .col-24[data-v-0f387ca8] { grid-column: span 24; } .col-26[data-v-0f387ca8] { grid-column: span 26; } .col-27[data-v-0f387ca8] { grid-column: span 27; } .col-28[data-v-0f387ca8] { grid-column: span 28; } .col-30[data-v-0f387ca8] { grid-column: span 30; } .col-36[data-v-0f387ca8] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-0f387ca8] { display: none; } .col-md-36[data-v-0f387ca8] { grid-column: span 36; } .col-md-28[data-v-0f387ca8] { grid-column: span 28; } .col-md-27[data-v-0f387ca8] { grid-column: span 27; } .col-md-24[data-v-0f387ca8] { grid-column: span 24; } .col-md-22[data-v-0f387ca8] { grid-column: span 22; } .col-md-20[data-v-0f387ca8] { grid-column: span 20; } .col-md-19[data-v-0f387ca8] { grid-column: span 19; } .col-md-18[data-v-0f387ca8] { grid-column: span 18; } .col-md-17[data-v-0f387ca8] { grid-column: span 17; } .col-md-16[data-v-0f387ca8] { grid-column: span 16; } .col-md-15[data-v-0f387ca8] { grid-column: span 15; } .col-md-14[data-v-0f387ca8] { grid-column: span 14; } .col-md-13[data-v-0f387ca8] { grid-column: span 13; } .col-md-12[data-v-0f387ca8] { grid-column: span 12; } .col-md-10[data-v-0f387ca8] { grid-column: span 10; } .col-md-9[data-v-0f387ca8] { grid-column: span 9; } .col-md-8[data-v-0f387ca8] { grid-column: span 8; } .col-md-6[data-v-0f387ca8] { grid-column: span 6; } .col-md-5[data-v-0f387ca8] { grid-column: span 5; } .col-md-4[data-v-0f387ca8] { grid-column: span 4; } .col-md-3[data-v-0f387ca8] { grid-column: span 3; } .col-md-2[data-v-0f387ca8] { grid-column: span 2; } .col-md-1[data-v-0f387ca8] { grid-column: span 1; } .col-md-auto[data-v-0f387ca8] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-0f387ca8] { display: none; } .col-sm-36[data-v-0f387ca8] { grid-column: span 36; } .col-sm-32[data-v-0f387ca8] { grid-column: span 32; } .col-sm-28[data-v-0f387ca8] { grid-column: span 28; } .col-sm-27[data-v-0f387ca8] { grid-column: span 27; } .col-sm-24[data-v-0f387ca8] { grid-column: span 24; } .col-sm-22[data-v-0f387ca8] { grid-column: span 22; } .col-sm-20[data-v-0f387ca8] { grid-column: span 20; } .col-sm-18[data-v-0f387ca8] { grid-column: span 18; } .col-sm-16[data-v-0f387ca8] { grid-column: span 16; } .col-sm-15[data-v-0f387ca8] { grid-column: span 15; } .col-sm-14[data-v-0f387ca8] { grid-column: span 14; } .col-sm-13[data-v-0f387ca8] { grid-column: span 12; } .col-sm-12[data-v-0f387ca8] { grid-column: span 12; } .col-sm-10[data-v-0f387ca8] { grid-column: span 10; } .col-sm-9[data-v-0f387ca8] { grid-column: span 8; } .col-sm-8[data-v-0f387ca8] { grid-column: span 8; } .col-sm-6[data-v-0f387ca8] { grid-column: span 6; } .col-sm-4[data-v-0f387ca8] { grid-column: span 4; } .col-sm-auto[data-v-0f387ca8] { grid-column: auto; } } .fade-enter-active[data-v-0f387ca8] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-0f387ca8] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-0f387ca8], .fade-leave-to[data-v-0f387ca8] { opacity: 0; } .navbar[data-v-0f387ca8] { position: relative; z-index: 1000; height: 68px; } .navbar__bg[data-v-0f387ca8] { position: absolute; inset: 0; overflow: hidden; } .navbar__bg-gradient[data-v-0f387ca8] { position: absolute; inset: 0; background: linear-gradient(90deg, var(--chrome-bg-gradient-end) 0%, var(--chrome-bg) 50%, var(--chrome-bg-gradient-end) 100%); transition: background 0.3s ease; } .navbar__bg-shine[data-v-0f387ca8] { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--chrome-border-subtle) 20%, var(--chrome-border) 50%, var(--chrome-border-subtle) 80%, transparent 100%); } .navbar__container[data-v-0f387ca8] { position: relative; z-index: 1; height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .navbar__left[data-v-0f387ca8] { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .navbar__center[data-v-0f387ca8] { flex: 1; display: flex; justify-content: center; min-width: 0; } .navbar__search[data-v-0f387ca8] { flex: 1; display: flex; align-items: center; min-width: 0; max-width: 400px; margin: 0 12px; } .navbar__right[data-v-0f387ca8] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .navbar__icon-btn[data-v-0f387ca8] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--chrome-hover); border: 1px solid var(--chrome-border); border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .navbar__icon-btn[data-v-0f387ca8]:hover { background: var(--chrome-active); border-color: var(--chrome-border); } .navbar__icon-btn[data-v-0f387ca8]:active { opacity: 0.8; } .navbar__icon-btn--ghost[data-v-0f387ca8] { background: transparent; border-color: transparent; } .navbar__icon-btn--ghost[data-v-0f387ca8]:hover { background: var(--chrome-hover); border-color: transparent; } .navbar__theme-toggle[data-v-0f387ca8] { background: rgba(var(--warning-500-rgb), 0.15) !important; border-color: rgba(var(--warning-500-rgb), 0.3) !important; } .navbar__theme-toggle[data-v-0f387ca8]:hover { background: rgba(var(--warning-500-rgb), 0.25) !important; } .navbar__burger[data-v-0f387ca8] { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 8px; background: var(--chrome-hover); border: 1px solid var(--chrome-border); border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .navbar__burger[data-v-0f387ca8]:hover { background: var(--chrome-active); border-color: var(--chrome-border); } .navbar__burger[data-v-0f387ca8]:active { opacity: 0.8; } .navbar__burger-line[data-v-0f387ca8] { width: 100%; height: 2px; background: var(--chrome-text); border-radius: 1px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .navbar__burger--open .navbar__burger-line[data-v-0f387ca8]:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__burger--open .navbar__burger-line[data-v-0f387ca8]:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar__burger--open .navbar__burger-line[data-v-0f387ca8]:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 1301px) { .navbar__container[data-v-0f387ca8] { padding: 0 32px; gap: 32px; } } @media (max-width: 1160px) { .navbar__container[data-v-0f387ca8] { gap: 20px; padding: 0 20px; } } @media (max-width: 720px) { .navbar[data-v-0f387ca8] { height: 60px; } .navbar__container[data-v-0f387ca8] { padding: 0 16px; gap: 8px; } .navbar__icon-btn[data-v-0f387ca8] { width: 36px; height: 36px; } .navbar__burger[data-v-0f387ca8] { width: 40px; height: 40px; } .navbar__right[data-v-0f387ca8] { 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-a78dfe9a]: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-a78dfe9a] { /* 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-a78dfe9a] { /* 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-a78dfe9a]: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-a78dfe9a], .theme-mode-light[data-v-a78dfe9a] { /* ═══════════════════════════════════════════════════════════════ 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-a78dfe9a], .theme-mode-dark[data-v-a78dfe9a] { /* ═══════════════════════════════════════════════════════════════ 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-a78dfe9a]: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-a78dfe9a]: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-a78dfe9a] * { scroll-behavior: smooth; font-family: "Mont", "sans-serif"; } input[data-v-a78dfe9a] { 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-a78dfe9a]::placeholder { color: var(--input-placeholder); font-size: 12px; } input[readonly][data-v-a78dfe9a], input[disabled][data-v-a78dfe9a] { caret-color: transparent; cursor: default !important; background-color: var(--input-bg-disabled); color: var(--text-disabled); } input[disabled][data-v-a78dfe9a] { opacity: 0.9; } input[readonly][data-v-a78dfe9a] { background-color: var(--bg-surface); } /* ══════════════════════════════════════════════════════════════ SCROLLBAR — Utilitaire BEM ══════════════════════════════════════════════════════════════ */ .scrollbar[data-v-a78dfe9a] { /* Chrome, Safari, Edge Chromium */ } .scrollbar[data-v-a78dfe9a]::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar[data-v-a78dfe9a]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; } .scrollbar[data-v-a78dfe9a]::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } @supports (-moz-appearance: none) { /* Styles spécifiques Firefox */ .scrollbar[data-v-a78dfe9a] { 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-a78dfe9a]:nth-child(odd), .list-card-desktop__wrapper[data-v-a78dfe9a]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .grid-elem__wrapper[data-v-a78dfe9a]:nth-child(even), .list-card-desktop__wrapper[data-v-a78dfe9a]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* Legacy aliases (rétro-compatibilité) */ .gridElemWrapper[data-v-a78dfe9a]:nth-child(odd), .listCardDesktopWrapper[data-v-a78dfe9a]:nth-child(odd) { background-color: var(--admin-bg-card, #f6fbff); } .gridElemWrapper[data-v-a78dfe9a]:nth-child(even), .listCardDesktopWrapper[data-v-a78dfe9a]:nth-child(even) { background-color: var(--admin-bg-card-hover, #ffffff); } /* ══════════════════════════════════════════════════════════════ CARD LAYOUT — Bloc principal pour les grilles admin (BEM) ══════════════════════════════════════════════════════════════ */ .card-layout[data-v-a78dfe9a] { 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-a78dfe9a] { cursor: pointer; } .card-layout--selectionnable[data-v-a78dfe9a]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .card-layout--no-pointer[data-v-a78dfe9a] { cursor: auto; } .card-layout--drawer[data-v-a78dfe9a] { background-color: var(--admin-bg-header, #eeeeee); } .card-layout--facture-list[data-v-a78dfe9a] { display: flex; flex-direction: column; align-items: flex-start; } .card-layout__drawer[data-v-a78dfe9a] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card-layout--header[data-v-a78dfe9a] { 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-a78dfe9a] { 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-a78dfe9a] { cursor: pointer; } .cardLayoutWrapper--selectionnable[data-v-a78dfe9a]:hover { background-color: var(--admin-bg-card-hover, #edf1f5); } .cardLayoutWrapper--no-pointer[data-v-a78dfe9a] { cursor: auto; } .cardLayoutWrapper--drawer[data-v-a78dfe9a] { background-color: var(--admin-bg-header, #eeeeee); } .cardLayoutWrapper--factureList[data-v-a78dfe9a] { display: flex; flex-direction: column; align-items: flex-start; } .cardLayoutWrapper--factureList .drawer[data-v-a78dfe9a] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cardLayoutWrapper--header[data-v-a78dfe9a] { 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-a78dfe9a] { display: flex; justify-content: space-between; } .cardLayoutWrapper--header .elem span[data-v-a78dfe9a] { color: var(--admin-text-primary, #ffffff); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .cardLayoutWrapper--header .elem--sort[data-v-a78dfe9a] { justify-content: flex-start; } .cardLayoutWrapper--header .elem svg[data-v-a78dfe9a] { fill: var(--admin-text-secondary, #ffffff); transform: scale(0.65); overflow: visible; } /* ══════════════════════════════════════════════════════════════ COLOR CHIP — Indicateurs colorés (BEM) ══════════════════════════════════════════════════════════════ */ .color-chip[data-v-a78dfe9a] { background-color: #b4bfce; min-width: 16px; height: 16px; border-radius: 50%; } .color-chip--demandes[data-v-a78dfe9a] { background-color: #eb1515; } .color-chip--dossiers[data-v-a78dfe9a] { background-color: #ffa807; } .color-chip--drf-demandes[data-v-a78dfe9a] { background-color: #e71754; } .color-chip--drf-dossiers[data-v-a78dfe9a] { background-color: #00a79b; } .color-chip--virements[data-v-a78dfe9a] { background-color: var(--secondary-400); } .color-chip--factures[data-v-a78dfe9a] { background-color: #0686cb; } /* Legacy aliases (rétro-compatibilité) */ .color-recherche-demandes[data-v-a78dfe9a] { background-color: #eb1515; } .color-recherche-dossiers[data-v-a78dfe9a] { background-color: #ffa807; } .color-recherche-drf-demandes[data-v-a78dfe9a] { background-color: #e71754; } .color-recherche-drf-dossiers[data-v-a78dfe9a] { background-color: #00a79b; } .color-recherche-virements[data-v-a78dfe9a] { background-color: var(--secondary-400); } .color-recherche-factures[data-v-a78dfe9a] { background-color: #0686cb; } /* ══════════════════════════════════════════════════════════════ UTILITAIRES — Classes utilitaires globales ══════════════════════════════════════════════════════════════ */ .link[data-v-a78dfe9a] { color: #00a79b; cursor: pointer; } .scrollable[data-v-a78dfe9a] { overflow: scroll; } /* ══════════════════════════════════════════════════════════════ GRID CELL — Cellule de grille admin (BEM) ══════════════════════════════════════════════════════════════ */ .grid-cell[data-v-a78dfe9a] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .grid-cell__text[data-v-a78dfe9a] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .grid-cell svg[data-v-a78dfe9a] { transform: scale(0.7); overflow: visible; } .grid-cell--center[data-v-a78dfe9a] { justify-content: center !important; } .grid-cell--bold .grid-cell__text[data-v-a78dfe9a] { font-weight: 800; } .grid-cell--column[data-v-a78dfe9a] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .grid-cell--clickable[data-v-a78dfe9a] { color: #00a79b; cursor: pointer; } .grid-cell--clickable svg[data-v-a78dfe9a] { fill: #00a79b; } .grid-cell--disabled[data-v-a78dfe9a] { color: #cccccc; } .grid-cell--disabled svg[data-v-a78dfe9a] { fill: #cccccc; } .grid-cell--nowrap .grid-cell__text[data-v-a78dfe9a] { white-space: nowrap; } .grid-cell--danger svg[data-v-a78dfe9a] { fill: #eb1515; } .grid-cell--span-1[data-v-a78dfe9a] { grid-column: span 1; } .grid-cell--span-2[data-v-a78dfe9a] { grid-column: span 2; } .grid-cell--span-3[data-v-a78dfe9a] { grid-column: span 3; } .grid-cell--span-4[data-v-a78dfe9a] { grid-column: span 4; } .grid-cell--span-5[data-v-a78dfe9a] { grid-column: span 5; } .grid-cell--span-6[data-v-a78dfe9a] { grid-column: span 6; } .grid-cell--span-7[data-v-a78dfe9a] { grid-column: span 7; } .grid-cell--span-8[data-v-a78dfe9a] { grid-column: span 8; } .grid-cell--span-9[data-v-a78dfe9a] { grid-column: span 9; } .grid-cell--span-10[data-v-a78dfe9a] { grid-column: span 10; } .grid-cell--span-12[data-v-a78dfe9a] { grid-column: span 12; } .grid-cell--span-13[data-v-a78dfe9a] { grid-column: span 13; } .grid-cell--span-14[data-v-a78dfe9a] { grid-column: span 14; } .grid-cell--span-16[data-v-a78dfe9a] { grid-column: span 16; } .grid-cell--span-18[data-v-a78dfe9a] { grid-column: span 18; } .grid-cell--span-20[data-v-a78dfe9a] { grid-column: span 20; } .grid-cell--span-32[data-v-a78dfe9a] { grid-column: span 32; } .grid-cell--span-36[data-v-a78dfe9a] { grid-column: span 36; } /* Legacy alias (rétro-compatibilité) - À migrer progressivement */ .elem[data-v-a78dfe9a] { display: flex; align-items: center; padding: 6px; color: var(--admin-text-primary, var(--primary-950)); font-size: 12px; } .elem span[data-v-a78dfe9a] { font-weight: 600; font-size: 12px; color: var(--admin-text-primary, inherit); text-overflow: ellipsis; overflow: hidden; } .elem svg[data-v-a78dfe9a] { transform: scale(0.7); overflow: visible; } .elem--center[data-v-a78dfe9a] { justify-content: center !important; } .elem--bold span[data-v-a78dfe9a] { font-weight: 800; } .elem--column[data-v-a78dfe9a] { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; } .elem--clickable[data-v-a78dfe9a] { color: #00a79b; cursor: pointer; } .elem--clickable svg[data-v-a78dfe9a] { fill: #00a79b; } .elem--clickable[data-v-a78dfe9a]:hover { cursor: pointer; } .elem--disabled[data-v-a78dfe9a] { color: #cccccc; } .elem--disabled svg[data-v-a78dfe9a] { fill: #cccccc; } .elem--nowrap span[data-v-a78dfe9a] { white-space: nowrap; } .elem--danger svg[data-v-a78dfe9a] { fill: #eb1515; } .elem--span-1[data-v-a78dfe9a] { grid-column: span 1; } .elem--span-2[data-v-a78dfe9a] { grid-column: span 2; } .elem--span-3[data-v-a78dfe9a] { grid-column: span 3; } .elem--span-4[data-v-a78dfe9a] { grid-column: span 4; } .elem--span-5[data-v-a78dfe9a] { grid-column: span 5; } .elem--span-6[data-v-a78dfe9a] { grid-column: span 6; } .elem--span-7[data-v-a78dfe9a] { grid-column: span 7; } .elem--span-8[data-v-a78dfe9a] { grid-column: span 8; } .elem--span-9[data-v-a78dfe9a] { grid-column: span 9; } .elem--span-10[data-v-a78dfe9a] { grid-column: span 10; } .elem--span-12[data-v-a78dfe9a] { grid-column: span 12; } .elem--span-13[data-v-a78dfe9a] { grid-column: span 13; } .elem--span-14[data-v-a78dfe9a] { grid-column: span 14; } .elem--span-16[data-v-a78dfe9a] { grid-column: span 16; } .elem--span-18[data-v-a78dfe9a] { grid-column: span 18; } .elem--span-20[data-v-a78dfe9a] { grid-column: span 20; } .elem--span-32[data-v-a78dfe9a] { grid-column: span 32; } .elem--span-36[data-v-a78dfe9a] { grid-column: span 36; } /* ══════════════════════════════════════════════════════════════ EMPTY LIST — Placeholder pour listes vides (BEM) ══════════════════════════════════════════════════════════════ */ .empty-list__placeholder[data-v-a78dfe9a] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } /* Legacy alias */ .emptyListPlaceholder[data-v-a78dfe9a] { display: table; margin: 0 auto; margin-top: 24px; color: #94a2b8; } .focusable[data-v-a78dfe9a]:focus-visible { outline: none; box-shadow: 0px 0px 1px 1px rgba(0, 167, 155, 0.4); } /* display */ .flex[data-v-a78dfe9a] { display: flex; } /* flex-direction */ .flex-column[data-v-a78dfe9a] { flex-direction: column; } .flex-row[data-v-a78dfe9a] { flex-direction: row; } /* flex */ .flex-1[data-v-a78dfe9a] { flex: 1 !important; } .flex-2[data-v-a78dfe9a] { flex: 2; } .flex-3[data-v-a78dfe9a] { flex: 3; } .flex-3[data-v-a78dfe9a] { flex: 4; } .flex-5[data-v-a78dfe9a] { flex: 5; } .flex-auto[data-v-a78dfe9a] { flex: auto; } .flex-none[data-v-a78dfe9a] { flex: none; } .flex-content[data-v-a78dfe9a] { flex: content; } /* flex-wrap */ .flex-wrap[data-v-a78dfe9a] { flex-wrap: wrap; } .flex-nowrap[data-v-a78dfe9a] { flex-wrap: nowrap; } .flex-wrap-reverse[data-v-a78dfe9a] { flex-wrap: wrap-reverse; } /* justify-content */ .justify-content-start[data-v-a78dfe9a] { justify-content: flex-start; } .justify-content-end[data-v-a78dfe9a] { justify-content: flex-end; } .justify-content-baseline[data-v-a78dfe9a] { justify-content: baseline; } .justify-content-center[data-v-a78dfe9a] { justify-content: center; } .justify-content-space-between[data-v-a78dfe9a] { justify-content: space-between; } .justify-content-space-around[data-v-a78dfe9a] { justify-content: space-around; } .justify-content-space-evenly[data-v-a78dfe9a] { justify-content: space-evenly; } /* align-items */ .align-items-flex-start[data-v-a78dfe9a] { align-items: flex-start; } .align-items-flex-end[data-v-a78dfe9a] { align-items: flex-end; } .align-items-stretch[data-v-a78dfe9a] { align-items: stretch; } .align-items-baseline[data-v-a78dfe9a] { align-items: baseline; } .align-items-center[data-v-a78dfe9a] { align-items: center; } /* align-content */ .align-content-flex-start[data-v-a78dfe9a] { align-content: flex-start; } .align-content-flex-end[data-v-a78dfe9a] { align-content: flex-end; } .align-content-center[data-v-a78dfe9a] { align-content: center; } .align-content-stretch[data-v-a78dfe9a] { align-content: stretch; } .align-content-space-between[data-v-a78dfe9a] { align-content: space-between; } .align-content-space-around[data-v-a78dfe9a] { align-content: space-around; } /* align-self */ .align-self-flex-start[data-v-a78dfe9a] { align-self: flex-start; } .align-self-flex-end[data-v-a78dfe9a] { align-self: flex-end; } .align-self-stretch[data-v-a78dfe9a] { align-self: stretch; } .align-self-flex-baseline[data-v-a78dfe9a] { align-self: baseline; } .align-self-center[data-v-a78dfe9a] { align-self: center; } .align-self-auto[data-v-a78dfe9a] { align-self: auto; } .flex-gap-1[data-v-a78dfe9a] { gap: 4px; } .flex-gap-2[data-v-a78dfe9a] { gap: 8px; } .flex-gap-3[data-v-a78dfe9a] { gap: 12px; } .flex-gap-4[data-v-a78dfe9a] { gap: 16px; } .flex-gap-5[data-v-a78dfe9a] { gap: 20px; } .flex-gap-6[data-v-a78dfe9a] { gap: 24px; } .flex-gap-7[data-v-a78dfe9a] { gap: 28px; } .flex-gap-8[data-v-a78dfe9a] { gap: 32px; } .flex-gap-10[data-v-a78dfe9a] { gap: 40px; } .flex-gap-12[data-v-a78dfe9a] { gap: 48px; } @media (max-width: 720px) { .hide-mobile[data-v-a78dfe9a] { display: none !important; } } @media (max-width: 1160px) { .hide-tablet[data-v-a78dfe9a] { display: none !important; } } @media (min-width: 721px) { .show-mobile-only[data-v-a78dfe9a] { display: none !important; } } @media (max-width: 720px) { .show-tablet-only[data-v-a78dfe9a] { display: none !important; } } @media (min-width: 1161px) { .show-tablet-only[data-v-a78dfe9a] { display: none !important; } } @media (max-width: 1160px) { .show-desktop-only[data-v-a78dfe9a] { display: none !important; } } .col-none[data-v-a78dfe9a] { display: none; } .col-auto[data-v-a78dfe9a] { grid-column: auto; } .col-1[data-v-a78dfe9a] { grid-column: span 1; } .col-2[data-v-a78dfe9a] { grid-column: span 2; } .col-3[data-v-a78dfe9a] { grid-column: span 3; } .col-4[data-v-a78dfe9a] { grid-column: span 4; } .col-5[data-v-a78dfe9a] { grid-column: span 5; } .col-6[data-v-a78dfe9a] { grid-column: span 6; } .col-7[data-v-a78dfe9a] { grid-column: span 7; } .col-8[data-v-a78dfe9a] { grid-column: span 8; } .col-9[data-v-a78dfe9a] { grid-column: span 9; } .col-10[data-v-a78dfe9a] { grid-column: span 10; } .col-12[data-v-a78dfe9a] { grid-column: span 12; } .col-13[data-v-a78dfe9a] { grid-column: span 13; } .col-14[data-v-a78dfe9a] { grid-column: span 14; } .col-15[data-v-a78dfe9a] { grid-column: span 15; } .col-16[data-v-a78dfe9a] { grid-column: span 16; } .col-18[data-v-a78dfe9a] { grid-column: span 18; } .col-20[data-v-a78dfe9a] { grid-column: span 20; } .col-22[data-v-a78dfe9a] { grid-column: span 22; } .col-24[data-v-a78dfe9a] { grid-column: span 24; } .col-26[data-v-a78dfe9a] { grid-column: span 26; } .col-27[data-v-a78dfe9a] { grid-column: span 27; } .col-28[data-v-a78dfe9a] { grid-column: span 28; } .col-30[data-v-a78dfe9a] { grid-column: span 30; } .col-36[data-v-a78dfe9a] { grid-column: span 36; } @container (max-width: 1160px) { .col-md-none[data-v-a78dfe9a] { display: none; } .col-md-36[data-v-a78dfe9a] { grid-column: span 36; } .col-md-28[data-v-a78dfe9a] { grid-column: span 28; } .col-md-27[data-v-a78dfe9a] { grid-column: span 27; } .col-md-24[data-v-a78dfe9a] { grid-column: span 24; } .col-md-22[data-v-a78dfe9a] { grid-column: span 22; } .col-md-20[data-v-a78dfe9a] { grid-column: span 20; } .col-md-19[data-v-a78dfe9a] { grid-column: span 19; } .col-md-18[data-v-a78dfe9a] { grid-column: span 18; } .col-md-17[data-v-a78dfe9a] { grid-column: span 17; } .col-md-16[data-v-a78dfe9a] { grid-column: span 16; } .col-md-15[data-v-a78dfe9a] { grid-column: span 15; } .col-md-14[data-v-a78dfe9a] { grid-column: span 14; } .col-md-13[data-v-a78dfe9a] { grid-column: span 13; } .col-md-12[data-v-a78dfe9a] { grid-column: span 12; } .col-md-10[data-v-a78dfe9a] { grid-column: span 10; } .col-md-9[data-v-a78dfe9a] { grid-column: span 9; } .col-md-8[data-v-a78dfe9a] { grid-column: span 8; } .col-md-6[data-v-a78dfe9a] { grid-column: span 6; } .col-md-5[data-v-a78dfe9a] { grid-column: span 5; } .col-md-4[data-v-a78dfe9a] { grid-column: span 4; } .col-md-3[data-v-a78dfe9a] { grid-column: span 3; } .col-md-2[data-v-a78dfe9a] { grid-column: span 2; } .col-md-1[data-v-a78dfe9a] { grid-column: span 1; } .col-md-auto[data-v-a78dfe9a] { grid-column: auto; } } @container (max-width: 720px) { .col-sm-none[data-v-a78dfe9a] { display: none; } .col-sm-36[data-v-a78dfe9a] { grid-column: span 36; } .col-sm-32[data-v-a78dfe9a] { grid-column: span 32; } .col-sm-28[data-v-a78dfe9a] { grid-column: span 28; } .col-sm-27[data-v-a78dfe9a] { grid-column: span 27; } .col-sm-24[data-v-a78dfe9a] { grid-column: span 24; } .col-sm-22[data-v-a78dfe9a] { grid-column: span 22; } .col-sm-20[data-v-a78dfe9a] { grid-column: span 20; } .col-sm-18[data-v-a78dfe9a] { grid-column: span 18; } .col-sm-16[data-v-a78dfe9a] { grid-column: span 16; } .col-sm-15[data-v-a78dfe9a] { grid-column: span 15; } .col-sm-14[data-v-a78dfe9a] { grid-column: span 14; } .col-sm-13[data-v-a78dfe9a] { grid-column: span 12; } .col-sm-12[data-v-a78dfe9a] { grid-column: span 12; } .col-sm-10[data-v-a78dfe9a] { grid-column: span 10; } .col-sm-9[data-v-a78dfe9a] { grid-column: span 8; } .col-sm-8[data-v-a78dfe9a] { grid-column: span 8; } .col-sm-6[data-v-a78dfe9a] { grid-column: span 6; } .col-sm-4[data-v-a78dfe9a] { grid-column: span 4; } .col-sm-auto[data-v-a78dfe9a] { grid-column: auto; } } .fade-enter-active[data-v-a78dfe9a] { transition: opacity 0.3s ease-out; } .fade-leave-active[data-v-a78dfe9a] { transition: opacity 0.6s ease-in; } .fade-enter-from[data-v-a78dfe9a], .fade-leave-to[data-v-a78dfe9a] { opacity: 0; } @font-face { font-family: "Mont"; src: url('/assets/fonts/Mont_Light-DL8VIgvb.otf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: "Mont"; src: url('/assets/fonts/Mont_Regular-B098VKWf.otf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: "Mont"; src: url('/assets/fonts/Mont_SemiBold-DqyBU2Go.otf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: "Mont"; src: url('/assets/fonts/Mont_Bold-GaJb7NZ6.otf') format('truetype'); font-weight: 800; font-style: normal; } .breadcrumb-wrapper[data-v-a78dfe9a] { position: relative; z-index: 900; } /* ═══════════════════════════════════════════════════════════════ APP LAYOUT - Premium Background with Theme Support ═══════════════════════════════════════════════════════════════ */ .app-layout[data-v-a78dfe9a] { display: flex; flex-direction: column; min-height: 100vh; max-width: 100%; overflow-x: clip; /* plus strict que hidden */ overflow-y: auto; background: var(--bg-page); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } /* Header existant */ .header[data-v-a78dfe9a] { position: sticky; top: 0; z-index: 1000; transition: transform 0.4s ease, opacity 0.35s ease, backdrop-filter 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; will-change: transform, opacity, backdrop-filter; background: rgba(var(--secondary-900-rgb), 0.65); backdrop-filter: blur(14px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .header .header__inner[data-v-a78dfe9a] { transition: all 0.3s ease; } .header--hidden[data-v-a78dfe9a] { transform: translateY(-100%); opacity: 0; box-shadow: none; } .header--scrolled[data-v-a78dfe9a]:not(.header--hidden) { backdrop-filter: blur(14px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); opacity: 1; } /* ✅ Contenu principal */ .main-wrapper[data-v-a78dfe9a] { position: relative; z-index: 1; flex: 1 0 auto; /* Grow, don't shrink, auto basis */ display: flex; flex-direction: column; } .content[data-v-a78dfe9a] { min-width: 250px; min-height: calc(100vh - 68px - 200px); /* viewport - header - footer approx */ /* Fond transparent pour laisser voir le gradient de l'app-layout */ background: transparent; color: var(--text-primary); transition: padding 0.3s ease, color 0.3s ease; /* Les pages doivent remplir tout l'espace */ /* Mobile */ } .content[data-v-a78dfe9a] > * { flex: 1; display: flex; flex-direction: column; } @media (max-width: 720px) { .content[data-v-a78dfe9a] { min-height: calc(100vh - 60px - 150px); /* header mobile + footer mobile */ } } /* Footer toujours en bas */ .footer[data-v-a78dfe9a] { flex-shrink: 0; margin-top: auto; /* Padding pour laisser de la place à la bottom nav sur mobile */ } @media (max-width: 720px) { .footer--with-bottom-nav[data-v-a78dfe9a] { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } } /* Mode Auth plein écran */ .auth-fullscreen[data-v-a78dfe9a] { width: 100%; min-height: 100vh; padding: 0 !important; margin: 0 !important; background: var(--bg-surface); display: flex; flex-direction: column; } .auth-fullscreen > div[data-v-a78dfe9a] { flex: 1; } /* Transitions */ .fade-slide-enter-active[data-v-a78dfe9a], .fade-slide-leave-active[data-v-a78dfe9a] { transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); } .fade-slide-enter-from[data-v-a78dfe9a] { opacity: 0; transform: translateY(10px); } .fade-slide-leave-to[data-v-a78dfe9a] { opacity: 0; transform: translateY(-10px); } .fade-enter-active[data-v-a78dfe9a], .fade-leave-active[data-v-a78dfe9a] { transition: opacity 0.3s ease; } .fade-enter-from[data-v-a78dfe9a], .fade-leave-to[data-v-a78dfe9a] { opacity: 0; } /* Scrollbar */ .app-layout[data-v-a78dfe9a]::-webkit-scrollbar { width: 8px; } .app-layout[data-v-a78dfe9a]::-webkit-scrollbar-track { background: var(--scrollbar-track); } .app-layout[data-v-a78dfe9a]::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; } .app-layout[data-v-a78dfe9a]::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }