/** * Palette de couleurs — source de vérité visuelle du thème CC-Origine * * Définit le namespace de contrat front partagé `--cc-couleur-front-*` (thème * ET plugin caisse-connect). Le SET PAR DÉFAUT vit dans `:root` ; les SETS * ALTERNATIFS s'expriment via `html[data-cc-palette="x"]` (spécificité 0,1,1) * qui prime sur `:root` (0,1,0) — quel que soit l'ordre de chargement, y compris * pour les surfaces rendues par le plugin (overlays, pastilles slider, point relais). * * La bascule est pilotée par le Customizer (réglage « Palette de couleurs », * registre cc_origine_palettes() dans functions.php), qui pose data-cc-palette * sur via le filtre language_attributes. * * Chargé AVANT base.css (cc_origine_enqueue_palette, prio 10 ; cc-base prio 12 * en dépend). Notation hex normalisée (#ffffff, pas white). * * SETS DISPONIBLES : * --- Clairs (surfaces blanches) --- * origine (:root, défaut) — or / crème, chaud * ardoise — bleu / sarcelle, froid * terre — terracotta / olivier, chaud-naturel * foret — vert profond / ambre, naturel * prune — aubergine / or rosé, élégant * marine — bleu-canard / corail, marin * --- Sombres (surfaces foncées) --- * nuit — ardoise sombre + or / sarcelle * carbone — anthracite chaud + corail / ambre * minuit — bleu nuit + cyan * * @file css/palette.css * @package CC-Origine * @subpackage CSS * @since 1.0.0 * @version 1.1.0 * @author Microlibre * @copyright 2026 Microlibre * @license GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html * @link https://github.com/jf34000/cc-origine */ :root { /* MIROIR de caisse-connect/frontend/css/cc-variables-frontend.css (tokens partagés) — garder STRICTEMENT identique (cf. invariant CLAUDE.md). */ /* ===== SET PAR DÉFAUT : « origine » (or / crème) ===== */ /* Marque + paires on-color (texte/icône posé sur le fond de marque) */ --cc-couleur-front-primaire: #e6b23c; --cc-couleur-front-primaire-texte: #ffffff; --cc-couleur-front-secondaire: #fff6e6; --cc-couleur-front-arriere-plan: #fff9f2; --cc-couleur-front-forte: #2a8c7a; --cc-couleur-front-forte-texte: #ffffff; /* Layer texte */ --cc-couleur-front-texte-corps: #334155; --cc-couleur-front-texte-titres: #1e293b; --cc-couleur-front-texte-principal: #000000; --cc-couleur-front-liens: #000000; /* Prix produits — token THÈME-ONLY (hors invariant miroir des 8 tokens partagés). Surcharge le vert natif WooCommerce $highlight appliqué à « ul.products li.product .price » (cf. css/defaut.css). Défaut = forte. */ --cc-couleur-front-prix: #2a8c7a; /* Prix en promotion — token THÈME-ONLY. Couleur du prix de vente promo () sur les vignettes (cf. css/defaut.css). Rouge par défaut. */ --cc-couleur-front-prix-promo: #d32f2f; /* Badge promo — tokens THÈME-ONLY. Le badge promo est le natif WooCommerce (span.onsale) restylé dans css/defaut.css. Déplacés depuis le plugin (cc-variables-frontend.css) puisque le thème en est désormais le seul consommateur. -hover et -pourcentage : réservés (non consommés en l'état). */ --cc-couleur-front-promo: #d32f2f; --cc-couleur-front-promo-hover: #b71c1c; --cc-couleur-front-promo-pourcentage: #ffff00; --cc-couleur-front-promo-texte: #ffff00; /* Surfaces */ --cc-couleur-front-fond-page: #ffffff; --cc-couleur-front-vignette: #ffffff; --cc-couleur-front-surface-blockwc: #ffffff; --cc-couleur-front-surface-champ: #ffffff; /* Bordures */ --cc-couleur-front-bordures: #00000014; --cc-couleur-front-bordure-champ: #d1d5db; --cc-couleur-front-bordure-sidebar: #d1d5db; /* Gris fonctionnels (filtres BeRocket) */ --cc-couleur-front-gris-fonce: #cccccc; --cc-couleur-front-gris-plus-fonce: #aaaaaa; /* Ombre légère (menus header) — constante, jamais redéfinie par un set */ --cc-couleur-front-ombre-legere: rgba(0, 0, 0, 0.2); } /* ===== SETS ALTERNATIFS ===== Redéfinissent DIRECTEMENT les tokens partagés → pilotent le plugin sans pont. Chaque set est COMPLET : il redéfinit tous les tokens du contrat (sauf -ombre-legere, constante). RÈGLE on-color : qui touche primaire/forte DOIT poser primaire-texte/forte-texte au bon contraste. */ /* ----- « ardoise » : bleu / sarcelle — froid, net ----- */ html[data-cc-palette="ardoise"] { --cc-couleur-front-primaire: #3b82f6; --cc-couleur-front-primaire-texte: #ffffff; /* primaire vif → blanc OK */ --cc-couleur-front-secondaire: #eef2ff; --cc-couleur-front-arriere-plan: #f8fafc; --cc-couleur-front-forte: #0f766e; --cc-couleur-front-forte-texte: #ffffff; /* forte foncé → blanc OK */ --cc-couleur-front-texte-corps: #334155; --cc-couleur-front-texte-titres: #0f172a; --cc-couleur-front-texte-principal: #0f172a; --cc-couleur-front-liens: #1d4ed8; --cc-couleur-front-prix: #0f766e; /* aligné sur forte */ --cc-couleur-front-prix-promo: #dc2626; --cc-couleur-front-promo: #dc2626; --cc-couleur-front-promo-hover: #b91c1c; --cc-couleur-front-promo-pourcentage: #fde047; --cc-couleur-front-promo-texte: #fde047; --cc-couleur-front-fond-page: #ffffff; --cc-couleur-front-vignette: #ffffff; --cc-couleur-front-surface-blockwc: #ffffff; --cc-couleur-front-surface-champ: #ffffff; --cc-couleur-front-bordures: #0f172a14; --cc-couleur-front-bordure-champ: #cbd5e1; --cc-couleur-front-bordure-sidebar: #cbd5e1; --cc-couleur-front-gris-fonce: #cbd5e1; --cc-couleur-front-gris-plus-fonce: #94a3b8; } /* ----- « terre » : terracotta / olivier — chaud, naturel ----- */ html[data-cc-palette="terre"] { --cc-couleur-front-primaire: #c8603b; --cc-couleur-front-primaire-texte: #ffffff; /* terracotta → blanc OK */ --cc-couleur-front-secondaire: #f7e9e1; --cc-couleur-front-arriere-plan: #fbf3ee; --cc-couleur-front-forte: #6b7d3a; --cc-couleur-front-forte-texte: #ffffff; /* olivier foncé → blanc OK */ --cc-couleur-front-texte-corps: #4b3a31; --cc-couleur-front-texte-titres: #3a2a22; --cc-couleur-front-texte-principal: #2a1c16; --cc-couleur-front-liens: #2a1c16; --cc-couleur-front-prix: #6b7d3a; /* aligné sur forte */ --cc-couleur-front-prix-promo: #b3261e; --cc-couleur-front-promo: #b3261e; --cc-couleur-front-promo-hover: #8f1c16; --cc-couleur-front-promo-pourcentage: #ffe7a3; --cc-couleur-front-promo-texte: #ffe7a3; --cc-couleur-front-fond-page: #ffffff; --cc-couleur-front-vignette: #ffffff; --cc-couleur-front-surface-blockwc: #ffffff; --cc-couleur-front-surface-champ: #ffffff; --cc-couleur-front-bordures: #2a1c1614; --cc-couleur-front-bordure-champ: #d9c4b6; --cc-couleur-front-bordure-sidebar: #d9c4b6; --cc-couleur-front-gris-fonce: #d8cabf; --cc-couleur-front-gris-plus-fonce: #b3a092; } /* ----- « foret » : vert profond / ambre — naturel, dense ----- */ html[data-cc-palette="foret"] { --cc-couleur-front-primaire: #2f6b4f; --cc-couleur-front-primaire-texte: #ffffff; /* vert foncé → blanc OK */ --cc-couleur-front-secondaire: #e6f0ea; --cc-couleur-front-arriere-plan: #f3f8f4; --cc-couleur-front-forte: #a86f12; --cc-couleur-front-forte-texte: #ffffff; /* ambre foncé → blanc OK */ --cc-couleur-front-texte-corps: #2c3a32; --cc-couleur-front-texte-titres: #1c2b22; --cc-couleur-front-texte-principal: #12211a; --cc-couleur-front-liens: #25694f; --cc-couleur-front-prix: #a86f12; /* aligné sur forte (ambre lisible/blanc) */ --cc-couleur-front-prix-promo: #c0341d; --cc-couleur-front-promo: #c0341d; --cc-couleur-front-promo-hover: #9b2817; --cc-couleur-front-promo-pourcentage: #ffe9b0; --cc-couleur-front-promo-texte: #ffe9b0; --cc-couleur-front-fond-page: #ffffff; --cc-couleur-front-vignette: #ffffff; --cc-couleur-front-surface-blockwc: #ffffff; --cc-couleur-front-surface-champ: #ffffff; --cc-couleur-front-bordures: #12211a14; --cc-couleur-front-bordure-champ: #c3d4c8; --cc-couleur-front-bordure-sidebar: #c3d4c8; --cc-couleur-front-gris-fonce: #cdd9d0; --cc-couleur-front-gris-plus-fonce: #a3b3a8; } /* ----- « prune » : aubergine / or rosé — élégant ----- */ html[data-cc-palette="prune"] { --cc-couleur-front-primaire: #7a3b63; --cc-couleur-front-primaire-texte: #ffffff; /* aubergine → blanc OK */ --cc-couleur-front-secondaire: #f3e6ef; --cc-couleur-front-arriere-plan: #faf3f7; --cc-couleur-front-forte: #a9702b; --cc-couleur-front-forte-texte: #ffffff; /* or foncé → blanc OK */ --cc-couleur-front-texte-corps: #463542; --cc-couleur-front-texte-titres: #33232f; --cc-couleur-front-texte-principal: #241621; --cc-couleur-front-liens: #7a3b63; --cc-couleur-front-prix: #a9702b; /* aligné sur forte */ --cc-couleur-front-prix-promo: #c02d4a; --cc-couleur-front-promo: #c02d4a; --cc-couleur-front-promo-hover: #9d2440; --cc-couleur-front-promo-pourcentage: #ffe2b0; --cc-couleur-front-promo-texte: #ffe2b0; --cc-couleur-front-fond-page: #ffffff; --cc-couleur-front-vignette: #ffffff; --cc-couleur-front-surface-blockwc: #ffffff; --cc-couleur-front-surface-champ: #ffffff; --cc-couleur-front-bordures: #24162114; --cc-couleur-front-bordure-champ: #d8c5d2; --cc-couleur-front-bordure-sidebar: #d8c5d2; --cc-couleur-front-gris-fonce: #d6c8d1; --cc-couleur-front-gris-plus-fonce: #b298ab; } /* ----- « marine » : bleu-canard / corail — marin, vif ----- */ html[data-cc-palette="marine"] { --cc-couleur-front-primaire: #1f5673; --cc-couleur-front-primaire-texte: #ffffff; /* bleu-canard foncé → blanc OK */ --cc-couleur-front-secondaire: #e4eef2; --cc-couleur-front-arriere-plan: #f1f6f8; --cc-couleur-front-forte: #c0512f; --cc-couleur-front-forte-texte: #ffffff; /* corail foncé → blanc OK */ --cc-couleur-front-texte-corps: #2c3d45; --cc-couleur-front-texte-titres: #19282f; --cc-couleur-front-texte-principal: #0f1c22; --cc-couleur-front-liens: #1f5673; --cc-couleur-front-prix: #c0512f; /* aligné sur forte */ --cc-couleur-front-prix-promo: #d22f2f; --cc-couleur-front-promo: #d22f2f; --cc-couleur-front-promo-hover: #ad2424; --cc-couleur-front-promo-pourcentage: #ffe1b3; --cc-couleur-front-promo-texte: #ffe1b3; --cc-couleur-front-fond-page: #ffffff; --cc-couleur-front-vignette: #ffffff; --cc-couleur-front-surface-blockwc: #ffffff; --cc-couleur-front-surface-champ: #ffffff; --cc-couleur-front-bordures: #0f1c2214; --cc-couleur-front-bordure-champ: #c2d2d8; --cc-couleur-front-bordure-sidebar: #c2d2d8; --cc-couleur-front-gris-fonce: #c8d6db; --cc-couleur-front-gris-plus-fonce: #97acb3; } /* ===== SETS SOMBRES ===== Mode sombre : en plus de primaire/forte, ces sets INVERSENT le layer texte (clair sur foncé) et les surfaces (fond-page/vignette/surfaces foncées, arriere-plan plus foncé encore). RÈGLE on-color maintenue : primaire/forte restent vifs, donc primaire-texte/forte-texte passent en FONCÉ (sauf primaire medium → blanc). Bordures translucides claires (#ffffff__). */ /* ----- « nuit » : ardoise sombre + or / sarcelle (marque origine de nuit) ----- */ html[data-cc-palette="nuit"] { --cc-couleur-front-primaire: #e6b23c; --cc-couleur-front-primaire-texte: #1a1407; /* or clair → texte foncé */ --cc-couleur-front-secondaire: #20242e; --cc-couleur-front-arriere-plan: #14171f; --cc-couleur-front-forte: #34b39c; --cc-couleur-front-forte-texte: #06201c; /* sarcelle vif → texte foncé */ --cc-couleur-front-texte-corps: #c5ccd6; --cc-couleur-front-texte-titres: #f1f4f8; --cc-couleur-front-texte-principal: #f8fafc; --cc-couleur-front-liens: #6fb3ff; --cc-couleur-front-prix: #34b39c; /* aligné sur forte */ --cc-couleur-front-prix-promo: #ff6b6b; --cc-couleur-front-promo: #e5484d; --cc-couleur-front-promo-hover: #c93b40; --cc-couleur-front-promo-pourcentage: #ffe066; --cc-couleur-front-promo-texte: #ffe066; --cc-couleur-front-fond-page: #1a1e27; --cc-couleur-front-vignette: #1f2430; --cc-couleur-front-surface-blockwc: #1a1e27; --cc-couleur-front-surface-champ: #20252f; --cc-couleur-front-bordures: #ffffff14; --cc-couleur-front-bordure-champ: #3a4150; --cc-couleur-front-bordure-sidebar: #3a4150; --cc-couleur-front-gris-fonce: #3a4150; --cc-couleur-front-gris-plus-fonce: #6b7488; } /* ----- « carbone » : anthracite chaud + corail / ambre ----- */ html[data-cc-palette="carbone"] { --cc-couleur-front-primaire: #e07a4f; --cc-couleur-front-primaire-texte: #1c0f08; /* corail clair → texte foncé */ --cc-couleur-front-secondaire: #262320; --cc-couleur-front-arriere-plan: #16140f; --cc-couleur-front-forte: #d9a441; --cc-couleur-front-forte-texte: #1f1604; /* ambre vif → texte foncé */ --cc-couleur-front-texte-corps: #cfc8bf; --cc-couleur-front-texte-titres: #f5f1ea; --cc-couleur-front-texte-principal: #faf7f2; --cc-couleur-front-liens: #e6a86b; --cc-couleur-front-prix: #d9a441; /* aligné sur forte */ --cc-couleur-front-prix-promo: #ff7a6b; --cc-couleur-front-promo: #e5564d; --cc-couleur-front-promo-hover: #c9433b; --cc-couleur-front-promo-pourcentage: #ffd24d; --cc-couleur-front-promo-texte: #ffd24d; --cc-couleur-front-fond-page: #1c1a16; --cc-couleur-front-vignette: #221f1a; --cc-couleur-front-surface-blockwc: #1c1a16; --cc-couleur-front-surface-champ: #232019; --cc-couleur-front-bordures: #ffffff12; --cc-couleur-front-bordure-champ: #423d34; --cc-couleur-front-bordure-sidebar: #423d34; --cc-couleur-front-gris-fonce: #423d34; --cc-couleur-front-gris-plus-fonce: #756d60; } /* ----- « minuit » : bleu nuit + cyan ----- */ html[data-cc-palette="minuit"] { --cc-couleur-front-primaire: #5b8def; --cc-couleur-front-primaire-texte: #ffffff; /* bleu medium → blanc OK */ --cc-couleur-front-secondaire: #1a2030; --cc-couleur-front-arriere-plan: #0f1320; --cc-couleur-front-forte: #2dd4bf; --cc-couleur-front-forte-texte: #04201c; /* cyan vif → texte foncé */ --cc-couleur-front-texte-corps: #c2c9d6; --cc-couleur-front-texte-titres: #eef2fb; --cc-couleur-front-texte-principal: #f7f9ff; --cc-couleur-front-liens: #7fb0ff; --cc-couleur-front-prix: #2dd4bf; /* aligné sur forte */ --cc-couleur-front-prix-promo: #ff6b81; --cc-couleur-front-promo: #f04668; --cc-couleur-front-promo-hover: #d2375a; --cc-couleur-front-promo-pourcentage: #ffe066; --cc-couleur-front-promo-texte: #ffe066; --cc-couleur-front-fond-page: #151b2b; --cc-couleur-front-vignette: #1a2133; --cc-couleur-front-surface-blockwc: #151b2b; --cc-couleur-front-surface-champ: #1b2236; --cc-couleur-front-bordures: #ffffff14; --cc-couleur-front-bordure-champ: #323b52; --cc-couleur-front-bordure-sidebar: #323b52; --cc-couleur-front-gris-fonce: #323b52; --cc-couleur-front-gris-plus-fonce: #5d6884; }