/* RECOPIÉ depuis ~/dev/domeo-ui — ne pas modifier ici. * * Recopie du 31/07/2026, commit 419f755 (PR n° 1 et 2 du dépôt partagé). * Le dépôt partagé est la source unique : « toute évolution de couleur se * fait ici d'abord » (domeo-ui/CLAUDE.md). Pour resynchroniser : recopier le * fichier d'origine, RÉTABLIR CET EN-TÊTE, et refaire passer la suite de * tests de rendu. */ /* * Design system domeoag-manager (tranche 13a) * -------------------------------------------- * * Référence visuelle : * `/home/nicolas/dev/maquettes/option-19c-fix-extended.html` * * Le thème est piloté par l'attribut `data-theme` sur `` : * - "light" → palette Warm Tabac (claire) * - "dark" → palette Forêt sapin (sombre) * - "auto" → suit la préférence système (`prefers-color-scheme`) * * Pour éviter le flash blanc au chargement (FOUC), un script inline * dans `index.html` applique `data-theme` AVANT le rendu CSS. * * Le composable `useTheme.js` orchestre les changements à l'exécution * (clic utilisateur sur le toggle 3-positions), avec persistance * `localStorage` sous la clé `theme`. * * Couleurs et tokens : ne pas inventer, toujours réutiliser les * variables ci-dessous. Couleurs hardcodées interdites en dehors de ce * fichier (à part rgba() ponctuelles pour les ombres / glows * spécifiques à un composant). */ /* ═══════════════════════════════════════════════════════════════════ THÈME CLAIR (Warm Tabac, option 12) Appliqué par défaut et explicitement via data-theme="light". ═══════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { /* Surfaces */ --bg: #fafaf6; --surface: #ffffff; --surface-tinted: #f3f1eb; --hover: #f1f5f9; --hover-stronger: #e2e8f0; /* Bordures — trois niveaux, pas deux. - --border : décoratif (séparations subtiles). 1,28:1 sur #fff : invisible, et c'est voulu. - --border-mid : SÉPARATION DE DONNÉES (filets de tableau, traits entre blocs). 2,19:1 — assez pour aider l'œil à suivre une ligne sur un tableau dense, trop peu pour zébrer. Le niveau manquait : un filet posé à --border disparaît, posé à --border-strong il hurle. - --border-strong : fonctionnel (inputs, boutons secondary, focus indicators) — calibré ≥3:1 sur surface (SC 1.4.11). Pourquoi les deux premiers peuvent rester sous 3:1 sans manquer au SC 1.4.11 : ce critère ne couvre que (a) l'information visuelle nécessaire à identifier un COMPOSANT d'interface ou son ÉTAT et (b) les parties d'un graphique nécessaires à la compréhension. Dans un tableau de données, la grille est déjà perceptible À L'ŒIL par le contenu des cellules, leur alignement et leur espacement : le filet ne fait que la renforcer. C'est la logique que le W3C applique aux bordures de contrôles — « a border ... is not required » dès lors que le contenu visible identifie déjà le composant. ⚠️ Ne JAMAIS invoquer le balisage (table/th/scope) pour justifier cette exemption : le 1.4.11 protège qui REGARDE la page, et le balisage ne sert qu'aux technologies d'assistance — c'est le SC 1.3.1. ⚠️ L'exemption tombe, et le 3:1 redevient dû (passer à --border-strong, ou ajouter un indice non chromatique : alternance de fonds, espacement), dans TROIS cas : 1. le filet porte un composant ou un état — grille éditable, ligne sélectionnée, colonne triée, limite d'une cellule cliquable ; 2. le « tableau » est en réalité une image ou un graphique ; 3. le tableau est dense au point que le filet devienne le seul moyen visuel de rattacher une donnée à sa ligne. */ --border: #e7e3d9; --border-mid: #b3afa3; /* 2,19:1 sur #fff — filets de tableau */ --border-strong: #8a8472; /* AAA UI 3.73:1 sur #fff (était #cdc7b8, fail 1.69:1) */ /* Texte — calibré WCAG AAA (≥ 7:1) sur TOUS les fonds clairs y compris hover-stronger. Audit 2026-05 (révision 2) : tokens assombris pour passer AAA strict sur le pire fond. */ --text: #0f172a; --text-muted: #36425a; /* AAA min 8.17:1 (était #435063, fail 6.64:1 sur hover-stronger) */ --text-subtle: #374257; /* AAA min 8.19:1 (était #49596f, fail 5.79:1 sur hover-stronger) */ /* Texte désactivé — visuellement distinct des autres niveaux muted (perd la "force" sans être illisible). AAA sur tous les fonds enable (≥7:1 — WCAG 1.4.3 exempte les disabled, on va plus loin). */ --text-disabled: #475263; /* AAA min 7.00:1 sur surface-tinted */ /* Accent (vert sapin) — utilisé sur boutons primary, nav active, focus borders, brand-mark, avatar, indicateurs subtils. */ --accent: #1f4e45; --accent-hover: #163b34; /* Lien dans un contenu. Alias de l'accent par défaut — mais NOMMÉ, pour deux raisons. La première est pratique : la charte neutralise les liens, si bien qu'un produit qui en a besoin doit inventer sa couleur et la répéter partout. La seconde est de fond : « l'accent de la marque » et « ceci est cliquable » sont deux intentions, et un produit peut vouloir les distinguer sans avoir à traquer chaque règle. 9,4:1 sur surface en clair, 8,96:1 en sombre — SC 1.4.3 largement tenu. ⚠️ SOULIGNEMENT OBLIGATOIRE DANS UN CONTENU. L'écart entre le lien et le texte qui l'entoure n'est que de 1,90:1 en clair et 1,44:1 en sombre : la couleur ne suffit pas à le distinguer, et le SC 1.4.1 (normatif) interdit qu'elle soit le SEUL moyen visuel — c'est l'échec F73. Le soulignement permanent satisfait le critère sans toucher à la couleur. Il ne se retire que là où la position suffit déjà — une navigation, un menu. Précision, parce que la confusion est facile : le 1.4.1 ne fixe AUCUN ratio. Le 3:1 souvent cité vient de la technique G183, qui est informative et qui est le chemin de celui qui veut distinguer le lien PAR LA COULEUR SEULE — elle exige alors 3:1 avec le texte voisin ET un indice supplémentaire au survol. Être sous 3:1 ne met donc rien en échec : cela ferme ce chemin-là, et l'on passe par le soulignement. */ --link: var(--accent); --link-hover: var(--accent-hover); --accent-soft: #d4e4e0; --accent-soft-hover: #c1d8d2; /* hover sur fond accent-soft (présent-counter, etc.) */ --accent-glow: rgba(31, 78, 69, 0.10); /* Couleur du texte sur fond accent (boutons primary). Blanc fonctionne en clair (ratio 9.4:1) ; en sombre on a un texte foncé pour rester lisible sur le vert pastel #96cdb7. */ --on-accent: #ffffff; /* Tokens "on-*" : couleur du texte/icône inversé sur les pills de statut quand on les utilise pleines (background = couleur statut). En clair les fonds statuts sont foncés → texte blanc AAA. */ --on-success: #ffffff; /* AAA 8.01:1 sur --success */ --on-offline: #ffffff; /* AAA 8.64:1 sur --offline */ --on-warning: #ffffff; /* AAA 8.84:1 sur --warning */ --on-syncing: #ffffff; /* AAA 7.64:1 sur --syncing */ /* Focus ring — visible sur TOUS les fonds (≥3:1 SC 1.4.11, ici ≥9:1 partout grâce à --accent). Utilisé via outline. */ --focus-ring: var(--accent); --focus-ring-offset: var(--bg); /* Surface des inputs/boutons désactivés — légèrement plus sombre que --surface-tinted pour signaler "non interactif". */ --surface-disabled: #ebe7dd; /* Badges types d'immeuble — calibrés AAA sur leurs fonds soft. */ --copro: #52381a; /* AAA 7.23:1 sur copro-soft */ --copro-soft: #e3d0bc; --asl: #683c28; /* AAA 7.18:1 sur asl-soft */ --asl-soft: #f0e0d0; --aful: #683244; /* AAA 7.13:1 sur aful-soft */ --aful-soft: #ebd6dc; /* Couleur de texte du badge success — variable dédiée parce que la palette accent (vert sapin profond) est trop sombre en thème sombre pour bien contraster sur accent-soft. En clair on prend accent, en sombre on bascule sur un vert mousse clair (cf. dark). */ --badge-success-fg: var(--accent); /* Card "AG en cours" featured */ --featured-bg: #f5e6d3; --featured-fg: #6f3008; /* AAA 8.15:1 (était #92400e, fail 5.79:1) */ --featured-border: #d6b48a; /* Champs de formulaire / search */ --input-bg: var(--surface-tinted); --input-border: var(--border-strong); /* Statuts métier — calibrés AAA sur leurs fonds soft. */ --warning: #7b360c; /* AAA 7.22:1 sur warning-soft */ --warning-soft: #f5e6d3; --warning-border: #d6b48a; --warning-glow: rgba(123, 54, 12, 0.18); --success: #0f5d2c; /* AAA 7.29:1 sur success-soft */ --success-soft: #dcfce7; --success-glow: rgba(15, 93, 44, 0.12); --offline: #961717; /* AAA 7.07:1 sur offline-soft */ --offline-soft: #fee2e2; --offline-hover: #fecaca; --offline-glow: rgba(150, 23, 23, 0.20); --syncing: #7a3604; /* AAA 8.00:1 sur syncing-soft (était #b45309, fail 4.51:1) */ --syncing-soft: #fef3c7; --syncing-glow: rgba(122, 54, 4, 0.22); /* Info (visioconférence, hints) */ --info: #1e40af; /* AAA 7.15:1 sur info-soft */ --info-soft: #dbeafe; /* Statut "représenté" — utilisé sur l'écran d'émargement et présence */ --represented: #4c1d95; /* AAA 9.23:1 sur represented-soft */ --represented-soft: #ede9fe; /* Misc */ --thead-bg: #fafbfc; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); } /* ═══════════════════════════════════════════════════════════════════ THÈME SOMBRE (Forêt sapin révisée, option 17 + corrections 19c) Appliqué via data-theme="dark". Différences notables vs option 17 d'origine : - Accent passé de #8bc4a6 → #3a6655 (vert sapin profond, moins criard sur fond sombre). - Champs de saisie : --input-bg = --border-strong (#374a40), --input-border = #4a7d68 (visible sur sombre), placeholder éclairci à --text-subtle (#94a89c). ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* Surfaces */ --bg: #0f1a17; --surface: #162420; --surface-tinted: #1d2c27; --hover: #233830; --hover-stronger: #2d4339; /* Bordures (cf. clair) */ --border: #27392f; --border-mid: #4d6659; /* 2,57:1 sur #162420 — filets de tableau */ --border-strong: #6a8a78; /* AAA UI 4.22:1 sur #162420 (était #374a40, fail 1.70:1) */ /* Texte — calibré AAA strict (≥7:1) sur TOUS les fonds y compris hover-stronger. Audit 2026-05 (révision 2). */ --text: #e0e8e3; --text-muted: #d2dcd3; /* AAA min 7.56:1 (était #b3c2b9, fail 5.74:1 sur hover-stronger) */ --text-subtle: #cdd5cc; /* AAA min 7.09:1 (était #9fb1a6, fail 4.72:1 sur hover-stronger) */ /* Disabled : AA strict (≥4.5:1). AAA non atteignable sans confondre visuellement avec --text-muted — WCAG 1.4.3 exempte les disabled. */ --text-disabled: #92a39c; /* Accent (vert sapin clair en sombre, choisi par le user 2026-05). Le ratio blanc->accent en sombre tombe à 1.79:1 ; on bascule donc le texte des boutons primary en foncé via --on-accent. */ --accent: #96cdb7; --accent-hover: #4a7d68; --link: var(--accent); --link-hover: var(--accent-hover); --accent-soft: #1f3329; --accent-soft-hover: #2d4339; /* hover sur fond accent-soft en sombre */ --accent-glow: rgba(58, 102, 85, 0.30); --on-accent: #162420; /* texte sombre sur fond accent clair, AAA */ /* Tokens "on-*" : en sombre les fonds statuts sont des pastels clairs → texte foncé AAA. */ --on-success: #0f1a17; /* AAA 10.38:1 sur --success sombre */ --on-offline: #0f1a17; /* AAA 9.37:1 sur --offline sombre */ --on-warning: #0f1a17; /* AAA 13.42:1 sur --warning sombre */ --on-syncing: #0f1a17; /* AAA 10.66:1 sur --syncing sombre */ /* Focus ring — accent sombre est très clair, ratio ≥9:1 sur tous les fonds. */ --focus-ring: var(--accent); --focus-ring-offset: var(--bg); /* Surface des inputs/boutons désactivés */ --surface-disabled: #27392f; /* aligné sur --border */ /* Badges types d'immeuble (copropriété en marron pour différencier visuellement de success qui reste en vert mousse). AAA strict. */ --copro: #c9b094; /* AAA 7.54:1 sur copro-soft */ --copro-soft: #2a221a; --asl: #dfb89a; /* AAA 7.36:1 (était #d4a888, fail 6.27:1) */ --asl-soft: #3a2c1c; --aful: #dfb0bd; /* AAA 7.70:1 (était #d49bab, fail 6.31:1) */ --aful-soft: #3a2228; /* Texte du badge success en sombre : vert mousse clair (distinct du badge copro qui est marron). Aligné sur --success ci-dessous. */ --badge-success-fg: #9ed1b6; /* AAA 7.83:1 sur accent-soft */ /* Card "AG en cours" featured */ --featured-bg: #264a3c; --featured-fg: #c8e6d4; /* AAA 7.39:1 (était #b8e0c8, fail 6.83:1) */ --featured-border: #3a6655; /* Champs de formulaire / search */ --input-bg: var(--border-strong); --input-border: #4a7d68; /* Statuts métier — AAA strict. */ /* Ambre (et NON vert) : un avertissement doit se distinguer nettement du succès. L'ancienne valeur (#c5e8d2) était un vert menthe ~identique à --success → warning illisible comme tel en sombre. Aligné sur la palette --syncing (#fbbf24 sur #3a2a10, AAA 8.28:1). */ --warning: #fbbf24; /* AAA 8.28:1 sur warning-soft */ --warning-soft: #3a2a10; --warning-border: #6b5220; --warning-glow: rgba(251, 191, 36, 0.22); --success: #9ed1b6; /* AAA 7.83:1 (était #8bc4a6, fail 6.74:1) */ --success-soft: #1f3329; --success-glow: rgba(158, 209, 182, 0.18); --offline: #fca5a5; /* AAA 8.37:1 sur offline-soft, déjà OK */ --offline-soft: #3f1414; --offline-hover: #5e1d1d; /* palier intermédiaire pour le hover */ --offline-glow: rgba(252, 165, 165, 0.30); --syncing: #fbbf24; /* AAA 8.28:1 sur syncing-soft, déjà OK */ --syncing-soft: #3a2a10; --syncing-glow: rgba(251, 191, 36, 0.32); /* Info — bleu pâle clair sur bleu sombre, AAA strict */ --info: #bfdbfe; /* AAA 9.64:1 sur info-soft */ --info-soft: #1a2e4a; /* Statut "représenté" — violet pâle clair sur violet sombre */ --represented: #dcc9ff; /* AAA 9.93:1 sur represented-soft */ --represented-soft: #2a1f4a; /* Misc */ --thead-bg: #1d2c27; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); } /* ═══════════════════════════════════════════════════════════════════ MODE AUTO — suit la préférence système Le navigateur applique cette media query si l'utilisateur n'a pas forcé un thème (data-theme="auto"). Les variables sont identiques au bloc data-theme="dark" — duplication assumée pour permettre l'override manuel light/dark via data-theme. ═══════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --bg: #0f1a17; --surface: #162420; --surface-tinted: #1d2c27; --hover: #233830; --hover-stronger: #2d4339; --border: #27392f; --border-mid: #4d6659; --border-strong: #6a8a78; --text: #e0e8e3; --text-muted: #d2dcd3; --text-subtle: #cdd5cc; --text-disabled: #92a39c; --accent: #96cdb7; --accent-hover: #4a7d68; /* --link / --link-hover ne sont PAS repris ici, et c'est correct : ce sont des alias `var(--accent)` déclarés sur :root, donc substitués sur le MÊME élément — ils suivent l'accent redéfini juste au-dessus. Tout jeton à valeur littérale, lui, doit être répété (cf. la correction de --border-mid, oublié ici à sa création). */ --accent-soft: #1f3329; --accent-soft-hover: #2d4339; --accent-glow: rgba(58, 102, 85, 0.30); --on-accent: #162420; --on-success: #0f1a17; --on-offline: #0f1a17; --on-warning: #0f1a17; --on-syncing: #0f1a17; --focus-ring: var(--accent); --focus-ring-offset: var(--bg); --surface-disabled: #27392f; --copro: #c9b094; --copro-soft: #2a221a; --asl: #dfb89a; --asl-soft: #3a2c1c; --aful: #dfb0bd; --aful-soft: #3a2228; --badge-success-fg: #9ed1b6; --featured-bg: #264a3c; --featured-fg: #c8e6d4; --featured-border: #3a6655; --input-bg: var(--border-strong); --input-border: #4a7d68; /* Ambre (et NON vert) : un avertissement doit se distinguer du succès. Cf. même correctif dans :root[data-theme="dark"]. */ --warning: #fbbf24; --warning-soft: #3a2a10; --warning-border: #6b5220; --warning-glow: rgba(251, 191, 36, 0.22); --success: #9ed1b6; --success-soft: #1f3329; --success-glow: rgba(158, 209, 182, 0.18); --offline: #fca5a5; --offline-soft: #3f1414; --offline-hover: #5e1d1d; --offline-glow: rgba(252, 165, 165, 0.30); --syncing: #fbbf24; --syncing-soft: #3a2a10; --syncing-glow: rgba(251, 191, 36, 0.32); --info: #bfdbfe; --info-soft: #1a2e4a; --represented: #dcc9ff; --represented-soft: #2a1f4a; --thead-bg: #1d2c27; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); } } /* ═══════════════════════════════════════════════════════════════════ Reset minimal + base typo ═══════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } /* Défilement interne — À DEMANDER, jamais imposé. * * `overflow: hidden` sur html/body était posé ici par défaut, avec le * commentaire « l'app gère son propre scroll en interne ». C'est vrai d'une * SPA dont la coquille occupe la fenêtre ; c'est FAUX de tout rendu serveur, * où la page défile normalement — et le symptôme est brutal : le contenu * sous la ligne de flottaison devient inatteignable, sans message ni barre. * * Une charte partagée ne peut pas décider de cela pour ses consommateurs. * Les SPA de la gamme ajoutent la classe sur ; les produits en rendu * serveur n'ont rien à faire. * * Une coquille bien construite — hauteur 100 %, `min-height: 0` sur la * colonne, `overflow-y: auto` sur le contenu — ne déborde de toute façon * pas : la classe n'est qu'une ceinture. */ body.defilement-interne, html:has(> body.defilement-interne) { overflow: hidden; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 15px; color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* `#app` est l'ancrage du Vue root. On en fait un flex column qui contient les composants top-level (SyncBanner, AppLayout, etc.). AppLayout utilise `flex: 1` pour prendre l'espace restant — pas `100vh` — afin de ne pas pousser au-delà de la viewport quand un bandeau (sync, alerte, etc.) est présent au-dessus. */ #app { display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 0; } /* `