/* ===================================================================== WebApp — palettes commutables Chargée après tokens.css. La palette active est posée sur par l'attribut data-palette, alimenté par le réglage « theme_palette ». Chaque palette redéfinit uniquement les couleurs : la structure, les rayons, les ombres et la signature graphique restent identiques. Pour en ajouter une : dupliquer un bloc, changer les six valeurs de tête, puis ajouter la clé dans app/Controllers/Admin/SettingController.php. ===================================================================== */ /* ------------------------------------------------ 1. VIOLET & ROSE --- Registre logiciel contemporain. Le violet porte la structure, le rose soutenu marque l'action. Défaut actuel. */ :root[data-palette="violet"] { --brand: #5B3DF5; --brand-600: #4A2FD6; --brand-700: #3A22AC; --brand-050: #EFEBFE; --accent: #E8477F; --accent-600: #CE2F66; --accent-050: #FDECF2; --ink: #1A1332; --body: #4A4266; --muted: #6E668A; --line: #E4E0F0; --bg: #ffffff; --bg-soft: #F7F5FE; --surface: #ffffff; --surface-2: #EFEBFE; --bg-dark: #150F2E; --grad-brand: linear-gradient(125deg, #5B3DF5 0%, #8B5CF6 55%, #E8477F 100%); --grad-dark: linear-gradient(140deg, #150F2E 0%, #2A1D5C 55%, #4A2FD6 100%); --grad-amber: linear-gradient(120deg, #E8477F 0%, #F58BAF 100%); --shadow-sm: 0 1px 2px rgba(58, 34, 172, .08), 0 1px 3px rgba(58, 34, 172, .10); --shadow-md: 0 8px 22px rgba(58, 34, 172, .14); --shadow-lg: 0 20px 44px rgba(58, 34, 172, .22); --ring: 0 0 0 3px rgba(91, 61, 245, .22); } :root[data-palette="violet"][data-theme="dark"] { --brand: #9B85FF; --brand-600: #8570F0; --brand-700: #6D58D8; --brand-050: #2A1D5C; --accent: #FF7AA6; --accent-600: #E85C8B; --accent-050: #3B1626; --ink: #EFECFB; --body: #C7C1DE; --muted: #948CB0; --line: #302A4D; --bg: #0F0B1E; --bg-soft: #16112B; --surface: #1A1433; --surface-2: #241C45; --bg-dark: #0A0716; --grad-dark: linear-gradient(140deg, #0A0716 0%, #241C45 55%, #4A2FD6 100%); } /* ------------------------------------------- 2. BORDEAUX & OR --- Registre premium et institutionnel. Chaud, dense, peu employé dans le logiciel de gestion — donc distinctif. */ :root[data-palette="bordeaux"] { --brand: #8C1D3F; --brand-600: #711632; --brand-700: #571026; --brand-050: #FBECF0; --accent: #C89B3C; --accent-600: #A87F26; --accent-050: #FBF4E4; --ink: #2A1119; --body: #55414A; --muted: #7A6670; --line: #EBDDE1; --bg: #ffffff; --bg-soft: #FBF6F7; --surface: #ffffff; --surface-2: #F6EAEE; --bg-dark: #24101A; --grad-brand: linear-gradient(125deg, #8C1D3F 0%, #B03354 55%, #C89B3C 100%); --grad-dark: linear-gradient(140deg, #24101A 0%, #4E1628 55%, #8C1D3F 100%); --grad-amber: linear-gradient(120deg, #C89B3C 0%, #E3C173 100%); --shadow-sm: 0 1px 2px rgba(87, 16, 38, .08), 0 1px 3px rgba(87, 16, 38, .10); --shadow-md: 0 8px 22px rgba(87, 16, 38, .14); --shadow-lg: 0 20px 44px rgba(87, 16, 38, .22); --ring: 0 0 0 3px rgba(140, 29, 63, .22); } :root[data-palette="bordeaux"][data-theme="dark"] { --brand: #E0788F; --brand-600: #C85F78; --brand-700: #AC4A62; --brand-050: #4E1628; --accent: #E3C173; --accent-600: #C8A455; --accent-050: #3A2E14; --ink: #F6EAEE; --body: #D8C2C9; --muted: #A78F98; --line: #402029; --bg: #170A10; --bg-soft: #1F0E16; --surface: #24121A; --surface-2: #301823; --bg-dark: #100609; } /* -------------------------------------- 3. GRAPHITE & ORANGE --- Registre industriel et technique. Neutre froid, une seule couleur vive, très lisible sur écran d'atelier. */ :root[data-palette="graphite"] { --brand: #2E3440; --brand-600: #232833; --brand-700: #171B23; --brand-050: #EEF0F3; --accent: #F26419; --accent-600: #D24E0C; --accent-050: #FDEDE4; --ink: #171B23; --body: #454C5A; --muted: #6B7382; --line: #E1E4EA; --bg: #ffffff; --bg-soft: #F5F6F8; --surface: #ffffff; --surface-2: #EDEFF3; --bg-dark: #14181F; --grad-brand: linear-gradient(125deg, #2E3440 0%, #48505F 55%, #F26419 100%); --grad-dark: linear-gradient(140deg, #14181F 0%, #2E3440 55%, #48505F 100%); --grad-amber: linear-gradient(120deg, #F26419 0%, #FA9A5E 100%); --shadow-sm: 0 1px 2px rgba(23, 27, 35, .08), 0 1px 3px rgba(23, 27, 35, .10); --shadow-md: 0 8px 22px rgba(23, 27, 35, .14); --shadow-lg: 0 20px 44px rgba(23, 27, 35, .22); --ring: 0 0 0 3px rgba(242, 100, 25, .24); } :root[data-palette="graphite"][data-theme="dark"] { --brand: #C3CBD9; --brand-600: #A9B3C4; --brand-700: #8E99AC; --brand-050: #2E3440; --accent: #FF8340; --accent-600: #E86A28; --accent-050: #3A2013; --ink: #EDEFF3; --body: #C0C6D0; --muted: #8D95A3; --line: #2B313C; --bg: #101318; --bg-soft: #161A21; --surface: #1A1F27; --surface-2: #232935; --bg-dark: #0B0E12; } /* ------------------------------------------ 4. SARCELLE & AMBRE --- La palette précédente, conservée pour comparaison. */ :root[data-palette="sarcelle"] { --brand: #0E6E63; --brand-600: #0A574E; --brand-700: #07423B; --brand-050: #E6F4F1; --accent: #E8A33D; --accent-600: #CE8A25; --accent-050: #FDF3E2; --ink: #0B2320; --body: #3A4B48; --muted: #64756F; --line: #DCE7E4; --bg: #ffffff; --bg-soft: #F2F8F6; --surface: #ffffff; --surface-2: #EAF3F0; --bg-dark: #08201D; --grad-brand: linear-gradient(125deg, #0E6E63 0%, #17958A 55%, #E8A33D 100%); --grad-dark: linear-gradient(140deg, #08201D 0%, #0E453E 55%, #12645A 100%); --grad-amber: linear-gradient(120deg, #E8A33D 0%, #F2C078 100%); } :root[data-palette="sarcelle"][data-theme="dark"] { --brand: #3FBFAE; --brand-600: #2FA694; --brand-700: #1F8878; --brand-050: #0E3B36; --accent: #F0B75E; --accent-600: #D89B3F; --ink: #E9F3F0; --body: #BFD1CD; --muted: #8AA09B; --line: #22403B; --bg: #071815; --bg-soft: #0B221E; --surface: #0E2925; --surface-2: #143430; --bg-dark: #04100E; } /* --------------------------------------------- 5. VERT SAGE --- Vert Sage demandé par le client. L'action reprend le vert des icônes (#00694B) plutôt qu'un vert vif, à sa demande ; les verts sombres portent la structure et les fonds. Note : imiter de près la charte d'un éditeur partenaire peut suggérer un lien officiel — à valider avec Sage si le site devient public. */ :root[data-palette="ecosysteme"] { --brand: #00382B; --brand-600: #002A20; --brand-700: #001C15; --brand-050: #E5FBEE; --accent: #00694B; --accent-600: #00543C; --accent-050: #E5F4EE; --ink: #001C15; --body: #3A4A44; --muted: #64756E; --line: #DCE9E3; --bg: #ffffff; --bg-soft: #F3FAF6; --surface: #ffffff; --surface-2: #E5FBEE; --bg-dark: #001C15; --grad-brand: linear-gradient(125deg, #00382B 0%, #005A40 55%, #00694B 100%); --grad-dark: linear-gradient(140deg, #001C15 0%, #00382B 55%, #00694B 100%); --grad-amber: linear-gradient(120deg, #00694B 0%, #00A574 100%); --shadow-sm: 0 1px 2px rgba(0, 28, 21, .08), 0 1px 3px rgba(0, 28, 21, .10); --shadow-md: 0 8px 22px rgba(0, 28, 21, .14); --shadow-lg: 0 20px 44px rgba(0, 28, 21, .22); --ring: 0 0 0 3px rgba(0, 105, 75, .26); } :root[data-palette="ecosysteme"][data-theme="dark"] { --brand: #4BE87A; --brand-600: #2FD963; --brand-700: #17BC4B; --brand-050: #00382B; --accent: #2FA37B; --accent-600: #248A67; --accent-050: #06331B; --ink: #E8F8EE; --body: #BCD6C6; --muted: #86A092; --line: #1E3A2E; --bg: #04150F; --bg-soft: #071E15; --surface: #0A251A; --surface-2: #0F3123; --bg-dark: #020D09; } /* ------------------------------------------------ 6. MAROC --- Vert et rouge du drapeau marocain. Le rouge y est dominant et le vert porte l'étoile : on inverse ce rapport pour l'écran, où de grands aplats rouges fatiguent la lecture. Le vert structure, le rouge signe l'action. Les deux sont assombris par rapport aux teintes officielles, sans quoi le texte ne passe pas les seuils de contraste. */ :root[data-palette="maroc"] { --brand: #126043; --brand-600: #0E4B34; --brand-700: #0A3726; --brand-050: #E8F4EE; --accent: #C1272D; --accent-600: #A11F24; --accent-050: #FBEBEC; --ink: #0A2318; --body: #3D4B44; --muted: #66756D; --line: #DEE9E3; --bg: #ffffff; --bg-soft: #F4F9F6; --surface: #ffffff; --surface-2: #E8F4EE; --bg-dark: #0A3726; --grad-brand: linear-gradient(125deg, #0A3726 0%, #126043 55%, #C1272D 100%); --grad-dark: linear-gradient(140deg, #061F16 0%, #0A3726 55%, #126043 100%); --grad-amber: linear-gradient(120deg, #C1272D 0%, #E4696D 100%); --shadow-sm: 0 1px 2px rgba(10, 55, 38, .08), 0 1px 3px rgba(10, 55, 38, .10); --shadow-md: 0 8px 22px rgba(10, 55, 38, .14); --shadow-lg: 0 20px 44px rgba(10, 55, 38, .22); --ring: 0 0 0 3px rgba(193, 39, 45, .24); } :root[data-palette="maroc"][data-theme="dark"] { --brand: #4FBF8B; --brand-600: #38A876; --brand-700: #268F61; --brand-050: #0E4B34; --accent: #F2666B; --accent-600: #D94A50; --accent-050: #3A1416; --ink: #E9F5EF; --body: #BED4C8; --muted: #88A095; --line: #1F3B2F; --bg: #061711; --bg-soft: #0A2018; --surface: #0D291E; --surface-2: #133527; --bg-dark: #030E0A; } /* ===================================================================== LA COULEUR D'ACTION, PALETTE PAR PALETTE Deux problèmes distincts sont réglés ici. Voir tokens.css pour le raisonnement complet ; ce bloc n'en porte que les valeurs. 1. ECOSYSTEME N'AVAIT PAS DE COULEUR D'ACTION. Ses deux teintes de tête sont deux verts (#00382B et #00694B). Sur la page d'accueil, les deux couleurs les plus peintes étaient donc de la même famille : le bouton principal ne se distinguait ni des titres ni des bordures. Elle emprunte le rouge du « App » du logo. Les cinq autres palettes ont déjà un accent franchement distinct de leur marque et gardent le leur. 2. LE TEXTE DES BOUTONS ÉTAIT BLANC PAR PRINCIPE, ET ILLISIBLE. Mesures du blanc posé sur l'accent de chaque palette : sarcelle (ambre) 2,16:1 bordeaux (or) 2,56:1 graphite (orange) 3,18:1 violet (rose) 3,72:1 ecosysteme / maroc 5,84:1 Quatre palettes sur six sous le seuil de 4,5:1, dont deux très en dessous. Le défaut ne se voyait pas parce que seule « ecosysteme » a jamais été activée — il serait apparu au premier changement de palette depuis le back-office. L'encre suit désormais le fond, et non l'usage. ===================================================================== */ /* Le rouge du logo, seule teinte non verte que la marque possède. */ :root[data-palette="ecosysteme"] { --action: #C1272D; --action-600: #A11F24; --action-050: #FBEBEC; --action-ink: #ffffff; /* 5,84:1 */ } :root[data-palette="ecosysteme"][data-theme="dark"] { --action: #F2666B; --action-600: #D94A50; --action-050: #3A1416; --action-ink: #16100F; /* 6,15:1 — le blanc n'y tiendrait que 3,05 */ } /* Les autres gardent leur accent ; seule l'encre est corrigée. */ :root[data-palette="violet"] { --action-ink: #1A1332; } /* 4,77:1 */ :root[data-palette="violet"][data-theme="dark"] { --action-ink: #0F0B1E; } /* 7,90:1 */ :root[data-palette="bordeaux"] { --action-ink: #2A0F1B; } /* 6,94:1 */ :root[data-palette="bordeaux"][data-theme="dark"] { --action-ink: #180810; } :root[data-palette="graphite"] { --action-ink: #14171D; } /* 5,65:1 */ :root[data-palette="graphite"][data-theme="dark"] { --action-ink: #0D1015; } :root[data-palette="sarcelle"] { --action-ink: #0B2320; } /* 7,63:1 */ :root[data-palette="sarcelle"][data-theme="dark"] { --action-ink: #071815; } :root[data-palette="maroc"] { --action-ink: #ffffff; } /* 5,84:1 */ :root[data-palette="maroc"][data-theme="dark"] { --action-ink: #061711; } /* 6,05:1 */