/* ========================================================================== 01 — JETONS DE DESIGN Source unique de vérité. Aucune valeur brute (couleur, taille, espacement) ne doit apparaître ailleurs que dans ce fichier. DIRECTION : blanc et gris. Changée le 18 septembre 2026, à la demande directe de la cliente en appel : le fond crème chaud et les neutres bruns ne lui plaisaient pas. Nouvelle base blanc/gris, calée sur les trois neutres de sa palette Elementor officielle (« Palette coco passion », voir plus bas) — l'ancienne direction « plein soleil » (fond crème, neutres tirant vers le brun) est abandonnée. Le spectre de huit couleurs de fruits, lui, ne change pas : chaque famille de produit garde la sienne, sur toute la boutique. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COULEUR DE MARQUE Le bordeaux #961f43 est relevé sur le site existant : c'est la couleur de Coco Passion, elle est conservée à l'identique. Elle reste la couleur structurante — actions, liens, éléments actifs. -------------------------------------------------------------------- */ --cp-bordeaux: #961f43; /* 7,62:1 sur fond */ --cp-bordeaux-fonce: #7a1836; /* survol, états actifs */ --cp-bordeaux-voile: #fbe9ee; /* aplats légers, fonds de message */ --cp-or: #8a6a15; /* distinctions, médailles — 5,1:1 sur fond */ --cp-or-voile: #fcf2dc; /* ---------------------------------------------------------------------- LES SIX FAMILLES Le site vend six familles de produits et n'en distingue aucune visuellement. Chacune reçoit ici une teinte, empruntée à l'île : le flamboyant, l'hibiscus, la mangue, la canne, le lagon, le bougainvillier. Six teintes réparties sur toute la roue chromatique (11°, 37°, 82°, 172°, 298°, 343°) : elles restent distinguables même côte à côte, et même pour un œil déficient en rouge ou en vert. Trois valeurs par famille, et chacune a un emploi précis : -vif aplats et traits, JAMAIS de texte par-dessus -voile fond de pastille -texte texte sur le voile comme sur le fond (≥ 4,6:1 partout) -------------------------------------------------------------------- */ /* Confitures — flamboyant */ --cp-f-flamboyant: #d9411e; --cp-f-flamboyant-voile: #fbe7e2; --cp-f-flamboyant-texte: #bf391a; /* Gelées — hibiscus */ --cp-f-hibiscus: #e5567f; --cp-f-hibiscus-voile: #fbe2e9; --cp-f-hibiscus-texte: #c61e4f; /* Marmelades — mangue */ --cp-f-mangue: #e8960f; --cp-f-mangue-voile: #fcf2e1; --cp-f-mangue-texte: #98620a; /* Miels — canne */ --cp-f-canne: #6f9c1f; --cp-f-canne-voile: #f2fae3; --cp-f-canne-texte: #577b18; /* Coffrets — lagon */ --cp-f-lagon: #0f8e7e; --cp-f-lagon-voile: #e1fcf8; --cp-f-lagon-texte: #0d7d6f; /* Confits — bougainvillier */ --cp-f-bougainv: #9b3f9e; --cp-f-bougainv-voile: #f5e7f6; --cp-f-bougainv-texte: #9b3f9e; /* Chutneys — vacoa Ajoutee le 5 septembre 2026 : la boutique compte huit familles, pas six. Les deux manquantes retombaient sur le bordeaux de marque, donc sur la meme teinte que les gelees a l'oeil. Le vert du vacoa se loge dans le plus grand trou de la roue (137°, entre la canne a 82° et le lagon a 172°) : c'est la seule place ou une septieme teinte reste distinguable. */ --cp-f-vacoa: #2f8b45; --cp-f-vacoa-voile: #e5f6e9; --cp-f-vacoa-texte: #216b34; /* Specialites artisanales — basalte Volontairement sans teinte franche. Il n'existe plus de place sur la roue ou une huitieme couleur resterait distincte des sept autres ; et cette famille est justement celle qui n'est pas un fruit. Un neutre la designe sans mentir sur son contenu — repasse au gris le 18 septembre 2026 (meme teinte H 305 deg que les neutres du site) : c'etait jusque-la le seul neutre CHAUD du fichier, une teinte beige qui restait meme apres la bascule du fond vers le blanc et le gris. */ --cp-f-basalte: #6a5868; --cp-f-basalte-voile: #efecee; --cp-f-basalte-texte: #4f404e; /* ---------------------------------------------------------------------- LA COULEUR D'ACCENT Ajoutee le 9 septembre 2026, et c'est une SEPARATION, pas une couleur de plus : la mangue jouait deux roles a la fois. Elle est la teinte de la famille Marmelades, et elle etait aussi, un peu partout, la couleur qui souligne — la frise du pied de page, les medailles des Rubans, le mot mis en valeur dans un titre, le losange des Mots defilants, la jauge du Procede. Les deux usages n'ont rien a voir : changer la couleur qui souligne ne doit pas repeindre les Marmelades. Tout ce qui SOULIGNE passe donc par `--cp-accent`, et une seule ligne suffit desormais a le changer sur tout le site. -------------------------------------------------------------------- */ /* Le rose de la marque, releve le 9 septembre 2026 sur la photo produit du Goyavier (H 344/341 deg, contre H 342 deg pour le bordeaux — meme teinte), faute de mieux : aucune valeur officielle n'existait alors. Remplace le 16 septembre 2026 par la valeur OFFICIELLE, fournie par la cliente via la palette Elementor « Palette coco passion » : #e12167 (H 338 deg, S 76 %, L 51 %). La teinte confirme l'echantillon photo a 4 degres pres — c'est bien la meme famille que le bordeaux — mais la valeur officielle est nettement plus saturee et plus vive ; elle remplace donc l'approximation plutot que de s'ajouter a cote. -vif aplats, traits, grands titres, JAMAIS de texte par-dessus. 4,25:1 sur fond, 3,67:1 sur encre, 4,55:1 sur blanc. -voile fond de pastille -texte petit texte sur fond (6,79:1) — le rose du -vif seul ne suffirait pas pour du texte, ce second jeton reste requis. */ --cp-rose: #e12167; --cp-rose-voile: #fbe9f0; --cp-rose-texte: #a51d4f; /* Petit texte rose sur l'encre (pied de page, frises sombres) : le -vif n'y fait que 3,44:1. Rose éclairci de 26 % vers le blanc : 4,75:1. Ajouté le 2 oct. 2026 sur relevé Lighthouse. */ --cp-rose-sur-encre: #e95b8f; --cp-accent: var(--cp-rose); --cp-accent-voile: var(--cp-rose-voile); --cp-accent-texte: var(--cp-rose-texte); /* Valeurs prises par une carte selon sa famille (voir 04-woocommerce.css). Par défaut, une famille inconnue retombe sur le bordeaux de marque. */ --cp-famille: var(--cp-bordeaux); --cp-famille-voile: var(--cp-bordeaux-voile); --cp-famille-texte: var(--cp-bordeaux); /* ---------------------------------------------------------------------- NEUTRES Refaite le 18 septembre 2026, en DEUX temps le même jour : une première passe a changé les valeurs sans toucher aux noms ; la cliente a rappelé pour dire qu'il restait du beige un peu partout et demander que les jetons eux-mêmes soient renommés — plus aucune trace de « crème » ou « sable » nulle part, ni dans les valeurs ni dans les noms. `--cp-creme` devient `--cp-fond`, `--cp-sable` devient `--cp-gris-voile`, partout dans les 20 fichiers qui les consomment (thème enfant et mu-plugin). Les six autres noms (`--cp-encre`, `--cp-texte`, `--cp-texte-doux`, `--cp-trait`, `--cp-trait-fort`, `--cp-blanc`) n'avaient rien de chaud dans leur nom et ne changent pas. Trois valeurs viennent directement de la palette Elementor officielle de la cliente « Palette coco passion » (fournie le 16 septembre) : `#80797f`, `#d1ccd1` et `#f8f4f8`, quasi neutres avec une pointe de mauve à peine perceptible (H 300-309 deg, S 3-22 %). Les quatre autres valeurs sont dérivées dans la même teinte, faute d'équivalent officiel. -------------------------------------------------------------------- */ --cp-encre: #262225; /* titres, fond du pied de page — 15,7:1 sur blanc, jamais #000 */ --cp-texte: #463e46; /* corps de texte — 10,3:1 sur blanc */ --cp-texte-doux: #6d616c; /* légendes, métadonnées — 5,9:1 sur blanc, 4,65:1 sur gris-voile (était #726570 : 4,36:1 sur gris-voile, sous le seuil — 2 oct. 2026) */ --cp-trait: #d1ccd1; /* filets et séparateurs décoratifs — gris officiel */ --cp-trait-fort: #80797f; /* bordures de champs — 4,23:1, gris officiel, WCAG 1.4.11 */ --cp-gris-voile: #e7e4e7; /* fonds de section alternés, ex-« sable » */ --cp-fond: #f8f4f8; /* fond de page — gris officiel, ex-« crème » */ --cp-blanc: #ffffff; /* cartes, surfaces surélevées */ /* ---------------------------------------------------------------------- TYPOGRAPHIE Change le 9 septembre 2026. Young Serif et Schibsted Grotesk tenaient le registre « etiquette imprimee », chaleureux — mais aussi celui du cafe de specialite et de la boulangerie de quartier. La cliente vise plus haut de gamme. Cormorant Garamond porte les titres : contraste eleve, longues ascendantes, le registre de l'epicerie fine et du coffret. Elle est posee en 600 et JAMAIS sous 20 px — son oeil est petit et ses deliees s'effacent au corps de texte. Jost assure le texte courant, les prix et l'interface. Geometrique et sans chaleur, c'est lui le contrepoint : sans lui, une Garamond seule fait faire-part de mariage. -------------------------------------------------------------------- */ --cp-font-titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --cp-font-texte: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; /* Une famille d'appoint, employee a doses homeopathiques et jamais pour du texte courant : DM Mono pour les surtitres et les chiffres de preuve (l'espacement fixe aligne les colonnes de donnees). `--cp-font-accent` n'est plus une famille a part. Fraunces jouait le mot mis en valeur dans un titre ; sous une Garamond, elle detonnait — et Cormorant possede une VRAIE italique, qui fait le meme travail dans la meme voix. Une famille entiere de moins a telecharger. */ --cp-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --cp-font-accent: var(--cp-font-titre); /* Échelle fluide : la valeur s'adapte à la largeur d'écran sans point de rupture. Évite les 33 tailles de police en dur relevées sur le site. REHAUSSEE de ~10 % sur les titres et de 1 px sur le texte le 9 septembre : Cormorant et Jost ont toutes deux un oeil nettement plus petit que les polices qu'elles remplacent. A taille de police egale, elles PARAISSENT plus petites — reprendre l'echelle telle quelle aurait donne une page rapetissee, pas une page plus fine. */ --cp-t-display: clamp(3.1rem, 1.8rem + 5.2vw, 5.6rem); --cp-t-xxl: clamp(2.25rem, 1.55rem + 2.8vw, 3.4rem); --cp-t-xl: clamp(1.7rem, 1.35rem + 1.4vw, 2.4rem); --cp-t-l: clamp(1.35rem, 1.18rem + 0.7vw, 1.65rem); --cp-t-m: 1.125rem; /* 18px — corps de texte */ --cp-t-s: 1rem; /* 16px */ --cp-t-xs: 0.8125rem; /* 13px — métadonnées, surtitres (DM Mono, capitales) */ /* Interlignes de titre plus SERRES qu'avant, contrairement a l'intuition : l'oeil de Cormorant etant petit pour un corps donne, ses lignes paraissent deja tres aerees. Garder 1,16 les faisait flotter. */ --cp-lh-serre: 1.02; --cp-lh-titre: 1.08; --cp-lh-texte: 1.7; /* Jost respire un peu plus que Schibsted */ /* Cormorant ne veut presque pas de chasse negative : ses deliees se touchent des qu'on serre. */ --cp-ls-display: -0.003em; --cp-ls-surtitre: 0.16em; /* interlettrage des surtitres capitales */ /* ---------------------------------------------------------------------- RYTHME VERTICAL — base 4px, progression régulière -------------------------------------------------------------------- */ --cp-e-1: 0.25rem; --cp-e-2: 0.5rem; --cp-e-3: 0.75rem; --cp-e-4: 1rem; --cp-e-5: 1.5rem; --cp-e-6: 2rem; --cp-e-7: 3rem; --cp-e-8: 4rem; --cp-e-9: 6rem; --cp-e-10: 8rem; /* ---------------------------------------------------------------------- L'EN-TÊTE COLLÉ 55 px : hauteur mesurée de `#site-header` une fois collé — OceanWP le fait passer de 75 à 55 px au défilement (classe `shrink-header`). Tout bloc qui se colle en cours de page part de `--cp-collant`, jamais du haut de la fenêtre : sinon il s'arrête DANS la bande de l'en-tête, et comme l'en-tête flotte au-dessus, le bloc transparaît au travers. -------------------------------------------------------------------- */ --cp-entete-collee: 55px; --cp-collant: calc(var(--cp-entete-collee) + var(--cp-e-5)); /* ---------------------------------------------------------------------- FORMES ET PROFONDEUR 22 rayons de bordure relevés sur le site. Il en reste 3. Les ombres reprennent la teinte de `--cp-encre` (neutre, plus de brun) depuis le 18 septembre 2026. -------------------------------------------------------------------- */ --cp-r-sm: 3px; --cp-r-md: 6px; --cp-r-pill: 999px; /* ---------------------------------------------------------------------- LE PANNEAU DU PANIER La gouttiere interieure du panneau deroulant de l'en-tete. Une seule valeur pour l'en-tete, la liste et le pied : c'est ce qui fait tenir l'alignement vertical du panneau, et c'est la seule chose a changer pour le resserrer ou l'aerer. -------------------------------------------------------------------- */ --cp-mini-marge: 1.25rem; --cp-ombre-1: 0 1px 2px rgba(38, 34, 37, 0.06); --cp-ombre-2: 0 4px 16px -4px rgba(38, 34, 37, 0.12); --cp-ombre-3: 0 16px 40px -12px rgba(38, 34, 37, 0.20); /* ---------------------------------------------------------------------- MOUVEMENT Une seule courbe, deux durées. Toute animation qui sort de ce cadre doit se justifier. -------------------------------------------------------------------- */ --cp-courbe: cubic-bezier(0.22, 0.61, 0.36, 1); --cp-vite: 160ms; --cp-lent: 380ms; /* ---------------------------------------------------------------------- GABARIT -------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- LA BOUTIQUE Deux valeurs seulement, mais elles gouvernent toute la page de listing : la largeur de la colonne de filtres, et la largeur minimale d'une carte produit — c'est elle qui decide du nombre de colonnes, sans point de rupture ecrit a la main. -------------------------------------------------------------------- */ --cp-filtres-largeur: 254px; --cp-carte-min: 248px; --cp-largeur: 1240px; --cp-largeur-txt: 68ch; /* longueur de ligne confortable en lecture */ --cp-gouttiere: clamp(1.25rem, 4vw, 3rem); } /* ========================================================================== LES HUIT FAMILLES, APPLIQUEES Trois variables par famille, une classe par famille. `cp_classe_famille()` (mu-plugins/cocopassion-eshop.php) pose `cp-fam-` sur la carte produit, sur `` en fiche et en archive de famille, sur le bandeau de la boutique, sur les puces de filtre et sur le sous-menu de navigation. Tout ce qui doit prendre la couleur lit ensuite `--cp-famille` sans avoir a savoir de quelle famille il s'agit. Ces regles vivent dans la feuille des JETONS et non dans celle de WooCommerce parce que le sous-menu « E-shop » les emploie sur toutes les pages du site, boutique ou non. Ajouter une famille : trois valeurs plus haut, une regle ici, une ligne dans `cp_familles_boutique()`. ========================================================================== */ body.cp .cp-fam-confitures, body.cp.cp-fam-confitures { --cp-famille: var(--cp-f-flamboyant); --cp-famille-voile: var(--cp-f-flamboyant-voile); --cp-famille-texte: var(--cp-f-flamboyant-texte); } body.cp .cp-fam-gelees, body.cp.cp-fam-gelees { --cp-famille: var(--cp-f-hibiscus); --cp-famille-voile: var(--cp-f-hibiscus-voile); --cp-famille-texte: var(--cp-f-hibiscus-texte); } body.cp .cp-fam-marmelades, body.cp.cp-fam-marmelades { --cp-famille: var(--cp-f-mangue); --cp-famille-voile: var(--cp-f-mangue-voile); --cp-famille-texte: var(--cp-f-mangue-texte); } body.cp .cp-fam-miel, body.cp.cp-fam-miel { --cp-famille: var(--cp-f-canne); --cp-famille-voile: var(--cp-f-canne-voile); --cp-famille-texte: var(--cp-f-canne-texte); } body.cp .cp-fam-les-coffrets-de-coco, body.cp.cp-fam-les-coffrets-de-coco { --cp-famille: var(--cp-f-lagon); --cp-famille-voile: var(--cp-f-lagon-voile); --cp-famille-texte: var(--cp-f-lagon-texte); } body.cp .cp-fam-confit, body.cp.cp-fam-confit { --cp-famille: var(--cp-f-bougainv); --cp-famille-voile: var(--cp-f-bougainv-voile); --cp-famille-texte: var(--cp-f-bougainv-texte); } body.cp .cp-fam-chutneys, body.cp.cp-fam-chutneys { --cp-famille: var(--cp-f-vacoa); --cp-famille-voile: var(--cp-f-vacoa-voile); --cp-famille-texte: var(--cp-f-vacoa-texte); } body.cp .cp-fam-les-preparations-artisanales, body.cp.cp-fam-les-preparations-artisanales { --cp-famille: var(--cp-f-basalte); --cp-famille-voile: var(--cp-f-basalte-voile); --cp-famille-texte: var(--cp-f-basalte-texte); } /* Respect du réglage système « réduire les animations ». Non négociable : c'est un critère WCAG, pas une préférence esthétique. */ @media (prefers-reduced-motion: reduce) { :root { --cp-vite: 1ms; --cp-lent: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }