/* ============================================================ MOC CAISSE — jetons de la charte ÉMAIL Version 1.0, 27/07/2026. Ne pas écrire de valeur en dur ailleurs. UNE SEULE valeur change d'un client à l'autre : --accent-h. Tout le reste du fichier est identique pour tous les commerces. Copie conforme de l'export Claude Design. Ne pas modifier ici. ============================================================ */ :root { /* ---------- 1. LA VARIABLE CLIENT, ET ELLE SEULE ---------- */ /* Teinte de l'accent, entier de 0 à 359, choisi à la roue. 35 = Chez Doss -> #A8471F 150 = Maquis Le Baobab -> #0E6B4A 245 = console MOC, fixe -> #1F5B8A Arc 15 à 30 : rouge franc, choisissable mais signalé à la saisie. */ --accent-h: 35; /* Clarté et chroma sont FIGÉS par la charte. Ne pas exposer au client : c'est ce qui garantit le contraste sans re-mesure à l'installation. */ --accent-l: 0.52; --accent-c: 0.16; /* Chaîne de dérivation complète. Trois lignes, aucune valeur à écrire à la main. */ --couleur-accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h)); --couleur-accent-survol: oklch(calc(var(--accent-l) - 0.06) var(--accent-c) var(--accent-h)); --couleur-accent-enfonce:oklch(calc(var(--accent-l) - 0.12) var(--accent-c) var(--accent-h)); --couleur-sur-accent: #FFFFFF; /* 5,85:1 minimum quelle que soit la teinte */ /* ---------- 2. SOCLE NEUTRE, INVARIABLE ---------- */ --couleur-encre: #16181A; /* 17,80:1 sur papier, 15,76:1 sur fond */ --couleur-papier: #FFFFFF; /* surface des panneaux */ --couleur-fond: #F2F1EE; /* fond d'application */ --couleur-fond-attenue: #E4E2DD; /* en-têtes de zone, hachures, gelé */ --couleur-surface-alternee: #FAF9F7; /* une ligne sur deux dans les tableaux */ --couleur-texte-secondaire: #5C5C57; /* 6,72:1 sur papier, 5,95:1 sur fond */ --couleur-trait: #8E8E88; /* 3,29:1, cadres et traits NON textuels */ --couleur-filet: #D8D6D1; /* 1,45:1, DÉCORATIF, jamais porteur */ /* Cran « atténuation du soir » : ces deux valeurs seulement changent. Aucun rapport de contraste ne descend, rien à re-vérifier. */ --couleur-fond-soir: #E4E2DD; --couleur-papier-soir: #F7F6F3; /* Accent propre à l'éditeur, console web MOC. Fixe, jamais dérivé du client. */ --couleur-accent-moc: #1F5B8A; /* 7,19:1 sur papier */ /* ---------- 3. RAPPORTS MESURÉS, POUR MÉMOIRE ---------- encre / papier ................. 17,80:1 AAA papier / encre ................. 17,80:1 AAA (monnaie à rendre, total) encre / fond ................... 15,76:1 AAA encre / hachure ................ 13,75:1 AAA texte-secondaire / papier ....... 6,72:1 AA texte-secondaire / fond ......... 5,95:1 AA sur-accent / accent h=35 ........ 5,85:1 AA, AAA en grande taille sur-accent / accent h=150 ....... 6,51:1 AA sur-accent / accent h=245 ....... 7,19:1 AAA trait / papier .................. 3,29:1 AA non textuel Le jeton --couleur-filet est hors seuil : il ne sépare que des lignes d'un tableau déjà encadré en encre. Ne jamais y poser de texte. */ /* ---------- 4. ÉTATS DES COMPOSANTS ---------- */ --etat-survol-surface: var(--couleur-surface-alternee); /* souris uniquement */ --etat-enfonce-surface: var(--couleur-fond-attenue); --etat-enfonce-decalage: 2px; /* translation vers le bas, pas d'ombre */ --etat-desactive-trait: var(--couleur-trait); --etat-desactive-texte: var(--couleur-texte-secondaire); --etat-focus-trait: var(--couleur-encre); --etat-focus-epaisseur: 3px; --etat-focus-decalage: 2px; /* outline-offset, à l'extérieur */ --etat-focus-trait-console: var(--couleur-accent-moc); /* à l'intérieur, -3px */ /* Le survol n'existe pas sur les écrans tactiles : un état de survol persistant après un appui est une fausse information. */ /* ---------- 5. TRAITS, PORTEURS DE SENS ---------- */ --trait-separation: 1px; /* entre deux lignes d'une même liste */ --trait-zone: 2px; /* cadre d'une zone, bouton secondaire */ --trait-separation-majeure:3px; /* entre deux zones fonctionnelles, champ actif */ --trait-liseré-marque: 4px; /* dernier élément touché, en accent */ --trait-filet-marque: 6px; /* sous le bandeau du commerce, en accent */ --trait-ligne-au-poids: 8px; /* bord gauche d'une ligne vendue au kilogramme */ --trait-anciennete: 10px; /* bord gauche d'une commande de plus de 60 min */ --trait-double: 4px double var(--couleur-encre); /* vignette au poids */ /* ---------- 6. TYPOGRAPHIE ---------- */ --police-libelle: 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --police-chiffre: 'JetBrains Mono', Consolas, 'Roboto Mono', 'DejaVu Sans Mono', monospace; /* La chasse fixe est réservée aux chiffres, aux codes et aux sigles. Jamais de prose, jamais un libellé de bouton. */ --graisse-normale: 400; --graisse-moyenne: 600; --graisse-forte: 700; --taille-monnaie: 180px; /* monnaie à rendre, écran d'encaissement */ --taille-total: 96px; /* total permanent */ --taille-geante: 84px; /* poids saisi, comptage */ --taille-ecart: 68px; --taille-grande: 58px; /* total du panier */ --taille-montant: 40px; --taille-montant-s: 28px; --taille-titre: 22px; --taille-libelle: 17px; --taille-corps: 15px; --taille-tableau: 13px; --taille-note: 12px; --taille-mini: 11px; --interligne-serre: 1.15; --interligne-corps: 1.55; --interligne-note: 1.6; /* ---------- 7. ESPACEMENTS, BASE 8 ---------- */ --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-6: 24px; --espace-8: 32px; /* ---------- 8. CIBLES TACTILES ---------- */ --cible-minimale: 60px; /* jamais en dessous, croix de suppression comprise */ --cible-action: 88px; /* bouton principal, 1280 x 800 */ --cible-action-1366: 76px; /* repli 1366 x 768, voir bloc 5 des règles */ --cible-ligne-panier: 84px; --cible-ligne-au-poids: 96px; --cible-rail-categorie: 80px; --cible-rail-1366: 68px; /* ---------- 9. RAYONS ET OMBRES : NULS, ET C'EST UNE DÉCISION ---------- */ --rayon: 0; /* Aucune ombre portée dans cette charte. Aucun dégradé, aucun flou, aucune transparence. Les seules exceptions de forme sont deux pictogrammes de mode de service : barquette 3px 3px 0 0, sachet 2px. Elles décrivent un objet physique, elles ne stylisent pas un composant. */ --ombre: none; /* ---------- 10. SIGNAUX NON COLORÉS ---------- Voir le bloc 2 de l'export : ces motifs portent l'information. Ils ne sont pas décoratifs et ne doivent jamais être remplacés par une couleur, ni simplifiés. */ --hachure-desactive: repeating-linear-gradient(135deg, #EDEBE7 0 6px, #F7F6F3 6px 12px); --hachure-etat: repeating-linear-gradient(135deg, #E4E2DD 0 6px, #F7F6F3 6px 12px); --hachure-dense: repeating-linear-gradient(135deg, #D8D6D1 0 6px, #EDEBE7 6px 12px); --hachure-excedent: repeating-linear-gradient(45deg, #E4E2DD 0 6px, #F7F6F3 6px 12px); --hachure-image: repeating-linear-gradient(45deg, #E4E2DD 0 7px, #F2F1EE 7px 14px); --hachure-image-poids:repeating-linear-gradient(45deg, #D8D6D1 0 7px, #E4E2DD 7px 14px); --hachure-duplicata: repeating-linear-gradient(135deg, #16181A 0 6px, #FFFFFF 6px 12px); }