/* Systeme d'interface - outil de prospection C-Webia. * * PORTEUR UNIQUE DES TOKENS (P2). Ce fichier ne contient AUCUN selecteur de composant : * il ne declare que des variables. Les composants vivent dans composants.css, les * particularites d'un ecran dans la feuille de cet ecran. * * Il remplace cinq palettes paralleles : celle de l'admin, et les quatre pages publiques * qui la recopiaient chacune. Changer le rouge demandait cinq modifications dans quatre * fichiers, le cinquieme endroit etant un fichier JavaScript. * * DEUX REGIMES, ET C'EST STRUCTUREL. cwebia v3 en a deux, et l'outil doit suivre le meme * decoupage : * * - le REGIME SITE PUBLIC (prefixe --site-*) habille les pages que voit le prospect * (audit, desinscription, confidentialite, connexion). Il ne derive pas : le prospect * passe de notre page d'audit au tunnel de cwebia.fr, et une rupture visuelle a cet * endroit lui ferait douter d'etre chez la meme entreprise. Ce n'est pas de * l'esthetique, c'est de la conversion ; * - le REGIME INTERNE (tokens sans prefixe) habille le tableau de bord, la carte, le * panneau de fiche, l'editeur de gabarits et les reglages. Il A LE DROIT de deriver, * et il derive : consigne de Ludovic du 2026-08-09, cette exploration servira aussi a * une future refonte de l'admin de cwebia v3. * * La source du regime interne est 02_conception/bloc-j-refonte-interface/direction-artistique.md, * sections 3.1 a 3.10. Elle donne les valeurs ET la raison de chacune : ce fichier * l'implemente, il ne la reinterprete pas. Les references "DA 3.x" ci-dessous pointent * ses sections. */ /* ========================================================================== SOCLE COMMUN - identique des deux cotes ========================================================================== Verifie identique dans les deux depots le 2026-08-09, sur le CSS reellement servi par cwebia.fr. La base n'etait donc pas a inventer, elle etait a reprendre. Le rouge ne se corrige pas en l'eclaircissant : mesure a 4,52:1 sur le fond de page (aucune marge AA) et a 4,17:1 sur un panneau clair. L'eclaircir casserait son autre role, le texte blanc pose dessus. D'ou la regle qui traverse tout ce fichier : le rouge est un ORNEMENT (bordure, pastille, barre active, focus, trait d'icone), jamais du texte sur une surface. */ :root { --noir: #050406; --ivoire: #f5f0ed; --rouge: #e02d4b; --rouge-profond: #942235; --muted: rgba(245, 240, 237, .64); } /* ========================================================================== REGIME INTERNE - le tableau de bord et ses ecrans ========================================================================== */ :root { /* --- DA 3.1 Surfaces : un escalier, pas des ombres ----------------------- La profondeur se lit par la LUMINOSITE. Les ombres sont reservees a ce qui est transitoire, c'est-a-dire au-dessus du plan de travail et destine a disparaitre. Ecart de luminance de 3 a 5 % entre deux crans voisins : assez pour se distinguer, trop peu pour faire tache. Les trois crans du milieu sont ceux de l'admin de cwebia v3, deja en place ici token pour token : ils ne bougent pas. Les deux ajouts (creux et flottant) sont la derive assumee, parce qu'un outil qui loge des preuves datees dans un espace contraint a besoin de deux crans de plus qu'une charte de registre. Ces surfaces ne s'uniformisent pas vers un noir unique : chaque cran garde un reste de teinte propre a sa profondeur, resultat d'une neutralisation mesuree chez v3. */ --fond: var(--noir); /* la page. Charte, et c'est une identite, pas un reglage. */ --surface-0: #0b0b0e; /* zones creuses : fond de tableau, piste de jauge, champ au repos */ --surface-1: #111114; /* LE PLAN DE TRAVAIL : cartes, en-tetes, barre laterale (v3 admin) */ --surface-2: #17171b; /* survol de ligne, champ actif (v3 admin) */ --surface-3: #1e1e23; /* ligne selectionnee, onglet actif (v3 admin) */ --surface-4: #26262d; /* element flottant : popover, menu, infobulle */ /* --- DA 3.2 Bordures et separations -------------------------------------- Toujours 1px. Une separation qui a besoin d'etre plus epaisse est une separation qui devrait etre un ecart. */ --ligne: rgba(245, 240, 237, .09); /* separation ordinaire (v3 admin) */ --ligne-forte: rgba(245, 240, 237, .16); /* bordure de carte, sous un en-tete (v3 admin) */ --ligne-active: rgba(224, 45, 75, .45); /* bordure allumee d'un element choisi */ /* --- DA 3.3 Texte -------------------------------------------------------- JAMAIS d'ivoire pur en corps de texte. Sur fond tres sombre, un texte a pleine intensite produit une halation qui fatigue sur une session longue ; .92 conserve un contraste tres au-dessus du seuil tout en supprimant l'eblouissement. Le blanc pur reste la seule exception, sur les aplats rouges. Contraste CALCULE le 2026-08-09 (formule WCAG 2.x, alpha compose sur le fond) : token sur --fond sur --surface-1 --texte 15,20:1 14,14:1 --texte-2 7,43:1 7,24:1 --texte-3 5,65:1 5,54:1 ARBITRAGE TRANCHE le 2026-08-09, apres la mesure ci-dessus. La direction artistique fixait --texte-3 a .45, ce qui rendait 4,06:1, donc SOUS le seuil de 4,5:1 du texte normal. Les usages assignes a ce token (unites, dates, mentions, le mot "non mesure") sont tous du texte PETIT, jamais du texte large : l'exemption des 3:1 ne s'applique pas. Il passe donc a .55, et la direction est corrigee en consequence. Ce que ce choix coute, et il faut le savoir : l'ecart avec --texte-2 (.64) se resserre, donc la hierarchie entre secondaire et tertiaire se lit moins franchement. Un niveau un peu moins distinct vaut mieux qu'un niveau illisible, et la distinction se rattrape par la taille et la casse plutot que par la seule opacite. */ --texte: rgba(245, 240, 237, .92); /* corps et titres */ --texte-2: var(--muted); /* secondaire, libelles */ --texte-3: rgba(245, 240, 237, .55); /* tertiaire : unites, dates, mentions */ --texte-sur-rouge: #fff; /* seule exception au "jamais de blanc pur" */ /* La graisse baisse d'un cran par rapport a l'usage courant en mode clair : ce qui serait un 500 en clair devient un 400, un 700 devient un 600. C'est le reglage qu'on saute toujours, et c'est celui qui fatigue le moins. */ --poids: 400; /* corps */ --poids-appui: 500; /* valeur mise en avant, libelle de menu */ --poids-titre: 600; /* titres, boutons, en-tetes */ /* --- DA 3.4 Etats fonctionnels ------------------------------------------- CHACUN EST TOUJOURS ACCOMPAGNE DE SON MOT. Le sens ne repose jamais sur la seule couleur : chaque pastille porte son libelle. Un etat sans mesure n'a PAS de couleur : il s'ecrit "non mesure", en --texte-3, et hors de la chasse tabulaire pour ne pas se lire comme un compteur. */ --etat-vert: #3ddc84; /* fait, sain, disponible */ --etat-ambre: #e8b23d; /* en cours, a surveiller */ --etat-rouge: var(--rouge); /* a traiter, bloque */ --etat-bleu: #5b9bd5; /* information, neutre actif */ --etat-neutre: rgba(245, 240, 237, .38); /* inactif, sans objet */ /* --- DA 3.5 Typographie -------------------------------------------------- Manrope pour les titres, Inter pour le corps, toutes deux auto-hebergees dans 02_assets/polices.css. Pas de troisieme famille : v3 en charge une qu'il n'utilise jamais, ce serait la reprendre pour rien. PLANCHER ABSOLU : 11px. Le fichier de l'admin se donnait un plancher de 10px et le franchissait treize fois (mesure du 2026-08-09). Une echelle qui n'a AUCUN cran en dessous rend la faute impossible plutot que deconseillee : il n'existe pas de token a prendre sous --t-xs. */ /* Manrope n'est declaree QUE de 700 a 800 dans 02_assets/polices.css, porteur unique des @font-face. Un titre demande a 600 ne s'affinerait donc pas : le navigateur ramene la demande a 700, et la baisse d'un cran serait ecrite sans etre appliquee. Elle vaut donc pour Inter, ou l'axe va de 400 a 800. Elargir la plage de Manrope demande de toucher polices.css, qui n'est pas dans le perimetre de ce chantier. */ --police-titre: 'Manrope', system-ui, sans-serif; --police-corps: 'Inter', system-ui, sans-serif; --t-xs: 11px; /* libelles en capitales, unites, mentions */ --t-sm: 12.5px; /* secondaire, aide, legendes */ --t-base: 14px; /* corps, cellules de tableau, champs */ --t-md: 16px; /* sous-titres, valeur mise en avant */ --t-lg: 19px; /* titre de panneau, titre d'ecran */ --t-xl: 24px; /* titre de page */ --t-2xl: 30px; /* chiffre unique mis en scene, rare */ --lh: 1.5; /* corps */ --lh-titre: 1.25; /* titre */ --lh-cellule: 1.2; /* cellule de tableau */ /* --- DA 3.6 Espacement --------------------------------------------------- Base 4px, six crans, et rien entre. Toute autre valeur est une exception qui se justifie en commentaire. L'existant en comptait quarante-quatre, plus trois marges negatives. */ --esp-xs: 4px; --esp-sm: 8px; --esp-md: 12px; --esp: 16px; --esp-lg: 24px; --esp-xl: 32px; /* --- DA 3.7 Rayons ------------------------------------------------------- Plus serres que le site (16 a 18px), et c'est voulu : un rayon genereux mange de la place et adoucit ce qui doit rester net. C'est la premiere derive assumee par rapport au regime public. */ --r-sm: 6px; /* pastille, champ, petit bouton */ --r: 10px; /* carte, panneau, bloc (v3 admin) */ --r-lg: 14px; /* conteneur majeur, element flottant */ --r-pill: 999px; /* badge, chip */ /* --- DA 3.8 Ombres, et leur rarete --------------------------------------- DEUX, ET PAS UNE DE PLUS. Tout le reste de la profondeur passe par l'escalier de surfaces. Les halos rouges du site n'entrent pas ici : un halo par ligne sur quarante lignes fait un brouillard. Un seul element flottant a la fois : deux ombres a l'ecran, et la hierarchie disparait. */ --ombre-flottant: 0 12px 32px rgba(0, 0, 0, .55); /* popover, menu, infobulle */ --ombre-panneau: -16px 0 40px rgba(0, 0, 0, .5); /* panneau lateral */ /* Le voile d'un panneau modal n'est pas une ombre : il ne cree pas de profondeur, il retire le fond de l'usage. Il compte donc a part, et il est declare ici pour ne pas etre recopie en dur dans la feuille du seul ecran qui s'en sert aujourd'hui. */ --voile: rgba(0, 0, 0, .55); /* --- DA 3.9 Focus -------------------------------------------------------- Une seule regle, partout, sans exception. Le focus ne se supprime jamais : il se dessine. Exception unique heritee du site : le champ de saisie remplace l'anneau par une bordure rouge plus un halo. */ --focus-anneau: 2px; --focus-ecart: 2px; --halo-champ: 0 0 0 3px rgba(224, 45, 75, .22); /* --- DA 3.10 Mouvement --------------------------------------------------- Courbe unique, la meme que le site et que l'outil aujourd'hui. AUCUNE animation decorative : le mouvement sert a dire d'ou vient un element qui apparait, a confirmer qu'une action a ete prise en compte, et a relier deux etats du meme objet. Rien ne bouge tout seul, rien ne pulse, rien ne boucle. */ --d-instant: 120ms; /* survol, changement d'etat */ --d-court: 180ms; /* apparition d'un element flottant */ --d-moyen: 240ms; /* ouverture du panneau lateral */ --courbe: cubic-bezier(.2, .8, .2, 1); /* --- Plans (z-index), six niveaux nommes --------------------------------- Ecrits ici pour qu'on cesse d'en inventer un a chaque ecran. L'ordre de lecture est celui de la profondeur, pas celui des valeurs : --z-sur-carte vaut 500 parce que Leaflet empile ses propres plans (panes a 400, controles a 800), et qu'un panneau pose sur la carte doit passer au-dessus des uns sans masquer les autres. --z-flottant est le plan de l'infobulle et du menu : au-dessus du panneau lateral, parce qu'un « i » pose DANS un panneau doit pouvoir s'ouvrir par-dessus lui. */ --z-fond: 1; /* la carte elle-meme */ --z-entete: 5; /* barre d'ecran collante */ --z-voile: 30; /* voile du panneau modal */ --z-panneau: 31; /* panneau lateral */ --z-flottant: 40; /* popover, menu, infobulle */ --z-sur-carte: 500; /* panneau pose SUR la carte, entre les plans de Leaflet */ /* --- Gabarit de la coquille ---------------------------------------------- 232px a l'origine, ramenee a 208px le 2026-08-09 (J7). Mesure de depart : la barre occupait 16,1 % de 1440px pour porter six mots et un bouton de deconnexion, avec un vide entre les deux. La largeur ne se choisit pas au jugé : 208 = 16 (marge) + 18 (icone) + 12 (ecart) + le plus long libelle de la navigation ("Désinscrits" suivi de sa mention "à venir") + 16, c'est-a-dire la plus petite largeur ou aucune entree ne passe sur deux lignes. Elle rend 24px a la colonne de travail, et c'est la colonne de travail qui porte la donnee. */ --largeur-barre-laterale: 208px; /* --- Le schema natif du navigateur --------------------------------------- SEULE declaration non-variable de ce fichier, et elle est assumee : sans elle, les ascenseurs, la liste deroulante d'un et la case a cocher resteraient dessines dans le schema du systeme. C'est la SEULE declaration non-variable de ce fichier, et elle n'a pas d'autre porteur possible : elle appartient a la definition du theme, pas a un composant. */ color-scheme: light; } /* ========================================================================== REGIME SITE PUBLIC - les pages que voit le prospect ========================================================================== Prefixe --site-* : les deux regimes cohabitent dans le meme fichier sans jamais se melanger, et une page qui prend un token de l'autre regime se voit a la lecture. Ce bloc est POSE ICI, il n'est applique par personne dans ce chantier : c'est le chantier J5 qui remplacera les quatre palettes recopiees des pages publiques par ces tokens. Les valeurs viennent de deux sources, jamais d'une impression : (1) le cadrage du bloc J, qui les a relevees sur le CSS reellement servi par cwebia.fr le 2026-08-09 (rayons, degrade de marque, ombre a lisere) ; (2) la mesure de nos propres pages publiques, qui portent deja ces effets (les trois halos rouges, releves dans 01_app/audit/render.js). */ :root { /* Rayons genereux : c'est la signature du site, et l'inverse exact du regime interne. */ --site-r-sm: 13px; --site-r: 16px; --site-r-lg: 18px; --site-r-pill: 999px; /* Degrade de marque, pour les aplats d'action. Le texte pose dessus est blanc pur. */ --site-degrade-marque: linear-gradient(120deg, var(--rouge), var(--rouge-profond)); /* Ombre a lisere lumineux : l'ombre porte la profondeur, le lisere interne rattrape le bord qui, sans lui, se perd dans le fond. */ --site-ombre: 0 18px 40px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05); /* Les trois halos rouges. Le premier habille une tete de section, les deux autres l'appel a l'action au repos et au survol. Valeurs relevees sur nos propres pages publiques, qui les portent deja. */ --site-halo-section: radial-gradient(1200px 520px at 50% -8%, rgba(224, 45, 75, .16), transparent); --site-halo-action: 0 10px 30px rgba(224, 45, 75, .34); --site-halo-action-survol: 0 16px 44px rgba(224, 45, 75, .5); /* Courbe et duree communes aux deux regimes, seules valeurs de mouvement dont la mesure du 2026-08-09 atteste qu'elles sont identiques des deux cotes. */ --site-courbe: var(--courbe); --site-d: 150ms; } /* CE QUI MANQUE ENCORE AU REGIME PUBLIC, ET POURQUOI IL N'EST PAS INVENTE * * Trois familles de valeurs sont nommees par le cadrage sans y etre chiffrees, et elles * ne vivent que dans le depot de cwebia v3 (app/globals.css), hors du perimetre de ce * chantier : * * - le degrade d'accent du shimmer : sa FORME est connue (symetrique, cinq arrets, pour * que le raccord de boucle soit invisible), ses arrets exacts non ; * - trois des quatre courbes d'acceleration : seule cubic-bezier(.2,.8,.2,1) est * mesuree identique des deux cotes ; * - six des sept durees nommees : seule 150ms est mesuree ici. * * Elles ne sont pas ecrites au jugé : une valeur inventee aurait l'air d'une mesure et se * propagerait aux quatre pages publiques sans que personne ne la reverifie. Le chantier * qui appliquera ce regime (J5) devra d'abord les relever sur globals.css de v3, ou * obtenir l'arbitrage qui s'en passe. */ /* ========================================================================== PLANCHER DE MOUVEMENT ========================================================================== prefers-reduced-motion coupe tout, y compris ce que les composants animeront. Pose ici parce que c'est le systeme qui declare les durees : les remettre a zero une par une dans chaque feuille serait la meilleure facon d'en oublier une. DEUX CHEMINS, ET UN SEUL SENS. Le reglage du POSTE (la requete media) et le reglage de l'OUTIL (l'attribut, pose par admin/ecrans/theme.js depuis l'onglet Apparence) coupent exactement les memes durees. Ils ne peuvent donc qu'AJOUTER une reduction, jamais en retirer une : le poste reste souverain par construction, et pas par la discipline du code qui l'applique. C'est aussi pour cela qu'il n'existe AUCUNE regle sur l'etat normal - une regle qui reposerait une duree la reposerait aussi a qui l'a coupee dans son systeme d'exploitation. theme.test.js compare les deux listes et refuse la troisieme regle. */ @media (prefers-reduced-motion: reduce) { :root { --d-instant: .01ms; --d-court: .01ms; --d-moyen: .01ms; --site-d: .01ms; } } :root[data-mouvement="reduit"] { --d-instant: .01ms; --d-court: .01ms; --d-moyen: .01ms; --site-d: .01ms; }