/* ============================================================ instanta — le thème, à un seul endroit ============================================================ TOUTES les couleurs du site sont ici, et nulle part ailleurs (DEC-013). Ce n'est pas une préférence de style : c'est ce qui rend la bascule clair/sombre possible. Rattraper une bascule après coup sur quinze écrans est un chantier ; la préparer coûte une heure. Une couleur écrite en dur dans un écran est un écran qui restera clair pour toujours. Un test automatique refuse toute couleur écrite ailleurs que dans ce fichier, et vérifie que la palette de DEC-012 y figure en entier, dans les deux jeux : voir `site-admin/tests/charte-visuelle.test.js`. Registre visuel (DEC-012) : sobre, sérieux, rassurant — celui du document officiel et de l'assurance. Le vert, l'orange et le rouge sont **réservés aux statuts** ; ils ne décorent jamais rien. ============================================================ */ /* ============================================================ LA POLICE, SERVIE PAR NOUS — PLUS AUCUN APPEL À GOOGLE ============================================================ ⚑ POURQUOI (décision de Jibril, 23/09/2026). Avant, chaque page chargeait Inter depuis `fonts.googleapis.com`. `document.html` est la page qu'ouvre un client SANS COMPTE pour lire son état des lieux : ce chargement transmettait son adresse IP à un tiers, sans qu'il l'ait demandé ni consenti. Sur un produit dont l'argument est la solidité juridique, c'était la mauvaise dépendance. Le rendu est identique — ce sont exactement les mêmes fichiers. DEUX FICHIERS, ET DEUX SEULEMENT. Google découpe Inter en sept plages Unicode (latin, latin-ext, grec, cyrillique, vietnamien…). On ne garde que `latin` et `latin-ext` : la seconde porte les caractères accentués étendus. Le reste ne servirait à personne ici et pèserait à chaque visite. ET C'EST LA VERSION VARIABLE : un seul fichier couvre 400 à 700, au lieu de quatre fichiers par plage. D'où `font-weight: 400 700` — ce n'est pas une approximation, c'est l'intervalle que le fichier contient réellement. `font-display: swap` : le texte s'affiche tout de suite dans la police de repli, puis bascule. Une page d'état des lieux ne doit pas rester blanche parce qu'une police se charge. Licence : Inter est sous SIL Open Font License 1.1, qui autorise l'auto- hébergement et demande que la licence accompagne les fichiers — elle est dans `polices/LICENCE-Inter.txt`. ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('polices/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('polices/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; } /* ============================================================ LA BASE DE MESURE, ICI ET NULLE PART AILLEURS (27/09/2026) ============================================================ ATTENTION — CE QUI S'EST PASSÉ. `* { box-sizing: border-box }` était recopié dans CHAQUE feuille de page — accueil, codes, formulaires, parametres, super, connexion, document — et `facturation.css` l'avait oublié. Résultat mesuré au navigateur : sur « Facturation » (et « Contrat », qui charge la même feuille), la barre de gauche faisait 237 px au lieu de 236 et ses entrées 44 px au lieu de 42. La barre CHANGEAIT donc en passant d'un onglet à l'autre, et c'est exactement ce que Jibril a vu. ⚑ POURQUOI ICI. `theme.css` est la seule feuille que TOUTES les pages chargent, et en premier. Une règle de mesure recopiée sept fois est une règle qu'on finit par oublier une huitième — et l'oubli ne se voit pas : il se mesure, à un pixel près. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ⚑ LA GOUTTIÈRE DE DÉFILEMENT EST TOUJOURS RÉSERVÉE. Mesuré au navigateur : sous 820 px, la barre du menu faisait 804 px sur une page qui défile et 820 px sur une qui ne défile pas — 16 px d'écart, donc un CADRE QUI SAUTE en changeant d'onglet. Réserver la place une fois pour toutes supprime la classe entière du problème, quelle que soit la longueur du contenu. */ html { scrollbar-gutter: stable; } /* ATTENTION — ET LA MÊME HISTOIRE POUR LE CORPS DE PAGE. Cette règle était recopiée dans SEPT feuilles, à l'identique — et `facturation.css` ne l'avait pas. Mesuré au navigateur : sur « Facturation » et « Contrat », le menu s'affichait dans la police par défaut du navigateur, pas dans Inter. Les libellés y faisaient 88 px au lieu de 104. La barre de gauche changeait donc de TYPOGRAPHIE en passant d'un onglet à l'autre, et c'est la première chose qu'on remarque sans savoir la nommer. Une page qui veut un fond différent (la connexion, par exemple) le dit dans SA feuille : elle surcharge, elle ne recopie plus. */ body { margin: 0; font-family: var(--police); font-size: var(--taille-texte); color: var(--couleur-texte); background: var(--couleur-fond); } :root { /* --- Couleurs, thème clair (DEC-012) --- */ --couleur-principale: #1d4ed8; --couleur-principale-texte: #ffffff; /* LE FOND REDEVIENT DISTINCT DE LA SURFACE (26/08/2026, refonte visuelle de l'espace client, décision de Jibril). Historique, parce que ce va-et-vient mérite d'être expliqué plutôt que subi : DEC-012 posait un gris très pâle ; le 15/08/2026 Jibril l'a fait passer au blanc pur, et fond et surface se sont confondus. Un an de back-office plus tard, le constat est tombé de lui-même — « c'est vide de vie » : sur du blanc, une carte blanche ne se détache de rien, quel que soit son contour. On revient donc à deux valeurs distinctes, mais DÉRIVÉES de la couleur de la marque plutôt que d'un gris neutre : le fond est un blanc à peine bleuté, la surface reste le blanc pur. C'est le fond qui fait flotter les cartes. En thème sombre, les deux étaient déjà distincts — un « tout noir » écraserait la hiérarchie de la page. */ --couleur-fond: color-mix(in srgb, var(--couleur-principale) 4%, #f8f9fc); --couleur-surface: #ffffff; --couleur-texte: #0f172a; --couleur-texte-secondaire: #64748b; --couleur-bordure: #e2e8f0; /* Statuts — jamais décoratifs */ --couleur-succes: #16a34a; --couleur-attention: #f59e0b; --couleur-alerte: #dc2626; /* Teintes de fond des badges de statut : la même couleur, très diluée. Écrites en `color-mix` pour rester liées à la couleur de statut : changer le rouge change aussi son fond, sans risque d'oubli. */ --fond-succes: color-mix(in srgb, var(--couleur-succes) 12%, var(--couleur-surface)); --fond-attention: color-mix(in srgb, var(--couleur-attention) 14%, var(--couleur-surface)); --fond-alerte: color-mix(in srgb, var(--couleur-alerte) 12%, var(--couleur-surface)); /* La bordure d'un repère d'alerte : assez marquée pour se voir, assez douce pour ne pas crier. Employée par la marque « hors zone » de l'accueil. */ --bordure-alerte: color-mix(in srgb, var(--couleur-alerte) 45%, var(--couleur-bordure)); --fond-principale-doux: color-mix(in srgb, var(--couleur-principale) 8%, var(--couleur-surface)); /* LE CONTOUR DES CARTES. Sur fond blanc, un cadre gris disparaît ; un bleu franc, lui, ferait un damier et cesserait de vouloir dire « instanta » pour dire « attention ». D'où un bleu très dilué : on voit le bloc, pas le trait. Lié à la couleur principale, donc juste dans les deux thèmes. */ --couleur-bordure-carte: color-mix(in srgb, var(--couleur-principale) 22%, var(--couleur-surface)); /* ====================================================================== LE CADRE : la barre de gauche, l'en-tête, le logo ====================================================================== Le look retenu s'appelle « bandeau » (26/08/2026) : la couleur de la marque est EN HAUT, en aplat, et la barre de gauche reste claire. La couleur signe la page sans peser sur les cinq entrées du menu, qu'on lit toute la journée. Presque tout se dérive de ce qui existe déjà : changer le bleu de la marque change le cadre entier, et rien ne se met à jurer. */ --entete-fond: var(--couleur-principale); --entete-texte: #ffffff; --entete-bordure: #1e40af; /* Les contours et survols POSÉS SUR le bandeau. Ils se dérivent de sa couleur de texte : le bandeau peut changer de bleu, ils resteront justes. Ils vivent ici et non dans layout.css parce qu'aucune couleur — fût-elle calculée — ne s'écrit ailleurs que dans ce fichier (DEC-013). */ --entete-contour: color-mix(in srgb, var(--entete-texte) 26%, transparent); --entete-survol: color-mix(in srgb, var(--entete-texte) 12%, transparent); --rail-fond: var(--couleur-surface); --rail-texte: var(--couleur-texte-secondaire); /* Le texte FORT de la barre (la marque, le nom de la société) : distinct de celui de la pilule active, sans quoi le blanc de la pilule rendrait la marque invisible sur une barre claire. */ --rail-fort: var(--couleur-texte); --rail-survol: var(--fond-principale-doux); --rail-actif-fond: var(--couleur-principale); --rail-actif-texte: var(--couleur-principale-texte); --rail-bordure: var(--couleur-bordure); /* Le logo : une tuile arrondie et une coche, dessinées (DEC-017 : pas d'emoji, et rien à charger). */ --logo-tuile: var(--couleur-principale); --logo-signe: var(--couleur-principale-texte); /* Le gris très pâle des zones creuses : une étape pas encore faite, le fond d'un badge neutre. Lié au texte secondaire, donc juste dans les deux thèmes. */ --fond-creux: color-mix(in srgb, var(--couleur-texte-secondaire) 12%, var(--couleur-surface)); /* --- La bulle de mission (accueil, refonte du 26/08/2026) --- Deux couleurs CALCULÉES, posées ici plutôt que dans styles/accueil.css : DEC-013 interdit tout `color-mix()` en dehors de ce fichier, même quand ses arguments sont déjà des variables de thème (le test de charte visuelle l'éprouve à la lettre). */ /* Le contour d'une bulle survolée, un peu plus bleu que le contour au repos — c'est ce qui dit « ceci s'ouvre » sans poser une couleur de statut. */ --bulle-survol-bordure: color-mix(in srgb, var(--couleur-principale) 40%, var(--couleur-bordure)); /* Le fond de la pastille de compte, sur un onglet actif : le texte du bouton est déjà `--couleur-principale-texte`, ce fond en est une version diluée. */ --pastille-active-fond: color-mix(in srgb, var(--couleur-principale-texte) 22%, transparent); /* Ombres : douces et discrètes, autorisées pour la finition (DEC-017). */ --ombre-carte: 0 1px 2px rgb(15 23 42 / 6%), 0 1px 3px rgb(15 23 42 / 4%); --ombre-flottante: 0 4px 12px rgb(15 23 42 / 10%); /* L'ombre d'une carte survolée : elle ne colore rien, elle décolle. C'est ce qui dit « ceci s'ouvre » sans ajouter une couleur de plus. */ --ombre-survol: 0 4px 14px rgb(15 23 42 / 10%), 0 1px 4px rgb(15 23 42 / 6%); /* Le voile posé derrière un pop-up : il doit assombrir la page dans les deux thèmes. En sombre, un voile clair éclaircirait au lieu d'éteindre. */ --voile: rgb(15 23 42 / 45%); /* --- Formes (DEC-014) --- */ --rayon: 8px; --rayon-petit: 4px; /* badges de statut. Jamais de « pilule ». */ /* Le rayon d'une carte de mission : 8 px sur un bloc large paraît carré, 12 px l'adoucit sans faire « application de téléphone ». */ --rayon-bulle: 10px; /* --- Typographie (DEC-016) --- */ --police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --taille-titre: 1.375rem; --taille-sous-titre: 1.0625rem; --taille-texte: 0.9375rem; --taille-petit: 0.8125rem; /* L'étiquette d'un champ clé dans une carte de mission. En dessous on ne lit plus ; au-dessus, l'étiquette concurrence la valeur qu'elle annonce. */ --taille-etiquette: 0.6875rem; --graisse-normale: 400; --graisse-moyenne: 500; --graisse-forte: 600; /* Les chiffres d'un tableau doivent s'aligner en colonne, et un 0 ne doit jamais ressembler à un O sur une plaque d'immatriculation. */ --chiffres: 'tnum' 1, 'zero' 1; /* --- Espacements --- */ --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-5: 24px; --espace-6: 32px; /* --- Densité (DEC-015) --- */ /* Le site admin est dense : l'objectif est de voir 20 à 30 missions sans faire défiler. L'appli mobile, elle, vise 48 px de cible tactile — mais elle a son propre fichier de thème (Expo). */ --hauteur-ligne-tableau: 40px; --hauteur-controle: 36px; --hauteur-cible-tactile: 48px; --largeur-barre-laterale: 236px; --hauteur-entete: 64px; /* LES COLONNES D'UNE CARTE DE MISSION. Un seul endroit à régler pour que TOUTES les cartes s'alignent verticalement, quelle que soit la longueur des textes. C'est cet alignement qui permet de balayer la liste de haut en bas au lieu de lire chaque ligne. */ --colonne-etat: 138px; --colonne-fin: 304px; --transition: 120ms ease-out; color-scheme: light; } /* ============================================================ Thème sombre ============================================================ Deux chemins vers le même jeu de couleurs : 1. le réglage du système, tant que personne n'a rien choisi ; 2. le choix explicite de la personne, qui l'emporte toujours. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --couleur-principale: #3b82f6; --couleur-principale-texte: #0f172a; --couleur-fond: #0f172a; --couleur-surface: #1e293b; --couleur-texte: #e2e8f0; --couleur-texte-secondaire: #94a3b8; --couleur-bordure: #334155; --couleur-succes: #22c55e; --couleur-attention: #fbbf24; --couleur-alerte: #ef4444; --ombre-carte: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 24%); --ombre-flottante: 0 4px 12px rgb(0 0 0 / 48%); --ombre-survol: 0 4px 14px rgb(0 0 0 / 55%), 0 1px 4px rgb(0 0 0 / 35%); --voile: rgb(0 0 0 / 60%); /* L'EN-TÊTE EN SOMBRE. Le bleu du thème sombre (#3b82f6) est fait pour du TEXTE sur fond noir : en aplat de 64 px il éblouit. On l'assombrit. Le reste du cadre se dérive tout seul de la surface et du texte. */ --entete-fond: #1e40af; --entete-bordure: #1e3a8a; --rail-survol: #334155; color-scheme: dark; } } :root[data-theme='sombre'] { --couleur-principale: #3b82f6; --couleur-principale-texte: #0f172a; --couleur-fond: #0f172a; --couleur-surface: #1e293b; --couleur-texte: #e2e8f0; --couleur-texte-secondaire: #94a3b8; --couleur-bordure: #334155; --couleur-succes: #22c55e; --couleur-attention: #fbbf24; --couleur-alerte: #ef4444; --ombre-carte: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 24%); --ombre-flottante: 0 4px 12px rgb(0 0 0 / 48%); --ombre-survol: 0 4px 14px rgb(0 0 0 / 55%), 0 1px 4px rgb(0 0 0 / 35%); --voile: rgb(0 0 0 / 60%); /* Voir le bloc précédent : le bleu du thème sombre éblouit en aplat. */ --entete-fond: #1e40af; --entete-bordure: #1e3a8a; --rail-survol: #334155; color-scheme: dark; } :root[data-theme='clair'] { color-scheme: light; } /* Une personne qui a demandé moins d'animation en a assez de nous voir bouger. */ @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }