/* FICHIER RECOPIÉ — NE PAS MODIFIER ICI. Source : brand/tokens.css · Recopie : node brand/sync.mjs Une retouche faite dans cette copie est écrasée au prochain sync, et fait diverger le site de l'application entre-temps. */ /* ============================================================================ OCC MIND — LE SOCLE DE MARQUE ---------------------------------------------------------------------------- Charte graphique OCC MIND v2.5 · Toulouse · Occitanie. OCC MIND est édité par Tobin IA ; la mention « by Tobin IA » figure sur tous les documents de la plateforme, sans exception. CE FICHIER NE SE MODIFIE PAS À LA MAIN DANS LES APPLICATIONS. Sa source est `brand/tokens.css` ; `node brand/sync.mjs` le recopie dans `apps/web/src/brand.css` et `apps/site/public/brand.css`. Une retouche faite dans une copie est écrasée au prochain sync — et surtout, elle fait diverger le site de l'application, ce que ce fichier existe précisément pour empêcher. Ce qu'il porte : les COULEURS, les POLICES et les MATIÈRES. Rien d'autre. Les échelles (texte, écart, rayon) appartiennent à chaque produit : le site est éditorial et respire, l'application est dense et travaille. Leur imposer la même densité les abîmerait tous les deux. ============================================================================ */ /* --- Les trois voix --------------------------------------------------------- Auto-hébergées, et ce n'est pas un choix de confort : la CSP de production (`deploy/Caddyfile.web`) impose `font-src 'self' data:`. Un vers fonts.googleapis.com serait refusé par le navigateur, et la page retomberait sur une police système — c'est-à-dire sur une autre marque. Archivo et Instrument Sans sont VARIABLES : un fichier par sous-ensemble couvre toute la plage de graisses. IBM Plex Mono ne l'est pas, d'où ses deux fichiers par sous-ensemble. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/archivo-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: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/archivo-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: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-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: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-mono-latin-400.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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-mono-latin-ext-400.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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-mono-latin-500.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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-mono-latin-ext-500.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; } :root { /* ── Primaire & neutres ─────────────────────────────────────────────────── Le fond est toujours sombre. La marque ne vit pas sur fond blanc — ce n'est pas une préférence, c'est la règle qui tient toute la palette : les six couleurs de pôle sont calibrées pour passer le contraste AA sur Nuit, et aucune ne le passe sur blanc. */ --nuit: #07070b; /* fond principal de toute la marque */ --ardoise: #101016; /* cartes, panneaux, surfaces surélevées */ --filet: #26262f; /* bordures 1 px, séparateurs, grilles */ --galet: #a3a3b2; /* texte secondaire, légendes */ --chaux: #f4f4f7; /* texte principal, titres */ --terre: #f1501e; /* PRIMAIRE — logo, boutons, accents, liens */ --braise: #ff8a47; /* survol, dégradés du motif */ /* Les deux crans que la charte imprimée n'a pas besoin de nommer et qu'un écran, lui, réclame : la surface qui monte d'un cran au survol, et le filet qui s'éclaire avec elle. Sans eux, un panneau survolé ne répond pas. */ --ardoise-haut: #17171f; --filet-clair: #34343f; --galet-fonce: #6c6c7c; /* la signature éditeur, les mentions de pied */ /* Terre d'Oc translucide — six crans, pas quinze. Max 10 % de la surface d'un écran en aplat : au-delà, l'orange cesse d'être un accent. */ --terre-a06: rgba(241, 80, 30, 0.06); --terre-a10: rgba(241, 80, 30, 0.1); --terre-a16: rgba(241, 80, 30, 0.16); --terre-a24: rgba(241, 80, 30, 0.24); --terre-a40: rgba(241, 80, 30, 0.4); --terre-a60: rgba(241, 80, 30, 0.6); /* ── Les six couleurs de pôle ───────────────────────────────────────────── UNE PAR PÔLE, JAMAIS INTERCHANGEABLES. Elles n'identifient pas un agent — l'agent est identifié par son portrait. À quatorze agents, une couleur par agent devient illisible : les teintes disponibles tombaient à ΔE 8,6 les unes des autres, là où il en faut ~15 pour distinguer deux pastilles à 24 px. La couleur dit le pôle, et rien d'autre. Le texte posé sur une couleur de pôle est blanc Chaux, jamais noir. */ --pole-coeur: #f1501e; --pole-terrain: #09aaa3; --pole-bureau: #5171dd; --pole-argent: #d45b8e; --pole-croissance: #e8a33d; --pole-confiance: #3c8c52; /* ── Statuts système ────────────────────────────────────────────────────── Ce ne sont PAS des couleurs de pôle. Un succès n'appartient à aucun métier, et le vert Confiance ne doit jamais être lu comme « ça a marché ». */ --succes: #4ec97f; --alerte: #e8a33d; --erreur: #e2564c; --succes-fond: rgba(78, 201, 127, 0.12); --alerte-fond: rgba(232, 163, 61, 0.12); --erreur-fond: rgba(226, 86, 76, 0.12); /* ── Les trois voix ─────────────────────────────────────────────────────── Titrage en capitales, interlettrage resserré, réservé aux titres, aux noms d'agents et aux accroches — jamais pour un paragraphe. Texte pour toute la lecture courante. Données pour ce qui s'aligne en colonne : hexadécimaux, identifiants, horodatages, chiffres. */ --font-titre: 'Archivo', 'Arial Narrow', 'Segoe UI', sans-serif; --font-texte: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-donnee: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --tr-titre: -0.02em; /* interlettrage de titrage */ --tr-surtitre: 0.16em; /* sur-titres et libellés en capitales */ --tr-signature: 0.18em; /* la signature éditeur, et elle seule */ /* ── La matière ─────────────────────────────────────────────────────────── Le verre de la marque est FUMÉ, pas néon. La charte interdit le glow et les dégradés violet-bleu ; ce qui donne la profondeur ici n'est donc pas une lueur, c'est la superposition de trois choses discrètes : un voile clair très faible, une arête de 1 px en haut, et une ombre noire large. C'est exactement le vocabulaire d'un panneau de verre posé sur du noir — et c'est le seul vocabulaire de profondeur du système. `--verre-flou` demande `backdrop-filter`. Là où il manque (GPU coupé, vieux WebView), une surface à 4 % de blanc laisse passer le fond et raye le texte : tout `.verre` doit avoir un repli opaque en `@supports not`. */ --verre: linear-gradient(158deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)); --verre-haut: linear-gradient(158deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)); --verre-flou: blur(28px) saturate(150%); --verre-bord: rgba(255, 255, 255, 0.075); --verre-bord-clair: rgba(255, 255, 255, 0.13); /* L'arête. Sans elle, une carte sombre sur un fond sombre n'a pas de bord : elle a un trou. C'est le seul détail qui sépare « du verre » de « du gris ». */ --arete: inset 0 1px 0 rgba(255, 255, 255, 0.08); --arete-forte: inset 0 1px 0 rgba(255, 255, 255, 0.14); --verre-repli: #13131a; /* l'opaque de secours, quand le flou n'existe pas */ /* L'ARDOISE, RENDUE TRANSLUCIDE — le fond de travail devient du verre. ── Pourquoi c'était opaque, et pourquoi ça ne l'est plus ──────────────── La carte était en Ardoise pleine, et la raison écrite était juste : « elle ne doit pas laisser passer la trame, la charte l'interdit derrière du texte courant ». Elle supposait que du verre laisse voir CE QU'IL Y A DERRIÈRE. Un verre FLOU, non : `--verre-flou` porte 28 px de flou, et 28 px appliqués à un motif de lignes n'en laissent pas un motif atténué — ils n'en laissent plus rien, qu'un lavis sans structure. Ce qui raye un texte, c'est une ligne ; un lavis ne raye rien. Ce qui traverse, alors, c'est la seule chose qu'on veuille : la chaleur de l'atmosphère. Une carte posée sous le halo Terre d'Oc est un peu plus chaude que la même carte posée dans le rail — et c'est ce qui donne enfin un DEHORS à un écran qui n'en avait pas. ── L'opacité n'est pas un réglage de goût ────────────────────────────── 0,72 est un plancher de LISIBILITÉ, pas un dosage esthétique. En dessous, le contraste de Galet sur la carte passe sous 4,5:1 aux endroits que l'atmosphère éclaircit — c'est-à-dire que le texte devient conforme ici et non conforme trois cents pixels plus haut, ce qui est pire qu'un texte franchement trop pâle : ça ne se voit pas en relisant une capture. Le repli `@supports not` rend l'Ardoise pleine : sans flou, ces deux valeurs laisseraient passer la trame POUR DE VRAI. ── Le site ne s'en sert pas, et c'est la règle ───────────────────────── La matière est ici parce que la matière est commune ; son EMPLOI ne l'est pas. Le verre ne rend que ce qu'il a derrière lui, et le site éditorial n'a pas d'atmosphère : ses cartes reposeraient sur du noir, ce qui ne donne pas de la profondeur mais de la boue. Une carte de site reste en Ardoise pleine. Le jour où le site prend une atmosphère, il prendra ces jetons — ils l'attendent, ils ne le forcent pas. */ --ardoise-verre: rgba(16, 16, 22, 0.72); --ardoise-haut-verre: rgba(23, 23, 31, 0.82); /* ── Les ombres ─────────────────────────────────────────────────────────── Sur fond clair une ombre est grise ; sur Nuit elle est NOIRE et large, sinon elle ne se voit pas. Quatre crans, plus une seule ombre colorée : celle du bouton primaire, et elle n'est pas un glow — c'est l'élévation du seul élément orange de l'écran. */ --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5); --sh-2: 0 8px 24px -10px rgba(0, 0, 0, 0.75); --sh-3: 0 20px 56px -18px rgba(0, 0, 0, 0.85); --sh-4: 0 36px 96px -28px rgba(0, 0, 0, 0.9); /* L'ombre du bouton primaire. Elle a été resserrée après l'avoir REGARDÉE : à 28 px d'étalement, elle ne se lisait plus comme une élévation mais comme un halo autour de l'orange — c'est-à-dire exactement le glow que la charte interdit. Une ombre d'élévation est courte et décalée vers le bas ; une lueur est large et centrée. La différence tient dans ces deux nombres. */ --sh-terre: 0 6px 14px -8px rgba(241, 80, 30, 0.5); /* ── L'atmosphère ─────────────────────────────────────────────────── LE FOND N'EST PAS UN ÉLÉMENT, ET C'EST TOUTE LA DIFFÉRENCE AVEC UN GLOW. La charte interdit le glow, et l'interdit est juste : un halo autour d'un bouton lui prête une importance qu'il n'a pas, et sur Nuit il se lit comme une bavure d'impression. Mais l'interdit porte sur ce qui ENTOURE UN ÉLÉMENT. Ceci n'entoure rien — c'est la pièce, pas le meuble : posé en `position: fixed` derrière toute l'application, sans `pointer-events`, il n'appartient à aucun composant et aucun composant n'en hérite. Le test qui sépare les deux, et qui se tranche sans discuter : ENLEVEZ L'ÉLÉMENT. Si la lueur part avec lui, c'était un glow. Ici il n'y a pas d'élément à enlever. ── Pourquoi l'orange et le bleu ne se rencontrent JAMAIS ────────────── L'interdit suivant est nommément « pas de dégradé violet-bleu ». Un violet naît là où un orange et un bleu se recouvrent. Les deux halos sont donc ancrés aux angles OPPOSÉS et éteints bien avant le centre : il n'existe aucun point de l'écran où les deux se superposent. Ce n'est pas un dosage prudent qu'un réglage d'opacité pourrait défaire, c'est une impossibilité géométrique — et c'est ce qui la rend encore vraie le jour où quelqu'un retouchera ces nombres sans relire ce paragraphe. Aucune couleur nouvelle : Terre d'Oc, la primaire, et Bureau, déjà dans la palette des pôles. Une atmosphère n'ouvre pas la palette. ── Des dégradés, pas un flou ──────────────────────────────────── La forme évidente serait un disque coloré sous `filter: blur(90px)`. Elle coûte une passe de flou sur toute la surface de la fenêtre, à chaque image, et le prix se paie sur la machine du client — pas sur la nôtre. Un `radial-gradient` rend la même chose et ne coûte rien. */ --atmo-terre: radial-gradient(72% 56% at 94% -12%, rgba(241, 80, 30, 0.15), transparent 70%); --atmo-bureau: radial-gradient(52% 60% at 6% 88%, rgba(81, 113, 221, 0.17), transparent 66%); /* ── Le mouvement ───────────────────────────────────────────────────────── UNE seule courbe. Deux courbes dans une interface, et rien n'a plus le même poids : l'œil lit la différence de rythme comme une différence d'importance, alors qu'elle ne dit rien. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 0.18s; --t-hover: 0.32s; --t-slow: 0.5s; } /* ── La trame — topographie & réseau ───────────────────────────────────────── Lignes de niveau + points connectés, en Terre d'Oc, 25 % d'opacité au maximum, toujours sur fond Nuit. FOND DE SECTION, jamais derrière du texte courant : c'est la règle qui empêche la trame de devenir un bruit de fond permanent. Deux dosages, et ils ne servent pas au même endroit. */ .trame { position: relative; isolation: isolate; } .trame::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url('/logo/trame.svg'); background-size: 640px 640px; opacity: 0.25; /* La trame s'éteint sur les bords : une texture qui s'arrête net sur une arête se lit comme une image mal découpée, pas comme un fond. */ -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%); } .trame-douce::before { opacity: 0.12; } /* ── La signature éditeur — OBLIGATOIRE ────────────────────────────────────── OCC MIND est édité par Tobin IA. La mention figure sur TOUS les documents de la plateforme, sans exception : interface, site, exports, devis, contrats. Archivo 700, interlettrage +0,18 em, Galet foncé avec « Tobin IA » en Terre d'Oc. Jamais traduite, jamais abrégée. */ .signature-editeur { font-family: var(--font-titre); font-weight: 700; letter-spacing: var(--tr-signature); text-transform: uppercase; color: var(--galet-fonce); } .signature-editeur b, .signature-editeur strong { color: var(--terre); font-weight: 700; }