/* Generated by OrchestKit Claude Plugin - 2026-09-03 */ /* ═══════════════════════════════════════════════════════════════════════ Hotel229 — jetons de design ═══════════════════════════════════════════════════════════════════════ POURQUOI CE FICHIER Chaque module s'était inventé son propre vocabulaire de couleurs. Douze préfixes coexistaient — --pos- au point de vente, --hb- à l'hébergement, --e- à l'économat, --s- aux statistiques, et huit autres — soit 184 noms de variables pour environ vingt-cinq rôles réels. Le problème n'était pas la multiplicité des noms mais leurs VALEURS : le marine valait #0d1b2a au point de vente et #1c2b4a à l'hébergement l'or valait #c9a84c au point de vente et #d4a843 à l'hébergement le rayon valait 10px ici et 12px là Deux écrans de la même application n'avaient donc littéralement pas la même couleur, et personne ne pouvait dire laquelle était la bonne. COMMENT L'UNIFICATION EST FAITE Une palette canonique — les --h229-* — définit UNE valeur par rôle. Tous les anciens noms deviennent des ALIAS qui pointent vers elle. Ce choix est délibéré : réécrire les 1 800 usages dans 60 gabarits aurait demandé de tous les relire, avec la certitude d'en oublier. Ici chaque écran garde le vocabulaire qu'il connaît, et tous rendent la même couleur. Un module qui voudra plus tard un nom canonique n'aura qu'à remplacer son préfixe — sans rien changer à l'apparence. LES VALEURS RETENUES sont celles du point de vente : marine et or. Ce sont les plus employées — 1 187 usages sur 1 800 — et l'identité la plus caractéristique d'un établissement hôtelier. Les familles ardoise et émeraude s'y alignent. USAGE : ne JAMAIS redéfinir ces variables dans un gabarit. Un :root local masque celui-ci et ramène la divergence que ce fichier existe pour supprimer. Un écran qui a besoin d'une couleur qui lui est propre lui donne un nom qui lui est propre. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── LA PALETTE ─────────────────────────────────────────────────── Une valeur par rôle. C'est le seul endroit où une couleur se décide. */ /* LES DEUX FAMILLES DE CARACTÈRES. Newsreader, à empattements, porte les titres et TOUS les chiffres : c'est elle qui donne son air à l'application. DM Sans, en graisse légère, porte le texte courant. Les deux sont servies en local depuis /vendor-local — l'application fonctionne sans réseau. */ --h229-serif: 'Syne', system-ui, -apple-system, sans-serif; --h229-sans: 'DM Sans', system-ui, -apple-system, sans-serif; /* Fonds et matière — un ivoire tiède, pas un gris */ /* LE FOND DE PAGE. Il valait #f4f2ee, soit 89 % de la luminance du blanc : l'ecart entre la page et les panneaux poses dessus etait de 1,12 pour 1. En dessous de 1,20 l'oeil ne separe pas deux surfaces — la page et ses panneaux ne faisaient donc qu'une seule grande feuille lumineuse, sans rien pour poser le regard. A 1,32 pour 1, le panneau redevient une figure sur un fond. */ /* Foncé à #e9f0f8 (aperçu validé du 28/10/2026) : #f7f9fc lisait pâle. */ --h229-bg: #e9f0f8; /* LE PANNEAU. Il etait en blanc pur, a 100 % de luminance, et c'est LUI qui couvre l'essentiel de l'ecran : cartes, tableaux, formulaires. Baisser le fond de page ne pouvait donc rien y faire — la lumiere ne venait pas du fond, elle venait des panneaux. Ici a 89 %. */ --h229-card: #ffffff; --h229-border: #c9d6e5; /* Encre */ --h229-text: #1b2430; --h229-muted: #4a5a70; /* Le texte en attente dans un champ vide : plus clair que l'atone, pour qu'on ne le prenne pas pour une valeur saisie. */ --h229-placeholder: #69768e; /* L'atone SUR l'ardoise de la colonne : intertitres de menu, ligne de l'employe. L'atone ordinaire y tomberait a 2 pour 1. */ --h229-sur-ardoise: #c4ccd5; /* Identité — ardoise et laiton. L'ardoise habille la colonne de navigation ; le laiton ne sert qu'à l'action principale et aux accents, jamais à décorer. */ --h229-navy: #0071bd; --h229-navy-2: #005a97; --h229-navy-3: #004675; /* LA COULEUR SECONDAIRE. Elle ne peut PAS porter de texte, et ce n'est pas un avis : blanc dessus 2,62:1 elle-meme sur blanc 2,62:1 elle-meme sur le bleu 1,96:1 Trois valeurs sous le seuil de 4,5, et meme sous les 3 exiges d'un simple element graphique. Son emploi est donc un APLAT que l'on remplit d'encre foncee -- une pastille, un bandeau, une zone -- ou une grande surface decorative. Sur #29abe2, l'encre #1b2430 donne 5,98:1. Quand il lui faut porter du blanc ou se lire sur du blanc, on prend la declinaison sombre : 4,56:1 dans les deux sens. */ --h229-secondary: #29abe2; --h229-secondary-dk: #1a7ea9; --h229-secondary-pale: #e8f6fc; --h229-secondary-ink: #1b2430; --h229-gold: #c9a84c; --h229-gold-lt: #f0c96a; /* Le laiton assombri, pour ce qui doit RESTER lisible sur ivoire : un lien dans une phrase. Le laiton plein n'y passe pas — 2,3 pour 1 contre les 4,5 exiges. */ --h229-gold-dk: #8a6b22; /* Sémantique — l'état d'une chose, jamais sa décoration */ --h229-success: #3f7d5c; --h229-danger: #a6453e; --h229-warning: #a97a2a; --h229-info: #0071bd; /* Nuances des états — le fond d'un bandeau, le trait d'un liseré. Elles existaient déjà dans les gabarits, écrites en dur et toutes différentes : sept verts pâles, six rouges pâles. Les nommer ici, c'est cesser d'en inventer une par écran. */ --h229-success-pale: #eef4f0; --h229-success-dk: #2f5f46; --h229-danger-pale: #fbf1ef; --h229-danger-dk: #8a3830; --h229-warning-pale: #fbf6ea; --h229-warning-dk: #8a6b22; --h229-info-pale: #eaf3fb; /* Le trait des nuances d'etat. Le fond pale seul ne detache pas un bandeau de l'ivoire ; la bordure grise commune, elle, ne dit pas l'etat. Un cran entre les deux. */ --h229-success-line: #cfe0d6; --h229-danger-line: #ebcfcb; --h229-warning-line: #e8dcbd; --h229-info-line: #d3dde7; /* Le survol d'une ligne de tableau, et la ligne déjà au panier. */ --h229-hover: #eef5fb; /* Un trait plus marqué que la bordure : séparateur, contour actif. Trois épaisseurs de gris chaud selon ce qu'elles séparent — dans un panneau, entre deux lignes, sous un titre. */ --h229-line: #d6dfea; --h229-line-2: #eaf0f7; /* TROIS RELIEFS, selon ce que l'élément fait. Les gabarits comptaient cinquante-trois ombres distinctes. La carte était déjà unifiée par les alias ; restaient l'anneau de saisie, l'élévation d'une fenêtre et le soulèvement au survol, chacun redéfini écran par écran avec sa propre teinte. */ /* La carte au repos. */ --h229-shadow: 0 1px 2px rgba(27, 36, 48, .04), 0 18px 40px -32px rgba(27, 36, 48, .45); /* Ce qui se soulève sous le curseur. */ --h229-shadow-md: 0 8px 24px -14px rgba(27, 36, 48, .34); /* Ce qui flotte au-dessus du reste : fenêtre modale, menu déroulant. */ --h229-shadow-lg: 0 24px 60px -28px rgba(27, 36, 48, .38); /* L'anneau du champ actif. Il ACCOMPAGNE le changement de bordure, il ne le remplace pas : l'indicateur qui compte pour l'accessibilité reste l'outline de :focus-visible, plus bas. Il était décliné en or, en marine et en turquoise selon l'écran. */ --h229-ring: 0 0 0 3px rgba(0, 113, 189, .20); /* TROIS RAYONS, ET TROIS SEULEMENT. Les gabarits en employaient huit — 4, 6, 7, 8, 9, 10, 12 et 20 px — choisis un par un. Deux cartes voisines n'avaient donc pas le même arrondi, ce qui se voit sans qu'on sache le nommer. sm ce qu'on saisit ou qu'on lit vite : champ, pastille, bouton md la carte, l'unité de contenu courante lg le bandeau, le panneau qui porte une section entière */ --h229-radius-sm: 4px; --h229-radius: 6px; --h229-radius-lg: 10px; /* Le bloc posé sur le fond (patron des maquettes). */ --h229-radius-bloc: 16px; /* Coquille et patron : menu, en-tête de bloc, action principale. Un thème d'établissement redéfinit ces jetons, plus bas. */ --h229-menu: var(--h229-navy-3); --h229-menu-actif: var(--h229-navy); --h229-tete-bloc: #c4d9ee; --h229-tete-encre: var(--h229-navy-3); --h229-primaire: var(--h229-navy-2); --h229-primaire-survol: var(--h229-navy-3); --h229-accent: var(--h229-navy); --h229-accent-pale: #dcebf8; /* ── LES ALIAS ──────────────────────────────────────────────────── Chaque module garde son vocabulaire ; tous pointent ici. Générés depuis les 184 variables réellement employées dans les gabarits : aucune n'est laissée sans valeur, et aucune ne diverge plus. */ --ac-bg: var(--h229-bg); --ac-border: var(--h229-border); --ac-danger: var(--h229-danger); --ac-emerald: var(--h229-success); --ac-gold: var(--h229-gold); --ac-gold-lt: var(--h229-gold-lt); --ac-muted: var(--h229-muted); --ac-navy: var(--h229-navy); --ac-navy-lt: var(--h229-navy-3); --ac-navy-md: var(--h229-navy-3); --ac-radius: var(--h229-radius); --ac-shadow: var(--h229-shadow); --ac-teal: var(--h229-success); --ac-text: var(--h229-text); --ac-white: var(--h229-card); --amber: var(--h229-warning); --bg: var(--h229-bg); --border: var(--h229-border); --ca-bg: var(--h229-bg); --ca-border: var(--h229-border); --ca-emerald: var(--h229-success); --ca-gold: var(--h229-gold); --ca-gold-lt: var(--h229-gold-lt); --ca-muted: var(--h229-muted); --ca-navy: var(--h229-navy); --ca-navy-lt: var(--h229-navy-3); --ca-navy-md: var(--h229-navy-3); --ca-radius: var(--h229-radius); --ca-shadow: var(--h229-shadow); --ca-teal: var(--h229-success); --ca-text: var(--h229-text); --ca-white: var(--h229-card); --ci-amber: var(--h229-warning); --ci-bg: var(--h229-bg); --ci-border: var(--h229-border); --ci-card: var(--h229-card); --ci-emerald: var(--h229-success); --ci-muted: var(--h229-muted); --ci-navy: var(--h229-navy); --ci-rose: var(--h229-danger); --ci-teal: var(--h229-success); --ci-text: var(--h229-text); --co-border: var(--h229-border); --co-card: var(--h229-card); --co-danger: var(--h229-danger); --co-emerald: var(--h229-success); --co-gold: var(--h229-gold); --co-muted: var(--h229-muted); --co-navy: var(--h229-navy); --co-orange: var(--h229-warning); --d-amber: var(--h229-warning); --d-bg: var(--h229-bg); --d-blue: var(--h229-info); --d-border: var(--h229-border); --d-card: var(--h229-card); --d-emerald: var(--h229-success); --d-gold: var(--h229-gold); --d-green: var(--h229-success); --d-muted: var(--h229-muted); --d-navy: var(--h229-navy); --d-primary: var(--h229-navy); --d-purple: var(--h229-info); --d-red: var(--h229-danger); --d-rose: var(--h229-danger); --d-sky: var(--h229-info); --d-teal: var(--h229-success); --d-text: var(--h229-text); --d-violet: var(--h229-info); --ds-amber: var(--h229-warning); --ds-bg: var(--h229-bg); --ds-border: var(--h229-border); --ds-muted: var(--h229-muted); --ds-navy: var(--h229-navy); --ds-navy2: var(--h229-navy-2); --ds-red: var(--h229-danger); --ds-teal: var(--h229-success); --e-amber: var(--h229-warning); --e-bg: var(--h229-bg); --e-blue: var(--h229-info); --e-border: var(--h229-border); --e-card: var(--h229-card); --e-emerald: var(--h229-success); --e-green: var(--h229-success); --e-muted: var(--h229-muted); --e-navy: var(--h229-navy); --e-red: var(--h229-danger); --e-teal: var(--h229-success); --e-text: var(--h229-text); --gold: var(--h229-gold); --green: var(--h229-success); --h-amber: var(--h229-warning); --h-bg: var(--h229-bg); --h-border: var(--h229-border); --h-gold: var(--h229-gold); --h-gold2: var(--h229-gold-lt); --h-muted: var(--h229-muted); --h-navy: var(--h229-navy); --h-navy2: var(--h229-navy-2); --h-red: var(--h229-danger); --h-teal: var(--h229-success); --h-teal2: var(--h229-success); --hb-bg: var(--h229-bg); --hb-border: var(--h229-border); --hb-danger: var(--h229-danger); --hb-emerald: var(--h229-success); --hb-gold: var(--h229-gold); --hb-muted: var(--h229-muted); --hb-navy: var(--h229-navy); --hb-navy-lt: var(--h229-navy-3); --hb-navy-md: var(--h229-navy-3); --hb-radius: var(--h229-radius); --hb-shadow: var(--h229-shadow); --hb-text: var(--h229-text); --hb-warning: var(--h229-warning); --hb-white: var(--h229-card); --muted: var(--h229-muted); --n-amber: var(--h229-warning); --n-bg: var(--h229-bg); --n-border: var(--h229-border); --n-card: var(--h229-card); --n-muted: var(--h229-muted); --n-red: var(--h229-danger); --n-teal: var(--h229-success); --navy: var(--h229-navy); --navy2: var(--h229-navy-2); --orange: var(--h229-warning); --pn-amber: var(--h229-warning); --pn-bg: var(--h229-bg); --pn-border: var(--h229-border); --pn-card: var(--h229-card); --pn-emerald: var(--h229-success); --pn-muted: var(--h229-muted); --pn-navy: var(--h229-navy); --pn-teal: var(--h229-success); --pn-text: var(--h229-text); --pos-amber: var(--h229-warning); --pos-bg: var(--h229-bg); --pos-border: var(--h229-border); --pos-danger: var(--h229-danger); --pos-gold: var(--h229-gold); --pos-gold-lt: var(--h229-gold-lt); --pos-gold2: var(--h229-gold-lt); --pos-info: var(--h229-info); --pos-muted: var(--h229-muted); --pos-navy: var(--h229-navy); --pos-navy-mid: var(--h229-navy-3); --pos-navy2: var(--h229-navy-2); --pos-radius: var(--h229-radius); --pos-red: var(--h229-danger); --pos-shadow: var(--h229-shadow); --pos-success: var(--h229-success); --pos-teal: var(--h229-success); --pos-text: var(--h229-text); --pos-warning: var(--h229-warning); --pos-white: var(--h229-card); --radius: var(--h229-radius); --red: var(--h229-danger); --s-amber: var(--h229-warning); --s-bg: var(--h229-bg); --s-blue: var(--h229-info); --s-border: var(--h229-border); --s-card: var(--h229-card); --s-emerald: var(--h229-success); --s-gold: var(--h229-gold); --s-green: var(--h229-success); --s-muted: var(--h229-muted); --s-navy: var(--h229-navy); --s-red: var(--h229-danger); --s-rose: var(--h229-danger); --s-sky: var(--h229-info); --s-teal: var(--h229-success); --s-text: var(--h229-text); --shadow: var(--h229-shadow); --sk-amber: var(--h229-warning); --sk-bg: var(--h229-bg); --sk-blue: var(--h229-info); --sk-border: var(--h229-border); --sk-card: var(--h229-card); --sk-green: var(--h229-success); --sk-muted: var(--h229-muted); --sk-red: var(--h229-danger); --sk-text: var(--h229-text); --teal: var(--h229-success); --type-color: var(--h229-text); } /* ── THÈME D'ÉTABLISSEMENT : HOTEL ADK ──────────────────────────────── Couleurs du logo (rouge #c0141b). Posé par , lui-même lu de APP_ETABLISSEMENT. Le bleu reste le thème par défaut. */ :root[data-etablissement="adk"] { --h229-bg: #ffffff; --h229-border: #e3c9c8; --h229-line: #e3c9c8; --h229-line-2: #f3e3e2; --h229-text: #2a1718; --h229-muted: #6e5354; --h229-hover: #f8eeee; --h229-navy: #9b2226; --h229-navy-2: #7d1b1f; --h229-navy-3: #5a1316; --h229-ring: 0 0 0 3px rgba(155, 34, 38, .20); --h229-menu: #3a1a1c; --h229-menu-actif: #5c2426; --h229-tete-bloc: #f1dddd; --h229-tete-encre: #5a1316; --h229-accent-pale: #f8eeee; } /* ═══════════════════════════════════════════════════════════════════════ Utilitaires transversaux ═══════════════════════════════════════════════════════════════════════ */ /* Les chiffres alignés en colonne doivent avoir la même largeur, sinon les montants ne se comparent pas d'un coup d'œil. */ .tabular, .montant, td.montant, .enc-reste { font-variant-numeric: tabular-nums; } /* Un tableau large doit défiler DANS son conteneur. Sans cela, c'est la page entière qui part de côté sur mobile. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* La navigation au clavier était possible mais invisible : aucun style de focus n'était défini. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--s-emerald); outline-offset: 2px; border-radius: 3px; } /* Remplace mdi-spin, disparu avec la famille Material Design Icons. Neutralise plus bas par prefers-reduced-motion. */ .icone-rotation { display: inline-block; animation: icone-rotation 2s linear infinite; } @keyframes icone-rotation { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════════════ Cibles tactiles ═══════════════════════════════════════════════════════════════════════ Le point de vente est l'écran le plus susceptible d'être utilisé sur tablette, et ses boutons de quantité faisaient 34 px de côté — sous le minimum de 44 px au-delà duquel un doigt vise juste. `pointer: coarse` ne s'applique QU'AUX appareils tactiles. Élargir partout bousculerait la mise en page du POS telle que les équipes l'utilisent à la souris tous les jours, pour corriger un problème qu'elles n'ont pas. */ @media (pointer: coarse) { .qty-stepper { width: auto; } .qty-stepper .btn-step, .qty-stepper .qty-input { min-width: 44px; min-height: 44px; } /* Les icônes-actions des listes : voir, modifier, supprimer. Elles sont serrées les unes contre les autres, ce qui rend l'erreur de visée d'autant plus facile — et l'une d'elles supprime. */ .table td a[aria-label], .table td button[aria-label] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }