/** * Mary Design System - CSS Variables * * Fichier centralisé pour toutes les variables CSS du dashboard. * Importez ce fichier EN PREMIER dans vos autres fichiers CSS. */ :root { /* ======================================== Z-INDEX SCALE Echelle standardisée pour éviter les conflits ======================================== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-sidebar: 400; --z-modal-backdrop: 500; --z-modal: 600; --z-popover: 700; --z-tooltip: 800; --z-toast: 900; --z-max: 9999; /* ======================================== COLORS - Primary (Green) ======================================== */ --primary-50: #ecfdf5; --primary-100: #d1fae5; --primary-200: #a7f3d0; --primary-300: #6ee7b7; --primary-400: #34d399; --primary-500: #10b981; --primary-600: #059669; --primary-700: #047857; --primary-800: #065f46; --primary-900: #064e3b; /* ======================================== COLORS - Secondary (Blue) ======================================== */ --secondary-50: #eff6ff; --secondary-100: #dbeafe; --secondary-200: #bfdbfe; --secondary-300: #93c5fd; --secondary-400: #60a5fa; --secondary-500: #3b82f6; --secondary-600: #2563eb; --secondary-700: #1d4ed8; --secondary-800: #1e40af; --secondary-900: #1e3a8a; /* ======================================== COLORS - Gray (Neutral) ======================================== */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* ======================================== COLORS - Warm Gray (backgrounds) ======================================== */ --gray-warm-50: #ffffff; --gray-warm-100: #fafafa; --gray-warm-200: #f5f5f4; /* ======================================== COLORS - Slate (Cool Gray) ======================================== */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* ======================================== COLORS - Neutral ======================================== */ --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #1a1a1a; /* ======================================== COLORS - Indigo ------------------------------------------ L'échelle violette a été retirée : elle ne codait aucune idée stable (elle servait tour à tour de « catégorie », de « chaud », de « type »), et une couleur qu'il faut apprendre ne vaut pas mieux que pas de couleur. Ce qui était décoratif est passé au neutre (--slate-*), ce qui portait vraiment une information a reçu une teinte propre. ======================================== */ --indigo-500: #4f7ef0; /* ======================================== COLORS - Extended Green ======================================== */ --green-100: #dcfce7; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534; /* ======================================== COLORS - Semantic ======================================== */ --success-50: #ecfdf5; --success-100: #d1fae5; --success-500: #10b981; --success-600: #059669; --success-700: #047857; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-200: #fde68a; --warning-300: #fcd34d; --warning-400: #fbbf24; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309; --warning-800: #92400e; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-200: #fecaca; --danger-300: #fca5a5; --danger-400: #f87171; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; --danger-800: #991b1b; --info-50: #eff6ff; --info-100: #dbeafe; --info-500: #3b82f6; --info-600: #2563eb; /* ======================================== TYPOGRAPHY ======================================== */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.025em; /* ======================================== SPACING ======================================== */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ /* ======================================== BORDERS & RADIUS ======================================== */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.25rem; /* 20px */ --radius-full: 9999px; /* ======================================== SHADOWS ======================================== */ --shadow-color: rgba(0, 0, 0, 0.12); --shadow-color-strong: rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --shadow-2xl: 0 25px 50px -12px var(--shadow-color-strong); /* Brand shadows */ --shadow-brand-sm: 0 2px 8px rgba(16, 185, 129, 0.08); --shadow-brand-md: 0 4px 16px rgba(16, 185, 129, 0.12); --shadow-brand-lg: 0 8px 24px rgba(16, 185, 129, 0.16); /* ======================================== TRANSITIONS & ANIMATIONS ======================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; /* ======================================== LAYOUT - Responsive Breakpoints ======================================== */ --breakpoint-xs: 375px; /* Small phone (iPhone SE) */ --breakpoint-sm: 480px; /* Standard phone */ --breakpoint-md: 640px; /* Large phone / small tablet */ --breakpoint-lg: 768px; /* Tablet */ --breakpoint-xl: 1024px; /* Desktop */ --breakpoint-2xl: 1280px; /* Large desktop */ /* Legacy alias */ --breakpoint-mobile: 768px; /* Sidebar */ --sidebar-width: 280px; --sidebar-collapsed-width: 80px; /* Desktop Sidebar Rail */ --rail-width-collapsed: 64px; --rail-width-expanded: 252px; --rail-bg: #ffffff; --rail-border: var(--gray-200); /* Legacy alias */ --icon-bar-width: var(--rail-width-collapsed); /* Top Bar */ --top-bar-height: 56px; --top-bar-bg: #ffffff; --top-bar-border: var(--gray-200); /* Tab Bar (Mobile) */ --tab-bar-height: 56px; --tab-bar-height-safe: calc(56px + env(safe-area-inset-bottom, 0px)); --tab-bar-bg: rgba(255, 255, 255, 0.92); --tab-bar-blur: 20px; /* Command Center */ --cc-modal-width: 560px; --cc-modal-max-height: 70vh; --cc-modal-radius: 16px; --cc-modal-shadow: var(--shadow-2xl); --cc-radius: 20px; /* ======================================== RAIL ITEMS ======================================== */ --rail-item-height: 42px; --rail-item-color: var(--gray-600); --rail-item-color-hover: var(--gray-900); --rail-item-color-active: var(--primary-700); --rail-item-bg-hover: var(--gray-100); --rail-item-bg-active: var(--primary-50); /* ======================================== TAB ITEMS (Mobile) ======================================== */ --tab-item-color: var(--gray-500); --tab-item-color-active: var(--primary-600); --tab-item-size: 24px; /* ======================================== FOCUS STATES ======================================== */ --focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.25); --focus-ring-offset: 2px; /* ======================================== MARY SEMANTIC - Primary Brand (aliases referencing core scales) ======================================== */ --mary-primary: var(--primary-500); --mary-primary-50: var(--primary-50); --mary-primary-100: var(--primary-100); --mary-primary-200: var(--primary-200); --mary-primary-300: var(--primary-300); --mary-primary-400: var(--primary-400); --mary-primary-500: var(--primary-500); --mary-primary-600: var(--primary-600); --mary-primary-700: var(--primary-700); --mary-primary-800: var(--primary-800); --mary-primary-900: var(--primary-900); /* ======================================== MARY SEMANTIC - Secondary ======================================== */ --mary-secondary: var(--secondary-500); --mary-secondary-50: var(--secondary-50); --mary-secondary-100: var(--secondary-100); --mary-secondary-200: var(--secondary-200); --mary-secondary-300: var(--secondary-300); --mary-secondary-400: var(--secondary-400); --mary-secondary-500: var(--secondary-500); --mary-secondary-600: var(--secondary-600); --mary-secondary-700: var(--secondary-700); --mary-secondary-800: var(--secondary-800); --mary-secondary-900: var(--secondary-900); /* ======================================== MARY SEMANTIC - Grays ======================================== */ --mary-gray-50: var(--gray-50); --mary-gray-100: var(--gray-100); --mary-gray-200: var(--gray-200); --mary-gray-300: var(--gray-300); --mary-gray-400: var(--gray-400); --mary-gray-500: var(--gray-500); --mary-gray-600: var(--gray-600); --mary-gray-700: var(--gray-700); --mary-gray-800: var(--gray-800); --mary-gray-900: var(--gray-900); /* ======================================== MARY SEMANTIC - Status & Alerts ======================================== */ --mary-success: var(--success-500); --mary-success-light: var(--success-100); --mary-success-dark: var(--primary-700); --mary-warning: #f59e0b; --mary-warning-light: var(--warning-100); --mary-warning-dark: var(--warning-600); --mary-error: var(--danger-500); --mary-error-light: var(--danger-100); --mary-error-dark: var(--danger-600); --mary-info: var(--info-500); --mary-info-light: var(--info-100); --mary-info-dark: var(--info-600); /* ======================================== SOCLE DE THÈME — surfaces, encres, filets, marque et statuts ------------------------------------------------------------ UNE grammaire pour tout le produit. dark-mode.css la retourne d'un bloc (`html.dark-mode`, 0,1,1 — il gagne sur le `:root` d'une feuille d'app même chargée après le bundle). Toute feuille d'app doit exprimer sa palette EN ALIAS de ce socle (`--tn-bg-soft: var(--sf-2)`) plutôt que de retaper des littéraux. Une palette écrite en alias n'a RIEN à déclarer dans dark-mode.css : elle bascule toute seule. C'est la seule façon de ne pas retaper les mêmes quinze couleurs sous soixante noms différents. Les valeurs claires suivent la grammaire réellement en vigueur dans le produit (direction Attio/Apple : #1a1a1a, #f5f5f7, filets translucides), pas les gris Tailwind des feuilles héritées. DEUX rôles, deux jetons — ne jamais les confondre, ils tombent sur la même valeur en CLAIR et divergent en SOMBRE : --sf-3 appui POSÉ SUR la carte (pastille, en-tête de table) --sf-under fond de page SOUS la carte C'est exactement le piège qui avait aplati tout le sombre en noir sur noir quand --gray-warm-50 portait les deux. Ne PAS utiliser pour ce qui doit rester blanc par nature (QR à scanner, aperçu de PDF ou de ticket, maquette d'écran client, feuille d'impression). ======================================== */ /* --- Surfaces --- */ --sf-page: #ffffff; /* fond de page : #000000 */ --sf-1: #ffffff; /* carte, panneau, surface primaire : #161b22 */ /* La MÊME surface, alpha 0. Un dégradé qui s'efface ne peut pas viser `transparent` : les moteurs le lisent rgba(0,0,0,0) et la moitié du dégradé vire au gris sale. Il lui faut la couleur de départ à zéro. */ --sf-1-fade: rgba(255, 255, 255, 0); --sf-2: #fafafa; /* creux, survol, zone en retrait : #1c2128 */ --sf-3: #f5f5f7; /* appui POSÉ SUR la carte : #21262d */ --sf-pop: #ffffff; /* modale, menu déroulant, popover : #242a33 */ --sf-under: #f5f5f7; /* fond SOUS la carte : #0d1117 */ /* --- Filets --- Translucides à dessein : un filet noir à 7 % se pose correctement sur n'importe quelle surface, un filet opaque doit être choisi par fond. */ /* --- Fond d'un CONTRÔLE --- Ce qui dit « ceci se manipule » peut être un trait ou un appui de surface. Le produit a tranché pour l'appui le 12/09/2026 : un contour de 1 px sur chaque commande redessine, au-dessus des listes, le peigne que le retrait des filets de rangée venait d'enlever. Ces deux jetons portent cet appui, pour que les onze familles de bouton du produit s'y branchent au lieu de recopier chacune sa valeur. */ --sf-ctl: var(--sf-3); /* contrôle au repos : var(--sf-3) */ --sf-ctl-hover: #ebebef; /* contrôle survolé : #2b3139 */ --sf-ctl-press: #e0e0e6; /* contrôle pressé : #343b44 */ --sf-line: rgba(0, 0, 0, 0.07); /* filet : #2d333b */ --sf-line-strong: rgba(0, 0, 0, 0.12); /* filet appuyé : #444c56 */ /* FRONTIÈRE D'UN CONTRÔLE — le trait qui dit « ceci se manipule ». Né le 12/09 pour le rail d'un interrupteur éteint : douze interrupteurs le peignaient avec `--sf-line-strong` (ou un gris littéral), 1,32 pour 1 contre leur propre surface en clair, 1,99 en sombre. Or ce n'est pas un filet, c'est la frontière d'un CONTRÔLE, et la règle 1.4.11 y demande 3 pour 1 — la seule chose qui distingue « éteint » de « pas de bouton ». Valeurs calibrées pour tenir sur les TROIS surfaces qui peuvent le porter : 3,39 / 3,25 / 3,11 en clair, 3,77 / 3,52 / 3,31 en sombre. GÉNÉRALISÉ LE 22/09. Le même défaut, le même chiffre et le même remède valaient pour vingt-quatre autres contrôles restés sur des palettes d'avant le socle — `--gray-300`, `--neutral-200`, `--mary-gray-200`, `#e5e7eb` en dur : les champs par défaut de `base.css` et de `tenant-common.css`, la pagination entière, le sélecteur de période, le scanner, la caisse. Entre 1,24 et 1,68 pour 1, donc invisibles ; et invisibles en sombre aussi, ces palettes n'ayant pas de thème. Deux feuilles avaient chacune reforgé le jeton dans leur coin (`--champ-bord`, 14/09 et 22/09) : elles pointent maintenant ici. CE JETON N'EST PAS UN FILET. Un `border-bottom` entre deux rangées sépare deux contenus et garde `--sf-line` : il n'a pas de plancher. Confondre les deux fait voir un défaut là où il n'y en a pas — deux fois en une journée. Et un contrôle qui porte déjà un APPUI (`--sf-ctl`) n'a pas besoin de ce trait : l'aplat dit « ceci se manipule » mieux qu'un contour. */ --ct-line: #8b8b90; /* frontière d'un contrôle : #6e7681 */ --ct-rail: var(--ct-line); /* rail éteint ; allumé il prend --ac-brand */ /* --- Encres --- */ --fg-1: #1a1a1a; /* texte principal : #f0f6fc */ --fg-2: #4d4d52; /* texte secondaire : #adbac7 */ --fg-3: #67676c; /* texte discret : #8b949e */ /* Ce niveau porte les mentions et les horodatages, c'est-à-dire du petit texte, c'est-à-dire précisément là où le contraste minimum s'applique sans dérogation. Il valait #86868b, soit 3,55 pour 1 sur blanc, sous le seuil AA de 4,5. Mesuré sur la fiche de relation, où ce seul jeton habille vingt règles : la ligne de santé, tous les états vides, la date et le montant de chaque ligne de document. Assombri d'un cran, à teinte égale : 4,59. */ --fg-4: #757579; /* mention, horodatage : #7b8894 */ --fg-5: #b0b0b0; /* le plus effacé : #6e7681 */ /* --- Marque et statuts --- En sombre le vert de marque s'éclaircit : #00a86b sur #161b22 tombe sous le contraste minimum. Même raison pour l'ambre et le rouge. */ --ac-brand: #00a86b; /* : #3fb950 */ --ac-brand-strong: #047857; /* : #56d364 */ --ac-brand-soft: rgba(0, 168, 107, 0.09); /* : rgba(63,185,80,0.15) */ --ac-brand-pulse: rgba(0, 168, 107, 0.18); /* : rgba(63,185,80,0.25) */ /* --- Le bouton principal --- DÉCISION DU FONDATEUR, 2026-09-14, prise en connaissance du chiffre : « juste change le vert pour prendre le vert du bouton Nouveau sur /catalog/produits/, je préfère cette couleur vert », puis, la mesure posée devant lui et trois options offertes (encre sombre à 6,15 ; vert intermédiaire #00875a à 4,52 ; le vert demandé avec du blanc à 3,08) : **le vert demandé avec du blanc**. Ce que cela coûte, écrit ici pour que personne ne le « corrige » en croyant à un oubli : le blanc sur `--ac-brand` mesure **3,08 pour un plancher AA de 4,5**. Le 12/09 avait justement porté onze familles de boutons de 3,08 à 5,48 en passant à `--ac-brand-strong` ; ce jeton-ci revient au vert clair. La forme des contrôles (rayon 8, appui de surface, encre par thème) reste acquise, seule la valeur du fond change. EN SOMBRE, RIEN NE CHANGE, et c'est la raison d'être de ces trois jetons plutôt que d'une couleur unique : le vert clair du thème sombre est trop lumineux pour du blanc (2,54), il garde son ENCRE SOMBRE (7,45). Le fondateur a désigné un bouton du thème CLAIR ; le sombre n'était pas dans la question et n'a pas à hériter d'une régression qu'on ne lui a pas demandée. `--ac-cta-bg-hover` prend #047857, le survol du bouton même que le fondateur a désigné (`.catalog-cta-btn:hover`), et remonte le blanc à 5,48 : le survol va toujours vers plus de contraste. */ --ac-cta-bg: var(--ac-brand); /* : var(--ac-brand) */ --ac-cta-fg: #ffffff; /* : #0d1117 */ --ac-cta-bg-hover: var(--ac-brand-strong); /* : var(--ac-brand-strong) */ /* Assombri d'un cran, à teinte égale : #b45309 sortait à 4,42 pour 1 sur son PROPRE fond doux (`--ac-warn-soft` composé sur blanc), sous les 4,5 de l'AA, et ce couple habille tous les bandeaux d'avertissement du produit. #a34a08 : 5,23 sur ce fond, 5,93 sur blanc, et le blanc posé dessus (les quelques pastilles qui en font un aplat) passe de 5,02 à 5,93. */ /* L'ENCRE d'un bouton plein rouge ou ambre, par thème, comme `--ac-cta-fg`. En clair, #c81e1e et #a34a08 sont sombres : du blanc dessus mesure 5,74 et 5,92. En sombre, le socle passe à #f85149 et #e3b341, deux couleurs CLAIRES : le même blanc n'y vaut plus que 3,34 et 1,76, sous le plancher de 4,5. La paire bascule ensemble, un jeton par thème. */ --ac-danger-fg: #ffffff; /* : #0d1117 */ --ac-warn-fg: #ffffff; /* : #0d1117 */ --ac-warn: #a34a08; /* : #e3b341 */ --ac-warn-soft: rgba(217, 119, 6, 0.12); /* : rgba(227,179,65,0.15) */ --ac-danger: #c81e1e; /* : #f85149 */ /* Le pendant rouge de `--ac-brand-strong` : l'encre d'alerte posee sur une surface PLUS CLAIRE que le fond de page (modale, menu, volet, `--sf-pop`). `--ac-danger` y tombe a 4,31 en sombre, mesure — il est calibre pour `--sf-1`. En clair, `--sf-pop` vaut blanc et rien ne bouge. */ --ac-danger-strong: #c81e1e; /* : #ff7b72 */ --ac-danger-soft: rgba(220, 38, 38, 0.09); /* : rgba(248,81,73,0.15) */ /* Bleu canard plutôt que la sarcelle #0d9488 ou le bleu #3b82f6 : les deux échouaient au contraste sur du texte (3,74 et 3,68), or ces jetons servent d'ENCRE dans 96 déclarations sur 132. Et la sarcelle ne tombait qu'à 17° de teinte du vert de marque, qui sert AUSSI de succès : sur une pastille de 6 px, « information » et « succès » devenaient la même couleur. Le canard garde le caractère froid des fiches avec 35° d'écart. */ --ac-info: #0e7490; /* : #22d3ee */ /* L'ENCRE d'une pastille pleine en canard, par thème, comme `--ac-danger-fg` et `--ac-warn-fg` juste au-dessus, et pour la même raison : en clair #0e7490 est sombre, du blanc dessus mesure 5,43 ; en sombre le socle passe à #22d3ee, une couleur CLAIRE, où ce même blanc tombe à 1,44. Le badge « N au pass » du plan de salle l'écrivait en dur. */ --ac-info-fg: #ffffff; /* : #0d1117 */ --ac-info-soft: rgba(14, 116, 144, 0.10); /* : rgba(34,211,238,0.15) */ /* Le NEUTRE porte ce qui n'a pas de statut : un partenaire, une catégorie « autre », une pastille sans verdict. Le violet servait à ça avant d'être banni du produit. */ --ac-neutre: #4d4d52; /* : #adbac7 */ --ac-neutre-soft: #f0f0f3; /* : rgba(139,148,158,0.15) */ --ac-focus: 0 0 0 3px rgba(0, 168, 107, 0.30); /* ======================================== MARY SEMANTIC - Backgrounds ======================================== */ --mary-bg-primary: #ffffff; --mary-bg-secondary: var(--gray-50); --mary-bg-tertiary: var(--gray-100); --mary-bg-dark: var(--gray-900); /* ======================================== MARY SEMANTIC - Text ======================================== */ --mary-text-primary: var(--gray-900); --mary-text-secondary: var(--gray-500); --mary-text-tertiary: var(--gray-400); --mary-text-inverse: #ffffff; /* ======================================== MARY SEMANTIC - Borders ======================================== */ --mary-border-light: var(--gray-200); --mary-border-medium: var(--gray-300); --mary-border-dark: var(--gray-400); /* ======================================== MARY SEMANTIC - Shadows ======================================== */ --mary-shadow-sm: var(--shadow-sm); --mary-shadow-md: var(--shadow-md); --mary-shadow-lg: var(--shadow-lg); --mary-shadow-xl: var(--shadow-xl); /* ======================================== BRAND INTEGRATION COLORS ======================================== */ --mary-gmail: #ea4335; --mary-gmail-light: #fecaca; --mary-gcal: #4285f4; --mary-gcal-light: #dbeafe; --mary-stripe: #635bff; --mary-stripe-light: #e0e7ff; --mary-banking: #0ea5e9; --mary-banking-light: #e0f2fe; /* ======================================== MODULE-SPECIFIC COLORS ======================================== */ /* CRM Module */ --crm-primary: var(--mary-primary); --crm-contact: #10b981; --crm-opportunity: #f59e0b; --crm-activity: #3b82f6; /* POS Module */ --pos-primary: var(--mary-secondary); --pos-blue: #3b82f6; --pos-sale: #10b981; --pos-return: #ef4444; /* Finance Module */ --finance-primary: var(--mary-primary); --finance-revenue: #10b981; --finance-expense: #ef4444; --finance-neutral: #6b7280; /* Sales Module */ --sales-primary: var(--mary-primary); --sales-invoice: #10b981; --sales-quote: #f59e0b; --sales-order: #3b82f6; /* Achats Module */ --achats-primary: var(--mary-primary); --achats-supplier: #6366f1; --achats-expense: #ef4444; --achats-order: #f59e0b; /* Messagerie Module */ --messagerie-primary: var(--mary-gmail); --messagerie-inbox: #10b981; --messagerie-sent: #3b82f6; --messagerie-draft: #f59e0b; /* Agenda Module */ --agenda-primary: var(--mary-primary); --agenda-event: #10b981; --agenda-meeting: #3b82f6; --agenda-task: #f59e0b; --agenda-reminder: #ec4899; } /* ======================================== GLOBAL RESPONSIVE RULES ======================================== */ /* Responsive images — prevent overflow on all screens */ img, video, svg { max-width: 100%; height: auto; } /* Minimum touch target size (WCAG 2.5.8) */ @media (pointer: coarse) { button, [role="button"], a.btn, .mary-btn, input[type="submit"], input[type="button"] { min-height: 44px; } } /* Protect hover-only effects from touch devices */ @media (hover: hover) and (pointer: fine) { .mary-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } } /* Force 16px on form inputs to prevent iOS auto-zoom */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } }