/* ═══════════════════════════════════════════════════════════════════ Calidae — Design system Tokens → primitives → layout → components → responsive Deux thèmes : clair (défaut) et sombre, via [data-theme] sur ═══════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── 0. POLICES Servies depuis ce domaine, et non plus par Google Fonts : une feuille de style tierce fait transmettre l'adresse IP du visiteur à son fournisseur avant même qu'il ait cliqué quoi que ce soit, ce qu'aucune base légale ne couvre ici. Fraunces v38 et Inter v20, découpées en sous-ensembles exactement comme Google les sert — les plages ci-dessous sont les siennes, à la virgule. Ce sont des polices VARIABLES : leur axe `wght` court de 100 à 900, donc un seul fichier par famille et par sous-ensemble porte les graisses 400 à 700 employées ici. Aucune graisse n'est synthétisée par le navigateur. Tous les alphabets sont présents, y compris cyrillique, grec et vietnamien : le nom d'un locataire s'écrit dans sa lettre. Cela ne coûte rien au chargement — `unicode-range` fait que le navigateur ne télécharge un fichier que si un caractère de sa plage figure sur la page. Une page en français n'en récupère que deux. ───────────────────────────────────────────── */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/fraunces-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-greek-ext.woff2') format('woff2'); unicode-range: U+1F00-1FFF; } /* ───────────────────────────────────────────── 1. TOKENS ───────────────────────────────────────────── */ :root { color-scheme: light; /* Surfaces — axe chaud unique (~35°), sable. Toute la gamme partage la même teinte : c'est ce qui évite le rendu « délavé » d'une palette dont les surfaces et les textes se contredisent. */ --bg: #FAF9F6; --surface: #FFFFFF; --surface-2: #F5F3EE; --surface-3: #EFEDE6; --surface-inv: #1A1815; --border: #E4E1D8; --border-2: #CFCBBF; /* Encre — papier et encre, rien d'autre */ --ink: #1A1815; --ink-2: #55514A; --ink-3: #6E6A62; --ink-inv: #FAF9F6; /* Accent — bronze sourd, employé avec parcimonie. Les actions principales sont en encre pleine, pas en couleur : un bouton noir sur papier est plus tenu qu'un bouton coloré. */ --accent: #7A6A3C; --accent-hover: #635634; --accent-ink: #FFFFFF; --accent-soft: #F2EEE1; --accent-soft-2: #E2DABF; --accent-fg: #5E5230; --accent-ring: rgba(122, 106, 60, .26); /* Bouton plein : encre sur papier, inversé en thème sombre */ --solid-hover: #35312A; /* Statuts — fond / texte. L'accent n'étant plus doré, « provisoire » retrouve un ambre naturel au lieu de l'orange forcé qui servait à l'en distinguer. */ --ok-bg: #E8EEE2; --ok-fg: #38602F; --ok-mark: #4E8442; --warn-bg: #F6EEDC; --warn-fg: #7E5A12; --warn-mark: #B08420; --info-bg: #E7EDF3; --info-fg: #2D5477; --info-mark: #4C7CA5; --live-bg: #EDE9F0; --live-fg: #5B4275; --live-mark: #7D639A; --bad-bg: #F5E6E1; --bad-fg: #8F3A26; --bad-mark: #B55B41; /* Data-viz — série unique, dans le bronze de l'accent */ --viz-bar: #A08D53; --viz-bar-hi: #7A6A3C; --viz-grid: #EAE7DE; /* Rayons — presque nets. Les grands arrondis « app mobile » sont ce qui tirait l'ensemble vers le tableau de bord générique. */ --r-xs: 3px; --r-sm: 4px; --r: 5px; --r-lg: 7px; --r-xl: 9px; --r-full: 999px; /* Ombres — quasi supprimées : la hiérarchie vient de la typo et des filets. Seule l'élévation réelle (modale, tiroir) en conserve une. */ --sh-1: 0 1px 1px rgba(26,24,21,.05); --sh-2: 0 1px 2px rgba(26,24,21,.05); --sh-3: 0 16px 44px rgba(26,24,21,.15), 0 4px 12px rgba(26,24,21,.07); /* Typo — un serif de titrage porte le caractère, l'Inter le fonctionnel */ --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* Gabarit */ --rail: 250px; --topbar-h: 62px; --ease: cubic-bezier(.32, .72, 0, 1); } :root[data-theme="dark"] { color-scheme: dark; /* Le sombre garde le même axe chaud : un gris neutre paraîtrait bleuté par contraste avec l'accent doré. */ --bg: #17150F; --surface: #1E1C15; --surface-2: #24211A; --surface-3: #2C2921; --surface-inv: #FAF9F6; --border: #302D24; --border-2: #423E33; --ink: #EDEAE1; --ink-2: #A5A093; --ink-3: #8B8779; --ink-inv: #1A1815; /* Sur fond sombre le bronze devient laiton et gagne en présence */ --accent: #C2AC6A; --accent-hover: #D2BE80; --accent-ink: #1A1710; --accent-soft: #2C2718; --accent-soft-2: #3E3722; --accent-fg: #D6C48A; --accent-ring: rgba(194, 172, 106, .28); --solid-hover: #E5E1D6; --ok-bg: #1E2A18; --ok-fg: #9DBE8C; --ok-mark: #6B9459; --warn-bg: #2C2515; --warn-fg: #D6B478; --warn-mark: #B08420; --info-bg: #1B242E; --info-fg: #9BB6CE; --info-mark: #4C7CA5; --live-bg: #262032; --live-fg: #B7A3C9; --live-mark: #7D639A; --bad-bg: #2E1E19; --bad-fg: #D9A08C; --bad-mark: #B55B41; --viz-bar: #8E7C46; --viz-bar-hi: #C2AC6A; --viz-grid: #2A2721; --sh-1: 0 1px 2px rgba(0,0,0,.44); --sh-2: 0 4px 14px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.32); --sh-3: 0 24px 60px rgba(0,0,0,.64), 0 6px 18px rgba(0,0,0,.42); } /* ───────────────────────────────────────────── 2. RESET & BASE ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Le double-tape du navigateur agrandit la page sans moyen commode de revenir en arrière, et il se déclenche dès qu'on presse deux fois de suite au même endroit : les flèches de mois du calendrier, un onglet, une case à cocher. `manipulation` le retire en ne gardant que le défilement et le pincement — c'est-à-dire : manipulation = pan-x pan-y pinch-zoom Le pincement reste ouvert à dessein, contrairement à ../catan : cette interface est faite de texte et de formulaires, et il est le dernier recours pour grossir un tableau serré. Pour la même raison, pas de user-scalable=no sur le viewport, qui interdirait les deux. Sur le sélecteur universel, et non sur html ou body : WebKit n'honore pas touch-action posé là et la valeur ne redescend pas sur les descendants. Safari ignore parfois jusqu'à cette déclaration face à son propre « zoom intelligent » ; assets/app.js refuse en plus le second tape d'un double. */ * { touch-action: manipulation; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--f-ui); font-size: 14px; line-height: 1.5; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* dvh suit la barre d'URL mobile ; vh se résout contre le grand viewport (barre masquée) et laisserait une bande vide en bas sous viewport-fit=cover. La ligne vh reste en repli pour les navigateurs sans dvh. */ min-height: 100vh; min-height: 100dvh; overflow-x: hidden; } /* Un serif ne veut pas du crénage négatif qu'on applique aux grotesques */ h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.005em; line-height: 1.22; } /* Libellés en petites capitales espacées — le détail le plus « imprimé » du système, appliqué partout où un champ ou une colonne est nommé. */ .label, .fieldset-title, .rail-group, .block-title, .kpi-lbl, .recap-title, .agenda-date, thead th { text-transform: uppercase; letter-spacing: .09em; font-weight: 600; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } svg { display: block; } /* Focus — visible partout, jamais sur clic souris */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } ::selection { background: var(--accent-soft-2); color: var(--accent-fg); } /* Barres de défilement discrètes */ * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* Piles de texte (titre + sous-titre). Ces libellés sont des — la plupart vivent dans un