/* ═══════════════════════════════════════════════════════════════════════════ css/tokens.css - L'ÉTAGE 1 DE LA SOURCE UNIQUE (91S-227, 21/08/2026) ═══════════════════════════════════════════════════════════════════════════ CE QUE CE FICHIER CONTIENT, ET RIEN D'AUTRE : les deux blocs de tokens GLOBAUX de l'app - `:root` (129 lignes de déclaration) et `[data-theme="dark"]` (83), soit les 212 lignes annoncées par la demande. Le navigateur, lui, en compte 236 : quelques lignes en portent plusieurs (`--r-6: 6px; --r-8: 8px; --r-12: 12px;`). Elles viennent de `css/critical.css` l.113-421, DÉPLACÉES telles quelles : zéro valeur changée, zéro nom changé, zéro ligne réécrite. Le gabarit (`tasks/gabarit-consultations.md` §1) nomme cet étage « Tokens » et le situait dans critical.css faute de fichier ; il a désormais le sien. ORDRE DE CHARGEMENT - il n'est pas négociable. `index.html` charge ce fichier JUSTE AVANT `critical.css`, qui en consomme les valeurs dès sa première règle. Un token déclaré après son usage ne casse rien en CSS (les variables ne sont pas ordonnées), mais l'inverser cacherait la dépendance : ce fichier vient en premier parce qu'il est la base, et ça se lit dans la balise. ─── CE QUI EST RESTÉ DANS critical.css, ET POURQUOI ─────────────────────── 101 lignes de déclaration (113 déclarations) n'ont PAS été déplacées ce soir. Aucune n'est un oubli ; chacune tient à un CONTEXTE que ce fichier n'a pas. Bloc par bloc, avec le nombre de LIGNES. Les numéros sont ceux de critical.css APRÈS ce déplacement - le fichier a perdu 296 lignes, tout s'est décalé : · l.910-940 (13) et l.945-956 (9) `.sidebar` - `--sb-bg`, `--sb-text`, `--sb-accent`, `--sb-hover-bg`… Ce sont les tokens D'UN COMPOSANT, pas de l'app : ils sont déclarés sur `.sidebar` pour être surchargés par élément (le JS de personnalisation écrit dessus). Les déplacer sur `:root` changerait leur portée, donc leur comportement. Ils relèvent de l'étage « Shell ». · l.963-973 (9) et l.976-990 (13) `[data-theme="dark"] .sidebar` - mêmes tokens, contexte de thème du même composant. Ils suivent leur bloc clair. · l.993-1003 (9) `.sidebar[data-sb-text-mode="light"]` - variante d'encre de la sidebar, pilotée par un attribut de l'élément. Contexte de composant. · l.2566 et l.2572 (2) `@media (max-width: 1024px)` - `--sb-bg` du tiroir mobile, en clair et en sombre. Contexte RESPONSIVE d'un composant : hors media query, ces deux lignes repeindraient la sidebar de bureau. · l.2693-2702 (6), l.2705-2711 (3), l.2714-2720 (3), l.2723-2730 (4), l.2733-2741 (5), l.2744-2760 (9) - l'échelle typographique et l'espacement par point de rupture (`--font-size-*`, `--spacing-*`). Contexte RESPONSIVE : ce sont six RÉÉCRITURES conditionnelles des tokens de base, pas des tokens de plus. Elles ont leur place ici le jour où ce fichier accueillera aussi les points de rupture - une décision à prendre, pas à improviser. · l.3436-3443 (5) `[data-theme="dark"]` - `--surface-card`, `--bg-secondary`… réécrits APRÈS coup pour la palette « Projets ». Déplacer ce bloc sans le fusionner avec le bloc dark principal changerait l'ordre de cascade, donc les valeurs gagnantes. La fusion est un travail de valeurs, pas de fichier : elle relève de 91S-227 (b), pas d'un déplacement pur. · l.3774-3786 (7) `:root` et l.3787-3793 (4) `[data-theme="dark"]` - le socle « DESIGN TOKENS v1 » (élévations, rayons, durées, `--focus-ring`). Même raison : il REDÉFINIT `--focus-ring`, déjà posé plus haut. Le déplacer sans trancher lequel gagne, c'est déplacer un conflit. Un déplacement partiel relu vaut mieux qu'un déplacement total non relu : les 101 lignes restantes tiennent toutes à un contexte ou à un conflit de cascade, et un conflit de cascade ne se déménage pas, il se tranche. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ DESIGN SYSTEM - VARIABLES GLOBALES (Light Mode par defaut) ═══════════════════════════════════════════════════════════════ */ :root { /* === COULEURS SEMANTIQUES === */ --bg-primary: #ffffff; --bg-secondary: #F5F5F7; --bg-tertiary: #FAFAFA; --bg-elevated: #ffffff; --bg-hover: rgba(0, 0, 0, 0.04); --bg-active: rgba(0, 0, 0, 0.08); --bg-input: #ffffff; /* Couleurs sombres statiques (pour login, etc.) */ --bg-dark: #000000; --bg-dark-secondary: #0a0a0a; --bg-dark-tertiary: #1d1d1f; /* Texte */ --text-primary: #1d1d1f; --text-secondary: #424245; --text-tertiary: #86868b; --text-muted: #aeaeb2; --text-disabled: #d2d2d7; --text-light: #ffffff; --text-inverse: #ffffff; /* Bordures */ --border-color: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.12); --border-light: rgba(0, 0, 0, 0.04); --divider-color: rgba(0, 0, 0, 0.06); /* Surfaces (cards, modals, etc.) */ --surface-card: #ffffff; --surface-modal: #ffffff; --surface-sidebar: #F5F5F7; --surface-header: rgba(255, 255, 255, 0.8); /* === ACCENTS (identiques light/dark) === */ --accent-blue: #007AFF; --accent-green: #34C759; /* Vert 91STUDIO — accent UNIQUE du module chantier et des portails (décision Henri 09/08/2026 : « que du vert sur tous les boutons »). Teinte du registre (encre verte), pas le vert pomme iOS. */ --vert-91: #2E7D4F; --accent-orange: #FF9500; --accent-red: #FF3B30; --accent-purple: #AF52DE; --accent-gold: #c9a961; --accent-cyan: #32ADE6; --accent-pink: #FF2D55; /* === GAMME BLEUE + SLATES (validée Henri 14/07 — gouvernance style unique) === Interactif = --blue-500/600 UNIQUEMENT. --blue-700 + slates = data-viz / profondeur, JAMAIS un CTA. Réf : docs/outils/design-system.md + tasks/plan-migration-style-unique.md */ --blue-500: #007AFF; /* = --accent-blue : CTA, liens, actif. SEUL bleu interactif */ --blue-600: #2379D5; /* hover / pressed / focus des éléments bleus */ --blue-700: #396FAA; /* data-viz : barres secondaires, Gantt, jauges */ --slate-600: #405F80; /* neutre froid : en-têtes data-viz, légendes */ --slate-700: #394655; /* surfaces sombres, fonds de graphiques dark */ --slate-800: #2B2F33; /* quasi-noir froid : covers PDF, hero sombres */ --focus-ring: 0 0 0 3px rgba(35, 121, 213, 0.35); /* anneau de focus unique (--blue-600) */ /* Recettes contrôles premium (mesurées sur Attio 18/07/2026) : pas de bordure — ring net 1px inset + ring flou teinté slate + ombre 1px. */ --control-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 2px rgba(28, 40, 64, 0.18), 0 1px 3px rgba(0, 0, 0, 0.04); --control-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.09), 0 0 2px rgba(28, 40, 64, 0.22), 0 2px 4px rgba(0, 0, 0, 0.06); --control-shadow-primary: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(35, 121, 213, 0.12), 0 3px 6px -2px rgba(35, 121, 213, 0.08); /* Status colors */ --color-success: #34C759; --color-success-bg: rgba(52, 199, 89, 0.12); --color-warning: #FF9500; --color-warning-text: #B76E00; /* texte ambre LISIBLE sur fond clair (les pastilles warning restent #FF9500) */ --color-warning-bg: rgba(255, 149, 0, 0.12); --color-danger: #FF3B30; --color-danger-bg: rgba(255, 59, 48, 0.12); --bg-danger-light: #FEF2F2; --accent-red-dark: #991B1B; --color-info: #007AFF; --color-info-bg: rgba(0, 122, 255, 0.12); /* Data-viz — familles de phases MOP (Gantt Planning, décision Henri 20/07). Source unique des couleurs de phase : bg = fond de barre/badge, text = libellé, bar = remplissage d'avancement. JS les consomme en var() dans les styles inline. */ --phase-neutral-bg: #E8EDF3; --phase-neutral-text: #4A5568; --phase-neutral-bar: #A0AEC0; --phase-etudes-bg: #D3E4FD; --phase-etudes-text: #2563EB; --phase-etudes-bar: #93B8F7; --phase-pro-bg: #E0D4FC; --phase-pro-text: #7C3AED; --phase-pro-bar: #B49CF0; --phase-act-bg: #FEF0CD; --phase-act-text: #B45309; --phase-act-bar: #F5D06B; --phase-chantier-bg: #D1F5E4; --phase-chantier-text: #047857; --phase-chantier-bar: #6DD4A0; --phase-opr-bg: #FDD9D7; --phase-opr-text: #C0281E; --phase-opr-bar: #F08B85; /* Chat IA */ --chat-user-bg: #1a1a1a; --chat-user-text: #ffffff; --chat-accent: #3b82f6; --chat-assistant-bg: var(--bg-tertiary); --chat-tool-bg: rgba(59, 130, 246, 0.08); --chat-tool-border: rgba(59, 130, 246, 0.15); --chat-tool-color: #3b82f6; /* === TYPOGRAPHIE APPLE HIG === */ --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', sans-serif; --font-mono: 'SF Mono', 'Roboto Mono', 'Menlo', monospace; /* Tailles de base */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-lg: 17px; --font-size-xl: 20px; --font-size-2xl: 28px; --font-size-3xl: 36px; --font-size-4xl: 48px; /* Headers specifiques (AUGMENTES) */ --font-size-page-title: 17px; /* HIG Headline — toujours 17px */ --font-size-section-title: clamp(17px, 1.5vw + 12px, 24px); --font-size-card-title: clamp(14px, 1vw + 11px, 18px); --font-size-table-header: 12px; --font-size-label: 12px; --font-size-caption: 11px; /* Line heights */ --line-height-tight: 1.2; --line-height-base: 1.5; --line-height-relaxed: 1.75; /* === ESPACEMENTS === */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; /* === LAYOUT === */ /* !important : le resizer/customizer posent le token EN INLINE (perso) — la largeur Linear prime (décision Henri 18/07) */ --sidebar-width: 244px !important; /* Architecture panneau : fond d'app vs panneau de contenu */ /* Le fond gris est SUPPRIME (decision Henri, 11/08/2026) : « supprime le fond un peu gris y compris sur la partie web ». La base et le panneau partagent desormais le meme blanc ; ce qui delimite le panneau est son filet, plus un aplat. En sombre la base reste PLUS FONCEE que le panneau - c'est l'elevation Linear, elle ne se lit pas comme un gris et Henri parlait de l'ecran clair. */ --app-base: var(--bg-primary); --app-panel: var(--bg-primary); --header-height: 64px; --content-max-width: 1600px; --card-border-radius: 12px; --input-border-radius: 8px; --button-border-radius: 8px; /* === RAYONS APPLE HIG === */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 980px; /* === STATUS PILLS === */ --status-new-bg: rgba(0, 122, 255, 0.12); --status-new-text: #007AFF; --status-valid-bg: rgba(52, 199, 89, 0.12); --status-valid-text: #34C759; --status-wait-bg: rgba(255, 149, 0, 0.12); --status-wait-text: #FF9500; --status-reject-bg: rgba(255, 59, 48, 0.12); --status-reject-text: #FF3B30; --status-paid-bg: rgba(175, 82, 222, 0.12); --status-paid-text: #AF52DE; --status-muted-bg: rgba(142, 142, 147, 0.12); --status-muted-text: #8E8E93; /* === OMBRES APPLE HIG === */ --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04); --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.08); --shadow-md: 0 1px 3px rgba(17, 17, 17, 0.10); --shadow-lg: 0 4px 12px rgba(17, 17, 17, 0.10); --shadow-xl: 0 8px 24px rgba(17, 17, 17, 0.12); /* === TRANSITIONS === */ --transition-fast: 120ms ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* Courbe forte pour déplacement/morph (Emil Kowalski). --ease-out existe déjà (L.3712). */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* ═══════════════════════════════════════════════════════════════ DARK MODE — PALETTE APPLE HIG v3.0.0 Surfaces superposées, bordures fines, accents Apple ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* === DEEP-BLACK PALETTE — Pure black bg, surfaces visibles === */ /* Backgrounds — Pur noir page, hiérarchie nette pour cards */ --bg-primary: #000000; /* Fond principal — true black */ --app-base: #0E0E10; /* fond d'app dark (base Linear lch ~4%) */ --app-panel: #161619; /* panneau de contenu, plus clair que la base */ --bg-secondary: #111113; /* Cards et surfaces (niveau 1) */ --bg-tertiary: #18181B; /* Surfaces élevées (niveau 2) */ --bg-elevated: #1F1F23; /* Hover states et surfaces hautes (niveau 3) */ --bg-hover: rgba(255, 255, 255, 0.04); --bg-active: rgba(255, 255, 255, 0.07); --bg-input: #111113; /* Texte — Blancs éclatants, hiérarchie Linear */ --text-primary: #FFFFFF; /* Blanc éclatant pur */ --text-secondary: #B4B4BB; /* Gris clair lumineux */ --text-tertiary: #8B8B93; /* Gris moyen */ --text-muted: #5C5C64; /* Gris foncé */ --text-disabled: #3A3A40; /* Gris disabled */ --text-inverse: #0A0A0B; /* Inverse */ /* Bordures — Très subtiles façon Linear */ --border-color: rgba(255, 255, 255, 0.08); /* Bordure principale */ --border-strong: rgba(255, 255, 255, 0.14); /* Bordures accentuées */ --border-light: rgba(255, 255, 255, 0.04); /* Bordures très subtiles */ --divider-color: rgba(255, 255, 255, 0.06); /* Séparateurs */ --border-linear: rgba(255, 255, 255, 0.08); /* Bordure solide subtile */ /* Surfaces — True-black-first hierarchy */ --surface-card: #0F0F11; /* Cards (niveau 1) */ --surface-modal: #161618; /* Modals (niveau 2) */ --surface-sidebar: #000000; /* Sidebar (fond principal, true black) */ --surface-header: rgba(0, 0, 0, 0.92); /* Header glassmorphism */ /* Status colors (plus lumineux pour dark mode) */ --color-success: #30D158; --color-success-bg: rgba(48, 209, 88, 0.15); --color-warning: #FFD60A; --color-warning-text: #FFD60A; /* en dark le jaune est lisible tel quel */ --color-warning-bg: rgba(255, 214, 10, 0.15); --color-danger: #FF453A; --color-danger-bg: rgba(255, 69, 58, 0.15); --color-info: #86868b; --color-info-bg: rgba(255, 255, 255, 0.06); /* Data-viz — familles de phases MOP en dark (fonds profonds, textes lumineux) */ --phase-neutral-bg: #1E2127; --phase-neutral-text: #8896A6; --phase-neutral-bar: #4A5568; --phase-etudes-bg: #1A1A1A; --phase-etudes-text: #60A5FA; --phase-etudes-bar: #4A5568; --phase-pro-bg: #1E1E1E; --phase-pro-text: #A78BFA; --phase-pro-bar: #6B5B73; --phase-act-bg: #231C0E; --phase-act-text: #FBBF24; --phase-act-bar: #D97706; --phase-chantier-bg: #0D1F17; --phase-chantier-text: #34D399; --phase-chantier-bar: #059669; --phase-opr-bg: #261414; --phase-opr-text: #FCA5A5; --phase-opr-bar: #DC2626; /* Ombres — Réduites (on privilégie les bordures) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.35); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.4); /* Danger light / accent red dark — dark mode */ --bg-danger-light: rgba(239, 68, 68, 0.12); --accent-red-dark: #FCA5A5; /* Chat IA dark */ --chat-user-bg: #3b82f6; --chat-accent: #3b82f6; --chat-tool-bg: rgba(124, 58, 237, 0.08); --chat-tool-border: rgba(124, 58, 237, 0.15); --chat-tool-color: #7C3AED; /* Accents Apple dark mode — couleurs vives (pas neutres) */ --accent-blue: #0A84FF; --accent-green: #30D158; --vert-91: #3FA96C; /* dark : même encre, remontée pour le contraste */ --accent-orange: #FF9F0A; --accent-red: #FF453A; --accent-purple: #BF5AF2; --accent-cyan: #64D2FF; --accent-pink: #FF375F; /* Gamme bleue dark — --blue-500 suit --accent-blue (#0A84FF). Slates inchangés (neutres froids). */ --blue-500: #0A84FF; --blue-600: #3D9BFF; /* hover/focus plus clair sur fond sombre */ --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.40); --control-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); --control-shadow-hover: inset 0 0 0 1px rgba(255, 255, 255, 0.11), 0 0 2px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); --control-shadow-primary: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px -2px rgba(10, 132, 255, 0.25), 0 3px 6px -2px rgba(10, 132, 255, 0.15); /* === ACCENT PRINCIPAL — Dark Mode (bleu Apple) === */ --accent: #0A84FF; --accent-subtle: rgba(10, 132, 255, 0.10); --accent-border: rgba(10, 132, 255, 0.25); --accent-glow: rgba(10, 132, 255, 0.15); /* Status pills dark mode */ --status-new-bg: rgba(10, 132, 255, 0.15); --status-new-text: #0A84FF; --status-valid-bg: rgba(48, 209, 88, 0.15); --status-valid-text: #30D158; --status-wait-bg: rgba(255, 159, 10, 0.15); --status-wait-text: #FF9F0A; --status-reject-bg: rgba(255, 69, 58, 0.15); --status-reject-text: #FF453A; --status-paid-bg: rgba(191, 90, 242, 0.15); --status-paid-text: #BF5AF2; --status-muted-bg: rgba(142, 142, 147, 0.15); --status-muted-text: #98989D; /* Card hover state */ --bg-card-hover: #1C1C1C; --border-hover: #2A2A2E; }