/* ============================================================================ Tokens — source unique des valeurs de dessin de l'interface. Aucune valeur brute (couleur, espace, taille, rayon, ombre) ne doit être écrite ailleurs que dans ce fichier et dans les fichiers de thème (`styles/themes/*.css`). TROIS COUCHES, et chacune ne lit que celle du dessus : 1. LE THÈME — les noms de shadcn/ui, tels quels : `--background`, `--foreground`, `--card`, `--popover`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`, `--border`, `--input`, `--ring`, `--chart-1…5`, `--sidebar-*`, `--radius`, `--font-*`, `--shadow-*`, `--spacing`, `--tracking-normal`. Un thème shadcn (ui.shadcn.com/themes, tweakcn.com) se colle donc tel quel : il ne redéfinit que cette couche. « Saxon », le thème d'origine de l'application, est posé ici sur `:root` : il est la valeur par défaut de tout thème qui tait un token. 2. LES DÉRIVÉS — ce que l'application nomme et que shadcn n'a pas : deux encres de plus (`--soft-foreground`, `--faint-foreground`), deux filets (`--border-soft`, `--border-strong`), la grille du plan, le voile des libellés, les rayons et les pas d'espacement. Ils se CALCULENT à partir de la couche 1 (`color-mix`, `calc`) : un thème installé les reçoit sans rien écrire. 3. L'APPLICATION — ce qu'aucun thème ne doit toucher parce que cela porte une information : les huit familles d'usage, les couches du relevé, les états (`--warn`, `--ok`, les aplats `--*-fill`), l'échelle typographique. Elles ne dépendent que du MODE (clair ou sombre), pas du thème. LE THÈME ET LE MODE sont deux attributs de , posés par `main.js` : `data-theme=""` absent = Saxon ; sinon un fichier de `styles/themes/` `data-mode="light|dark"` absent = suivre le système Structure des modes, dans cet ordre, sans exception — pour le thème par défaut comme pour chaque fichier de thème : 1. le bloc CLAIR complet. Tout token y naît ; 2. `prefers-color-scheme: dark` gardé par `:not([data-mode="light"])` → le système en sombre, sauf choix clair explicite ; 3. `[data-mode="dark"]` → le choix sombre explicite. Un token défini uniquement dans 2 ou 3 n'existe pas pour le visiteur qui n'a rien choisi : c'est le bug classique du thème illisible. ========================================================================= */ /* ========================================================================== 1 · LE THÈME PAR DÉFAUT — Saxon, clair ========================================================================== */ :root{ --background:#EDEEE9; /* fond de page */ --foreground:#16191A; /* texte principal — 15.2:1 */ --card:#F8F8F5; /* panneaux, contrôles, canevas */ --card-foreground:#16191A; --popover:#F8F8F5; /* modaux, menus */ --popover-foreground:#16191A; --primary:#16191A; /* LE bouton plein, l'état sélectionné */ --primary-foreground:#EDEEE9; --secondary:#E3E5DE; --secondary-foreground:#16191A; --muted:#E3E5DE; --muted-foreground:#636B66; /* texte atténué — 4.7:1. Était #8A908C, à 2.79:1 : le token le plus utilisé de l'app ne passait AA sur aucun fond clair. */ --accent:#E3E5DE; /* fond au survol, pilule choisie */ --accent-foreground:#16191A; --destructive:#BA3E38; /* ≥ 4.5:1 sur --background ET --card */ --border:#D6D9D1; /* filets et bordures */ --input:#D6D9D1; /* bordure des champs */ --ring:#226BC0; /* l'anneau de focus */ --chart-1:#DB5494; --chart-2:#3278D7; --chart-3:#3F9336; --chart-4:#BF830C; --chart-5:#0D95A9; --sidebar:#F8F8F5; /* la barre « Atelier et outils » */ --sidebar-foreground:#16191A; --sidebar-primary:#16191A; --sidebar-primary-foreground:#EDEEE9; --sidebar-accent:#E3E5DE; --sidebar-accent-foreground:#16191A; --sidebar-border:#D6D9D1; --sidebar-ring:#226BC0; /* Trois pas de rayon dérivés d'un seul, comme shadcn. À 0.375rem : 2 px (pastilles), 4 px (contrôles), 6 px (panneaux), 10 px (grandes surfaces). Les panneaux étaient à 8 px : on suit l'échelle. */ --radius:0.375rem; /* La pile monospace était réécrite littéralement 43 fois dans le projet. */ --font-sans:"Archivo","Helvetica Neue",Arial,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --font-serif:Georgia,"Times New Roman",serif; --tracking-normal:0em; --spacing:0.25rem; /* le pas de base : 4 px */ /* Élévation dépensée par rôle : seule une surface qui flotte vraiment en reçoit. */ --shadow-2xs:0 1px 1px rgba(22,25,26,.04); --shadow-xs:0 1px 2px rgba(22,25,26,.05); --shadow-sm:0 1px 2px rgba(22,25,26,.06); --shadow:0 2px 6px rgba(22,25,26,.08); --shadow-md:0 4px 12px rgba(22,25,26,.10); --shadow-lg:0 8px 24px rgba(22,25,26,.12); --shadow-xl:0 14px 36px rgba(22,25,26,.14); --shadow-2xl:0 24px 60px rgba(22,25,26,.18); } @media (prefers-color-scheme: dark){ :root:not([data-mode="light"]){ --background:#0F1110; --foreground:#EFF1ED; --card:#181B1A; --card-foreground:#EFF1ED; --popover:#181B1A; --popover-foreground:#EFF1ED; --primary:#EFF1ED; --primary-foreground:#0F1110; --secondary:#222624; --secondary-foreground:#EFF1ED; --muted:#222624; --muted-foreground:#8B928D; /* était #7A817C, à 4.34:1 sur --card */ --accent:#222624; --accent-foreground:#EFF1ED; --destructive:#D95B52; --border:#2B302D; --input:#2B302D; --ring:#3D84DB; --chart-1:#D363A6; --chart-2:#4086DF; --chart-3:#51A349; --chart-4:#BF8900; --chart-5:#21A3BA; --sidebar:#181B1A; --sidebar-foreground:#EFF1ED; --sidebar-primary:#EFF1ED; --sidebar-primary-foreground:#0F1110; --sidebar-accent:#222624; --sidebar-accent-foreground:#EFF1ED; --sidebar-border:#2B302D; --sidebar-ring:#3D84DB; --shadow-2xs:0 1px 1px rgba(0,0,0,.3); --shadow-xs:0 1px 2px rgba(0,0,0,.35); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 6px rgba(0,0,0,.45); --shadow-md:0 4px 12px rgba(0,0,0,.5); --shadow-lg:0 8px 24px rgba(0,0,0,.55); --shadow-xl:0 14px 36px rgba(0,0,0,.6); --shadow-2xl:0 24px 60px rgba(0,0,0,.65); } } :root[data-mode="dark"]{ --background:#0F1110; --foreground:#EFF1ED; --card:#181B1A; --card-foreground:#EFF1ED; --popover:#181B1A; --popover-foreground:#EFF1ED; --primary:#EFF1ED; --primary-foreground:#0F1110; --secondary:#222624; --secondary-foreground:#EFF1ED; --muted:#222624; --muted-foreground:#8B928D; --accent:#222624; --accent-foreground:#EFF1ED; --destructive:#D95B52; --border:#2B302D; --input:#2B302D; --ring:#3D84DB; --chart-1:#D363A6; --chart-2:#4086DF; --chart-3:#51A349; --chart-4:#BF8900; --chart-5:#21A3BA; --sidebar:#181B1A; --sidebar-foreground:#EFF1ED; --sidebar-primary:#EFF1ED; --sidebar-primary-foreground:#0F1110; --sidebar-accent:#222624; --sidebar-accent-foreground:#EFF1ED; --sidebar-border:#2B302D; --sidebar-ring:#3D84DB; --shadow-2xs:0 1px 1px rgba(0,0,0,.3); --shadow-xs:0 1px 2px rgba(0,0,0,.35); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 6px rgba(0,0,0,.45); --shadow-md:0 4px 12px rgba(0,0,0,.5); --shadow-lg:0 8px 24px rgba(0,0,0,.55); --shadow-xl:0 14px 36px rgba(0,0,0,.6); --shadow-2xl:0 24px 60px rgba(0,0,0,.65); } /* ========================================================================== 2 · LES DÉRIVÉS — calculés, jamais écrits par un thème Posés sur `:root`, comme le thème : ils s'y résolvent avec ses valeurs et suivent donc tout changement de thème ou de mode. (Une surface qui redéfinirait `--foreground` pour elle seule ne les verrait pas bouger : aucune ne le fait.) ========================================================================== */ :root{ /* texte secondaire — ≈ 5.9:1, entre l'encre et l'encre atténuée */ --soft-foreground:color-mix(in oklab,var(--foreground) 22%,var(--muted-foreground)); /* NON TEXTUEL uniquement — ≈ 3:1 : filets appuyés, pastilles, états désactivés. Séparer ce rôle de `--muted-foreground` est ce qui permet à celui-ci d'être lisible sans se confondre avec le texte secondaire. */ --faint-foreground:color-mix(in oklab,var(--muted-foreground) 72%,var(--border)); --border-soft:color-mix(in oklab,var(--border) 55%,var(--background)); /* filets internes */ --border-strong:color-mix(in oklab,var(--border) 86%,var(--foreground)); /* bordure au survol */ --grid:color-mix(in oklab,var(--border) 72%,var(--background)); /* quadrillage du plan */ --card-veil:color-mix(in srgb,var(--card) 82%,transparent); /* libellés posés sur la 3D */ /* rayons — l'échelle de shadcn, bornée à zéro pour un thème à angles vifs */ --radius-sm:max(0px,calc(var(--radius) - 4px)); /* pastilles, marques, segments */ --radius-md:max(0px,calc(var(--radius) - 2px)); /* contrôles, champs */ --radius-lg:var(--radius); /* panneaux, cartes */ --radius-xl:calc(var(--radius) + 4px); /* grandes surfaces flottantes */ --radius-full:9999px; /* espacement, sur le pas du thème (4 px par défaut) */ --s-1:calc(var(--spacing) * 1); /* 4 */ --s-2:calc(var(--spacing) * 2); /* 8 */ --s-3:calc(var(--spacing) * 3); /* 12 */ --s-4:calc(var(--spacing) * 4); /* 16 */ --s-5:calc(var(--spacing) * 6); /* 24 */ --s-6:calc(var(--spacing) * 8); /* 32 */ --s-7:calc(var(--spacing) * 12); /* 48 */ --s-8:calc(var(--spacing) * 16); /* 64 */ } /* ========================================================================== 3 · L'APPLICATION — ne dépend que du mode ========================================================================== */ :root{ color-scheme: light; /* --- états ------------------------------------------------------------ Séparés des familles d'usage : un token de famille détourné en couleur d'état (l'ancien `--f-spo` pour « validé », `--f-eau` pour le focus) fait mentir la légende. Texte, icône et bordure : ≥ 4.5:1 sur les fonds. */ --warn:#955E00; --ok:#187A3B; /* aplats pleins (badge, pastille) : ils portent leur propre fond, donc une seule valeur sert les deux modes — blanc dessus à ≥ 4.5:1, détachement du fond ≥ 3:1 */ --danger-fill:#C74B43; --warn-fill:#A4690C; --ok-fill:#298646; --focus-fill:#3077CD; --on-fill:#FFFFFF; /* --- les tags de force (`data/lignes.js — TAGS`) ------------------------- Du rouge au vert : ce qui influe forcément, ce qui influe peut-être, ce qui n'influe pas. Des aplats qui portent leur propre fond, comme les pastilles d'état : une valeur sert les deux modes et tous les thèmes. Le texte dessus passe 4.5:1 — clair sur le rouge et le vert franc, sombre sur l'orange, le jaune et le vert clair, où un blanc ne tiendrait pas. */ --tag-intangible:#C0392B; --tag-intangible-on:#FFFFFF; --tag-impose:#E07A1F; --tag-impose-on:#2A1500; --tag-prioritaire:#E9C236; --tag-prioritaire-on:#2B2200; --tag-souhaite:#9FCF72; --tag-souhaite-on:#11280A; --tag-indicatif:#2C7A47; --tag-indicatif-on:#FFFFFF; /* --- couches du fond de plan du site ------------------------------------ Elles emprutaient des tokens de famille d'usage : le vert « sport » servait à tracer une emprise et le gris « technique » le bâti existant, d'où trois sens pour un même vert dans le même onglet. */ --site-perimetre:#6D3BD4; --site-emprise:#2E7D46; /* La masse en monochrome : blanc de maquette, dans les deux modes. Elle ne porte AUCUNE information — c'est le mode où l'on ne regarde que la forme, et une masse teintée laissait chercher ce que la teinte voulait dire. */ --site-mono:#FFFFFF; /* --- familles d'usage -------------------------------------------------- Huit familles. Chaque couleur passe ≥ 3:1 sur --card dans les deux modes. `--f-tec` reste un neutre — en dessin d'architecture le technique se hachure. Huit teintes catégorielles ne peuvent pas être distinguées deux à deux (28 paires, aucun ordre ne franchit le seuil) : la couleur n'est donc jamais seule à porter l'identité. Aucun thème n'y touche — elles sont la légende du projet, pas un habillage. */ --f-cla:#DB5494; /* classes et enseignement */ --f-adm:#DD5A02; /* bureaux et locaux du personnel */ --f-eau:#3278D7; /* locaux liés à l'eau */ --f-tec:#79867F; /* technique, stockage, nettoyage — hachuré */ --f-spo:#3F9336; /* sport et salle polyvalente */ --f-uap:#BF830C; /* UAPE — ocre et non jaune : un jaune vif ne peut pas atteindre 3:1 sur un fond clair */ --f-pis:#0D95A9; /* piscine */ --f-ext:#196B39; /* cour et extérieurs */ --papier:#FFFFFF; /* la feuille d'une planche imprimée : blanche dans tous les modes */ --fill-op:0.20; /* opacité des aplats de famille */ --hatch-ink:rgba(0,0,0,.34); /* opacité de la hachure du technique */ /* --- échelle typographique -------------------------------------------- Sept pas, là où le projet en comptait vingt-deux entre 9.5 et 54 px. Les pas numériques sont distincts : les chiffres portent l'information. */ --t-3xs:10px; /* sur-titres capitales, micro-libellés */ --t-2xs:11px; /* notes, unités, mentions */ --t-xs:12px; /* données denses, lignes de liste */ --t-sm:13px; /* taille de base de l'interface */ --t-md:15px; /* chapô, texte courant */ --t-lg:19px; /* titres de panneau */ --t-xl:clamp(26px,4.6vw,38px); /* titre de page */ --t-num-sm:14px; /* valeurs en ligne */ --t-num-md:17px; /* valeurs de tableau de bord */ --t-num-lg:clamp(30px,6vw,44px); /* chiffre-clé */ --lh-tight:1.15; --lh-snug:1.35; --lh-base:1.5; --lh-loose:1.65; --track-caps:.12em; /* interlettrage des capitales */ /* --- contrôles --------------------------------------------------------- Une hauteur unique pour tous les boutons et champs : c'est elle qui met fin aux cinq variantes de bouton qui divergeaient de 1 à 2 px. */ --ctl-h:32px; --ctl-pad:0 var(--s-3); --tap-min:24px; /* cible tactile minimale (WCAG 2.2 AA, 2.5.8) */ /* --- la barre latérale « Atelier et outils » ---------------------------- */ --sidebar-w:248px; /* --- mouvement ---------------------------------------------------------- */ --dur-1:.09s; --dur-2:.18s; --dur-3:.22s; /* une pastille qui glisse d'une ligne à l'autre */ --ease:cubic-bezier(.2,0,.2,1); --ease-out:cubic-bezier(.23,1,.32,1); /* part vite, se pose doucement : ce qui s'ouvre, ce qui glisse */ /* --- trames ------------------------------------------------------------- */ --z-props:5; /* panneau de propriétés au-dessus du canevas */ --z-tip:50; /* infobulle */ } @media (prefers-color-scheme: dark){ :root:not([data-mode="light"]){ color-scheme: dark; --warn:#B77610; --ok:#3B9555; /* les aplats --*-fill ne changent pas : ils ne dépendent pas du fond de page */ --site-perimetre:#9B7BE8; --site-emprise:#4C9A63; --f-cla:#D363A6; --f-adm:#DA6022; --f-eau:#4086DF; --f-tec:#8D9891; --f-spo:#51A349; --f-uap:#BF8900; --f-pis:#21A3BA; --f-ext:#46854A; --fill-op:0.28; --hatch-ink:rgba(0,0,0,.52); } } :root[data-mode="dark"]{ color-scheme: dark; --warn:#B77610; --ok:#3B9555; --site-perimetre:#9B7BE8; --site-emprise:#4C9A63; --f-cla:#D363A6; --f-adm:#DA6022; --f-eau:#4086DF; --f-tec:#8D9891; --f-spo:#51A349; --f-uap:#BF8900; --f-pis:#21A3BA; --f-ext:#46854A; --fill-op:0.28; --hatch-ink:rgba(0,0,0,.52); } /* Sur pointeur grossier, les contrôles atteignent la cible tactile. */ @media (pointer:coarse){ :root{ --ctl-h:40px; --tap-min:40px; } }