/* ========================================================================== Jetons de charte du Portail Gouvernemental des Services. Source unique de style des trois surfaces : portail public, back-office, application mobile. `mobile/lib/theme/jetons.dart` est **généré** depuis ce fichier par un script, jamais recopié à la main (section 4.4 de CLAUDE.md). -------------------------------------------------------------------------- DEUX CHARTES, DEUX PORTÉES. C'est la forme voulue par `D-55`. -------------------------------------------------------------------------- Le commanditaire a changé de charte le 25 septembre 2026, et pour deux surfaces sur trois seulement : « je change de design. tu dois maintenant utiliser ce template pour le portail public et app mobile. tu dois respecter le design à 100% [...] tout en gardant le contenu déjà existant du backoffice ». Deux chartes doivent donc coexister dans ce fichier sans se mélanger, et elles y coexistent ainsi : | Portée | Charte | Surfaces | |----------------------|------------------------|--------------------------| | `:root` | Gabon Digital 2026 | portail public, mobile | | `.pgs-page--bureau` | charte d'origine | back-office, studio, pilotage | **La nouvelle charte occupe la racine, et ce n'est pas arbitraire.** Un gabarit d'agent qui oublierait sa portée hériterait de la charte publique, ce qui se verrait au premier coup d'œil et se corrigerait le jour même ; l'inverse, une couleur de bureau qui fuirait sur le portail, ne se verrait pas. La portée protège le cas dangereux, jamais l'autre. La portée est posée une seule fois, sur le `` de `gabarits/composants/enveloppe-bureau.html`, dont `gabarits/bof/base.html`, `gabarits/adm/base.html` et `gabarits/pil/base.html` descendent tous les trois. Aucun écran d'agent ne peut donc l'oublier, et aucun écran d'usager ne peut la porter par accident : `gabarits/por/base.html`, dont descendent aussi `gabarits/dem/` et `gabarits/usi/`, ne la connaît pas. Le générateur `mobile/outils/generer_jetons.dart` ne lit que le bloc `:root` : le mobile reçoit donc la nouvelle charte, et rien d'autre, ce qui est exactement ce que `D-55` demande. La portée de bureau lui est invisible parce qu'aucune surface Flutter n'est une surface d'agent. -------------------------------------------------------------------------- D'OÙ VIENNENT LES VALEURS -------------------------------------------------------------------------- Charte publique : `templates/design_handoff_gabon_digital_2026/README.md` et `templates/design_handoff_gabon_digital_2026/Portail public 2026.dc.html`, en lecture seule. Le README porte une table de jetons explicite ; les valeurs ci-dessous en sont le relevé, et non une interprétation. Charte de bureau : `templates/Back-office - autonome.html`, inchangée. Les valeurs de la section B sont celles qui étaient à la racine avant le 25 septembre 2026, reportées telles quelles. **Ne les modifiez pas** : la moitié de la demande du commanditaire est que le back-office ne bouge pas. -------------------------------------------------------------------------- CE QUI EST SIGNALÉ ET NON CORRIGÉ, SELON `D-54` -------------------------------------------------------------------------- `D-54` interdit de corriger un conflit à la place du commanditaire : la valeur de la maquette est posée, l'écart est mesuré, et il est porté au rapport d'étape pour arbitrage. Trois couples de la nouvelle charte sont dans ce cas, et **aucun ne porte de texte** : 1. `--pgs-couleur-focus` vaut `#FCD116`, le jaune du drapeau. Contre le fond de page `#F5F6F2` il mesure **1,36:1**, et contre une surface de carte `#FFFFFF` **1,47:1**, là où WCAG 2.4.11 et 1.4.11 demandent 3:1 pour un indicateur de focus. Sur les fonds profonds `#052C1E` il mesure 10,30:1 et ne pose aucune question. L'anneau est parfaitement visible à l'œil nu ; c'est la mesure qui échoue, pas la perception. Posé tel quel. 2. `--pgs-couleur-filet-appuye` vaut `#DDE3DE`, la bordure de champ du handoff : **1,30:1** sur `#FFFFFF` et **1,20:1** sur `#F5F6F2`, contre un seuil de 3:1 pour un composant d'interface. Un champ vide est donc peu détourable pour un œil qui distingue mal les contrastes. Posé tel quel. 3. `--pgs-couleur-filet-carte` vaut `rgba(10, 31, 23, .07)`, soit environ **1,07:1** sur blanc. C'est un filet décoratif de carte, et la carte se distingue par son fond et par son ombre, pas par lui. Posé tel quel. Tous les couples porteurs de texte de la nouvelle charte passent le seuil AA de 4,5:1, et la plupart largement. Les mesures sont en regard de chaque déclaration. Les trois écarts que l'ancienne charte portait sont sans objet depuis le changement de teintes, comme `D-55` l'annonçait. -------------------------------------------------------------------------- IL N'Y A PAS DE DÉCLINAISON SOMBRE, ET IL NE DOIT PAS Y EN AVOIR -------------------------------------------------------------------------- Le commanditaire l'a tranché le 24 septembre 2026 : « je n'ai pas demandé le mode sombre sur la plateforme ». Le handoff de 2026 n'en porte pas davantage que les maquettes qu'il remplace. Une seconde charte n'est pas un agrément : c'est un second jeu de couples encre/fond à tenir, à mesurer, à régénérer vers `jetons.dart` et à transmettre à l'ANINF. Rien de cela n'a été commandé. `tests/por/test_theme_unique.py` fait échouer la suite si une règle de thème sombre réapparaît dans `static/css/`. Convention de nommage : --pgs--. Les identifiants sont en français sans accents ni cédilles, comme le code (section 13). Un jeton nomme un rôle, jamais une teinte : `--pgs-couleur-accent` reste vrai après un changement de charte, `--pgs-couleur-vert` aurait cessé de l'être le 25 septembre 2026. ========================================================================== */ /* ========================================================================== A. CHARTE PUBLIQUE, Gabon Digital 2026. Portail public et application mobile. Racine, donc défaut. ========================================================================== */ :root { /* Clair, et clair seulement, parce que la maquette l'est. Sans cette déclaration, un navigateur réglé en sombre rend les contrôles natifs, les barres de défilement et les champs de saisie en sombre au milieu d'une page claire : ce n'est pas un thème, c'est une page illisible. */ color-scheme: light; /* ---------------------------------------------------------------------- A.1 Couleurs ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- LE JAUNE, ET LA SEULE PLACE QU'IL TIENT. 27 septembre 2026. Le commanditaire a dit deux choses distinctes, captures à l'appui : « le background jaune doit être moins foncé » et « la couleur jaune n'est pas très bien adaptée ». Ce sont deux constats, pas un seul. `#FCD116` est le jaune du drapeau. Il est juste comme **accent** : un filet de quatre pixels, un anneau de focus, un tiers de la bande tricolore. Il est faux en **aplat** : un bandeau d'interruption pleine largeur en `#FCD116` est agressif, et il devient la chose la plus visible d'une page dont ce n'est pas le sujet. La règle est donc : le jaune vif ne porte plus aucune surface. Il reste `--pgs-couleur-drapeau-jaune` et `--pgs-couleur-focus`, et rien d'autre. Les surfaces prennent la teinte pâle que la charte portait déjà. | Surface | Avant | Après | Emploi | |-------------------------------------|-----------|-----------|---------------| | `--pgs-couleur-surface-avertissement` | `#FCD116` | `#FFF7D1` | encarts | | `--pgs-couleur-surface-jaune-pale` | néant | `#FFFBEA` | bandeaux pleine largeur | | `--pgs-couleur-surface-survol` | `#FFF7D1` | `#E8F3EC` | survol | **Deux teintes et non une**, parce que la surface décide de l'intensité perçue : `#FFF7D1` sur un encart de dix lignes est une note, la même teinte sur un bandeau qui traverse l'écran redevient un aplat. La seconde est réservée à ce cas, et son nom le dit. **Le survol quitte le jaune**, ce qui répond au second constat : un survol de carte est une grande surface, et c'est précisément ce que le commanditaire montrait. Il prend le vert pâle institutionnel, déjà au dossier sous `--pgs-couleur-surface-calme`. Contrastes mesurés après changement, encre `#5C4600` : 8,36:1 sur `#FFF7D1`, 8,68:1 sur `#FFFBEA`. Sur le survol `#E8F3EC` : 15,12:1 pour l'encre courante, 4,95:1 pour l'encre atténuée, 4,73:1 pour l'encre d'accent. Tous au-dessus du seuil AA de 4,5:1. ---------------------------------------------------------------------- */ /* Surfaces claires */ --pgs-couleur-fond: #F5F6F2; --pgs-couleur-surface: #FFFFFF; --pgs-couleur-surface-attenuee: #F5F6F2; --pgs-couleur-surface-calme: #E8F3EC; --pgs-couleur-surface-survol: #E8F3EC; --pgs-couleur-surface-accent: #E8F3EC; --pgs-couleur-surface-information: #E7EEF8; --pgs-couleur-surface-avertissement: #FFF7D1; --pgs-couleur-surface-erreur: #FDECEA; --pgs-couleur-surface-neutre: #F5F6F2; --pgs-couleur-surface-jaune: #FFF7D1; --pgs-couleur-surface-jaune-pale: #FFFBEA; /* Surfaces profondes. Le handoff en emploie deux, et elles ne sont pas interchangeables : `#052C1E` porte les bandeaux, l'en-tête utilitaire et le pied ; `#0A1F17`, qui est aussi l'encre, porte la carte de promotion de l'application mobile et les avis fugaces. */ --pgs-couleur-surface-profonde: #052C1E; --pgs-couleur-surface-encre: #0A1F17; /* La bande de marque qui ferme chaque page partage le fond du pied. */ --pgs-couleur-surface-marque: #052C1E; /* Filets */ --pgs-couleur-filet: #EEF0EC; --pgs-couleur-filet-attenue: #EEF0EC; --pgs-couleur-filet-appuye: #DDE3DE; /* sur surface : 1,30:1, SOUS 3:1 */ --pgs-couleur-filet-accent: #A6D1B8; --pgs-couleur-filet-erreur: #B42318; --pgs-couleur-filet-information: #1D5AA8; --pgs-couleur-filet-carte: rgba(10, 31, 23, .07); /* ~1,07:1, décoratif */ --pgs-couleur-separateur: #EEF0EC; /* Filet clair posé sur un fond profond, cartes de verre du bandeau. */ --pgs-couleur-filet-clair: rgba(255, 255, 255, .14); /* Encres. Chaque encre est mesurée sur son fond nominal, seuil AA 4,5:1. */ --pgs-couleur-texte: #0A1F17; /* sur fond : 15,84:1 */ --pgs-couleur-texte-appuye: #33443C; /* sur surface : 10,33:1 */ --pgs-couleur-texte-attenue: #5B6B63; /* sur fond : 5,19:1 */ --pgs-couleur-texte-faible: #5B6B63; /* sur surface : 5,63:1 */ --pgs-couleur-texte-accent: #0B7A4B; /* sur surface : 5,39:1 */ --pgs-couleur-texte-accent-appuye: #08663F; /* sur surface : 7,04:1 */ --pgs-couleur-texte-sur-accent: #FFFFFF; /* sur accent : 5,39:1 */ --pgs-couleur-texte-erreur: #B42318; /* sur surface-erreur : 5,75:1 */ --pgs-couleur-texte-erreur-appuye: #7A1A12; /* sur surface-erreur : 9,26:1 */ --pgs-couleur-texte-information: #1D5AA8; /* sur surface-information : 5,84:1 */ --pgs-couleur-texte-avertissement: #5C4600; /* sur surface-avertissement : 8,36:1 */ --pgs-couleur-texte-sur-jaune: #5C4600; /* sur surface-jaune : 8,36:1 */ --pgs-couleur-texte-sur-marque: #CFE6D8; /* sur surface-marque : 11,52:1 */ --pgs-couleur-texte-sur-marque-attenue: #A6D1B8; /* sur surface-marque : 8,97:1 */ --pgs-couleur-texte-sur-profond: #FFFFFF; /* sur surface-profonde : 15,16:1 */ --pgs-couleur-texte-sur-profond-clair: #CFE6D8; /* sur surface-profonde : 11,52:1 */ --pgs-couleur-texte-sur-profond-attenue: #A6D1B8; /* sur surface-profonde : 8,97:1 */ /* Accents. Le vert institutionnel porte l'action ; le bleu du drapeau porte le lien et l'information ; le jaune ne porte plus qu'un accent, jamais un aplat. Voir la note sur le jaune en tête de la section A.1. */ --pgs-couleur-accent: #0B7A4B; --pgs-couleur-accent-appuye: #08663F; --pgs-couleur-accent-doux: #E8F3EC; --pgs-couleur-accent-bleu: #1D5AA8; /* sur surface : 6,82:1 */ --pgs-couleur-accent-bleu-appuye: #143F77; /* sur surface : 10,46:1 */ --pgs-couleur-accent-profond: #052C1E; /* Drapeau de la République gabonaise. Décoratif, jamais porteur de sens. */ --pgs-couleur-drapeau-vert: #009E60; --pgs-couleur-drapeau-jaune: #FCD116; --pgs-couleur-drapeau-bleu: #3A75C4; /* Voiles. Celui des fenêtres modales est le vert profond du handoff, et il est flouté ; celui des cartes de verre est un blanc très transparent posé sur un fond profond. */ --pgs-couleur-voile: rgba(5, 44, 30, .55); --pgs-couleur-voile-clair: rgba(255, 255, 255, .07); --pgs-couleur-verre: rgba(245, 246, 242, .82); /* Halos radiaux des bandeaux profonds : bleu en haut à droite, vert en bas à gauche. Deux couleurs, la géométrie est dans `portail.css`. */ --pgs-couleur-halo-bleu: rgba(29, 90, 168, .35); --pgs-couleur-halo-vert: rgba(11, 122, 75, .55); --pgs-couleur-halo-jaune: rgba(252, 209, 22, .18); /* La géométrie des deux halos, relevée telle quelle : un ovale bleu en haut à droite, un ovale vert en bas à gauche. Elle est ici et non dans `portail.css` pour la même raison que les couleurs : c'est une valeur de charte, et une valeur de charte ne s'écrit pas dans une composition. */ --pgs-halo-bleu-geometrie: 900px 480px at 85% 10%; --pgs-halo-vert-geometrie: 700px 420px at 10% 100%; /* ---------------------------------------------------------------------- A.2 Typographie Famille unique, Archivo, variable, axes `wdth 62-125` et `wght 300-900`. Le handoff la charge depuis Google Fonts ; la plateforme ne charge aucune ressource de tiers, et le fichier de police n'est pas encore au dépôt : une demande hors périmètre est portée au rapport d'étape pour que `pgs-socle` l'inscrive à `docs/dependances.md` avec sa licence SIL OFL 1.1 et que le binaire soit déposé sous `static/polices/`. Tant qu'il manque, la pile de repli rend la page dans une grotesque de système : la mise en page, elle, est exacte. Échelle en rem, pour qu'un réglage de taille du navigateur soit suivi. Le relevé en pixels du handoff est donné en regard. ---------------------------------------------------------------------- */ --pgs-base-typographique: 16px; --pgs-police-texte: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --pgs-police-titre: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --pgs-police-chiffre: 'Archivo', system-ui, sans-serif; --pgs-taille-xs: 0.8125rem; /* 13 px, sur-titres en capitales */ --pgs-taille-s: 0.84375rem; /* 13,5 px, mentions et légendes */ --pgs-taille-m: 0.90625rem; /* 14,5 px, texte courant */ --pgs-taille-l: 1rem; /* 16 px, saisie et texte long */ --pgs-taille-xl: 1.1875rem; /* 19 px, intertitres */ /* Les trois titres d'affichage sont fluides, comme dans le handoff : la borne basse tient le petit écran, la borne haute le grand. */ --pgs-titre-accroche: clamp(2.5rem, 5.6vw, 4.625rem); /* 40 -> 74 px */ --pgs-titre-1: clamp(2rem, 4vw, 3.375rem); /* 32 -> 54 px */ --pgs-titre-2: clamp(1.75rem, 3.2vw, 2.625rem); /* 28 -> 42 px */ --pgs-titre-3: 1.375rem; /* 22 px */ --pgs-titre-4: 1.1875rem; /* 19 px */ --pgs-titre-5: 1.0625rem; /* 17 px */ --pgs-graisse-normale: 400; --pgs-graisse-moyenne: 600; --pgs-graisse-forte: 700; --pgs-graisse-affichage: 800; /* Axe de largeur d'Archivo. Les titres d'affichage sont légèrement étirés. */ --pgs-etirement-normal: 100%; --pgs-etirement-titre: 108%; --pgs-etirement-titre-large: 112%; --pgs-interligne-titre: 1.1; --pgs-interligne-affichage: 1.02; --pgs-interligne-compact: 1.3; --pgs-interligne-texte: 1.6; --pgs-interligne-long: 1.7; --pgs-approche-affichage: -.025em; --pgs-approche-titre: -.02em; --pgs-approche-capitale: .08em; /* Les intitulés de section du formulaire de compte, écran 10 : `.1em`, entre les deux valeurs déjà relevées. `D-61`. */ --pgs-approche-capitale-moyenne: .1em; --pgs-approche-capitale-large: .12em; /* ---------------------------------------------------------------------- A.3 Espacements ---------------------------------------------------------------------- */ --pgs-espace-3xs: 2px; --pgs-espace-2xs: 4px; --pgs-espace-xs: 6px; --pgs-espace-s: 8px; --pgs-espace-m: 12px; --pgs-espace-l: 16px; --pgs-espace-xl: 22px; --pgs-espace-2xl: 28px; --pgs-espace-3xl: 40px; --pgs-espace-4xl: 56px; --pgs-espace-5xl: 72px; /* Marge latérale du conteneur, relevée telle quelle : 28px. */ --pgs-marge-laterale: 28px; /* Rembourrage des contrôles, relevé tel quel : 13px 16px pour un champ, 15px 22px pour un bouton d'action. */ --pgs-controle-y: 13px; --pgs-controle-x: 16px; --pgs-controle-large-y: 15px; --pgs-controle-large-x: 22px; --pgs-cible-minimale: 44px; /* surface tactile minimale, WCAG 2.5.8 */ /* Les deux pastilles rondes numérotées du handoff : 34 px sur le circuit de la fiche et sur l'indicateur de dépôt, 30 px sur la frise du suivi. Elles ne sont pas alignées sur une seule valeur parce qu'elles ne portent pas la même chose : la première porte un chiffre, la seconde est muette. */ --pgs-taille-pastille: 34px; --pgs-taille-pastille-menue: 30px; /* Les deux images de marque. Le handoff pose le logo à 40 px de haut dans l'en-tête et à 44 px dans le pied, et le drapeau à 20 x 14 dans la barre utilitaire. */ --pgs-largeur-drapeau: 20px; --pgs-hauteur-drapeau: 14px; --pgs-hauteur-marque: 40px; --pgs-hauteur-marque-bande: 44px; /* ---------------------------------------------------------------------- A.4 Rayons, ombres, filets Le handoff nommait quatre familles de rayon : pastilles et boutons de menu à `999px`, cartes de 22 à 28px, champs et boutons de 12 à 18px, icônes teintées de 12 à 16px. **Le commanditaire les a réduites le 27 septembre 2026**, captures à l'appui : « les bordures des blocs sont trop rondes, il faut réduire la rondeur des bordures ». La famille entière est ramenée d'un cran, dans le même rapport, pour que la hiérarchie relevée dans le handoff survive : une carte reste plus ronde qu'un champ, un champ plus qu'une pastille. | Jeton | Handoff | Retenu | |---------------------------|---------|--------| | `--pgs-rayon-s` | 12px | 8px | | `--pgs-rayon-m` | 14px | 10px | | `--pgs-rayon-l` | 18px | 12px | | `--pgs-rayon-icone` | 16px | 10px | | `--pgs-rayon-carte` | 22px | 14px | | `--pgs-rayon-bloc` | 24px | 16px | | `--pgs-rayon-carte-large` | 28px | 18px | | `--pgs-rayon-pastille` | 999px | 8px | `--pgs-rayon-pastille` est le seul qui change de nature et non de degré : il ne fait plus de gélule. Le nom reste, parce qu'il nomme un rôle, celui du bouton de menu et du badge, et non une forme. `--pgs-rayon-plein`, lui, ne bouge pas : un bouton de fermeture rond et une pastille numérotée sont des disques, pas des blocs, et le commanditaire ne les a pas visés. C'est un écart à la maquette, assumé sur instruction écrite, et signalé au rapport d'étape comme `D-54` l'exige. ---------------------------------------------------------------------- */ --pgs-rayon-s: 8px; --pgs-rayon-m: 10px; --pgs-rayon-l: 12px; --pgs-rayon-icone: 10px; --pgs-rayon-carte: 14px; --pgs-rayon-bloc: 16px; --pgs-rayon-carte-large: 18px; --pgs-rayon-pastille: 8px; --pgs-rayon-plein: 50%; --pgs-epaisseur-filet: 1px; --pgs-epaisseur-filet-appuye: 1.5px; /* Le trait qui relie deux crans d'une frise. Le handoff en pose deux : 2px sur le circuit de la fiche, 3px sur la frise du suivi, où le trait porte à lui seul la distinction entre l'étape franchie et celle qui vient. */ --pgs-epaisseur-trait: 2px; --pgs-epaisseur-trait-appuye: 3px; --pgs-ombre-carte: 0 1px 2px rgba(10, 31, 23, .04); --pgs-ombre-accent: 0 10px 22px rgba(11, 122, 75, .28); --pgs-ombre-survol: 0 18px 40px rgba(10, 31, 23, .10); --pgs-ombre-survol-appuyee: 0 22px 44px rgba(10, 31, 23, .16); --pgs-ombre-flottante: 0 18px 40px rgba(10, 31, 23, .12); --pgs-ombre-accroche: 0 20px 50px rgba(0, 0, 0, .28); --pgs-ombre-suggestions: 0 24px 60px rgba(0, 0, 0, .25); --pgs-ombre-modale: 0 30px 80px rgba(0, 0, 0, .35); --pgs-levee-survol: -4px; --pgs-anneau-focus: 0 0 0 4px rgba(11, 122, 75, .12); --pgs-couleur-focus: #FCD116; /* sur fond : 1,36:1, SOUS 3:1 */ --pgs-epaisseur-focus: 3px; --pgs-decalage-focus: 2px; /* Verre dépoli de l'en-tête collant et de la barre d'onglets mobile. */ --pgs-flou-verre: 14px; --pgs-saturation-verre: 1.6; --pgs-flou-voile: 6px; /* ---------------------------------------------------------------------- A.5 Points de rupture et largeurs Le handoff ne porte aucune requête de media : son adaptation repose entièrement sur `grid auto-fit minmax` et `flex-wrap`. `EXG-POR-07` et `EXG-ERG-02` exigent le parcours complet sur petit écran sans perte de fonction : quatre points de rupture sont donc ajoutés ici et employés par `composants.css` et `portail.css`. C'est le seul ajout de cette section. ---------------------------------------------------------------------- */ --pgs-rupture-poche: 480px; --pgs-rupture-tablette: 768px; --pgs-rupture-portable: 1024px; --pgs-rupture-bureau: 1280px; --pgs-largeur-utile: 1280px; --pgs-largeur-lecture: 980px; --pgs-largeur-depot: 880px; --pgs-largeur-panneau: 340px; --pgs-largeur-colonne-minimale: 280px; --pgs-largeur-colonne-large: 340px; --pgs-largeur-colonne-etroite: 220px; /* Les deux colonnes du formulaire de création de compte de l'écran 10, relevées telles quelles : `minmax(200px, 1fr)`. Aucune colonne du portail ne descendait aussi bas, et la plus proche, 220px, aurait replié la grille un champ plus tôt que le handoff. `D-61`. */ --pgs-largeur-colonne-compacte: 200px; /* Les deux colonnes du bandeau d'accueil se replient sous ce seuil. */ --pgs-largeur-colonne-accroche: 420px; /* La carte de la fenêtre de connexion, relevée telle quelle : 560px. */ --pgs-largeur-modale: 560px; /* Le haut d'un élément collant. Le handoff pose `top:96px` sur l'encadré de la fiche, ce qui est la hauteur de l'en-tête collant plus sa respiration : l'encadré s'arrête juste sous le menu, jamais dessous. */ --pgs-decalage-collant: 96px; /* ---------------------------------------------------------------------- A.6 Durées Le handoff pose `.2s` sur le mobile et `.25s` sur le web, une entrée d'écran de `.4` à `.7s`, un ruban de ministères de 40s et un compteur de 1,2s. Les trois derniers sont des agréments : `EXG-POR-07` exige que le parcours tienne sans eux, et `prefers-reduced-motion` les retire. ---------------------------------------------------------------------- */ --pgs-duree-courte: .2s; --pgs-duree-moyenne: .25s; --pgs-duree-entree: .4s; --pgs-duree-entree-longue: .7s; --pgs-duree-ruban: 40s; --pgs-duree-compteur: 1.2s; --pgs-courbe: ease; --pgs-decalage-entree: 18px; /* ---------------------------------------------------------------------- A.7 Variantes d'état, couples fond/encre Elles nomment un registre d'affichage, jamais un état métier : le libellé d'état d'un dossier vient du domaine des démarches et n'est pas réécrit ici (`RG-POR-01`). ---------------------------------------------------------------------- */ --pgs-variante-neutre-fond: #F5F6F2; --pgs-variante-neutre-encre: #33443C; --pgs-variante-succes-fond: #E8F3EC; --pgs-variante-succes-encre: #0B7A4B; --pgs-variante-information-fond: #E7EEF8; --pgs-variante-information-encre: #1D5AA8; --pgs-variante-avertissement-fond: #FFF7D1; --pgs-variante-avertissement-encre: #5C4600; --pgs-variante-erreur-fond: #FDECEA; --pgs-variante-erreur-encre: #7A1A12; /* ---------------------------------------------------------------------- A.8 Ce que le mobile ajoute, et rien de plus. Relevé dans `templates/design_handoff_gabon_digital_2026/Application mobile 2026.dc.html`, en lecture seule. Le cadre est de 412 x 844 px, les titres vont de 17 à 30 px, le corps de 12,5 à 15 px, et les libellés d'onglets sont à 10,5 px. La pastille d'onglet actif mesure 54 x 30 px. Les couleurs sont celles de la charte publique ci-dessus : le mobile et le portail partagent désormais la même, ce qui est précisément la décision `D-55`. Seules les grandeurs propres à un écran de poche sont ici. ---------------------------------------------------------------------- */ --pgs-largeur-cadre-mobile: 412px; --pgs-hauteur-cadre-mobile: 844px; --pgs-taille-onglet: 0.65625rem; /* 10,5 px */ --pgs-largeur-pastille-onglet: 54px; --pgs-hauteur-pastille-onglet: 30px; --pgs-rayon-carte-mobile: 12px; --pgs-rayon-carte-mobile-large: 16px; --pgs-ombre-survol-mobile: 0 12px 26px rgba(10, 31, 23, .10); --pgs-levee-survol-mobile: -2px; --pgs-couleur-texte-sur-accent-attenue: #CFE6D8; /* sur accent : 4,09:1 */ --pgs-couleur-texte-sur-accent-profond-attenue: #A6D1B8; /* sur accent-profond : 8,97:1 */ /* ---------------------------------------------------------------------- A.9 Les grandeurs de bureau, déclarées ici aussi, et pour une raison. `--pgs-couleur-filet-controle`, `--pgs-couleur-jauge-fond` et les cinq teintes de série ne servent qu'aux tables, aux graphes et aux jauges du back-office, qui n'existent pas sur le portail. Ils sont pourtant à la racine, pour une seule raison : le générateur `mobile/outils/generer_jetons.dart` ne lit **que le premier bloc `:root`**, et `tests/mobile/test_jetons_generes.py` compare les deux listes. Un jeton relégué dans la portée de bureau disparaîtrait de `jetons.dart` sans que personne ne l'ait décidé, et le mobile perdrait une grandeur au premier changement de charte du portail. Les valeurs de la racine sont celles de la charte publique ; la portée de bureau les reprend avec les siennes, en B.8. ---------------------------------------------------------------------- */ --pgs-largeur-rail: 258px; --pgs-largeur-table-dense: 1180px; --pgs-hauteur-graphe: 175px; --pgs-hauteur-jauge: 8px; --pgs-espace-cellule-y: 11px; --pgs-espace-cellule-x: 14px; --pgs-couleur-filet-controle: #7C8A81; /* 3,61:1 sur surface */ --pgs-couleur-jauge-fond: #EEF0EC; --pgs-couleur-serie-1: #0B7A4B; /* sur surface : 5,39:1 */ --pgs-couleur-serie-2: #7A5E00; /* sur surface : 6,12:1 */ --pgs-couleur-serie-3: #1D5AA8; /* sur surface : 6,82:1 */ --pgs-couleur-serie-4: #B42318; /* sur surface : 6,57:1 */ --pgs-couleur-serie-aire: #E8F3EC; } /* ========================================================================== B. CHARTE DU BACK-OFFICE, inchangée depuis le 24 septembre 2026. Portée `.pgs-page--bureau`, posée sur le `` de `gabarits/composants/enveloppe-bureau.html`. Les écrans d'agent, d'administration et de pilotage en descendent tous. **Ne modifiez aucune valeur de cette section sans instruction écrite.** Le commanditaire a demandé le 25 septembre 2026 que le back-office ne change pas, et c'est la moitié de sa demande qui se casse en silence : une charte qui dérive ne se voit pas sur une capture, elle se voit six semaines plus tard quand un agent ne reconnaît plus son outil. La source reste `templates/Back-office - autonome.html`, en lecture seule. Les deux écarts assumés qui la concernaient valent toujours et sont rappelés en regard de leur déclaration. Chaque jeton que la section A redéclare avec une valeur nouvelle est repris ici avec sa valeur d'origine. Ceux que la section A n'a pas touchés ne sont pas répétés : les répéter ferait croire à un choix là où il n'y en a pas, et la première correction oublierait l'une des deux copies. ========================================================================== */ .pgs-page--bureau { /* -- B.1 Couleurs -------------------------------------------------------- */ --pgs-couleur-fond: #FAF9F6; --pgs-couleur-surface: #FFFFFF; --pgs-couleur-surface-attenuee: #F4F2EC; --pgs-couleur-surface-calme: #F2F7F4; --pgs-couleur-surface-survol: #FDF6DC; --pgs-couleur-surface-accent: #EAF4EF; --pgs-couleur-surface-information: #EDF2FA; --pgs-couleur-surface-avertissement: #FCD116; --pgs-couleur-surface-erreur: #FDF1EF; --pgs-couleur-surface-neutre: #F1F3F1; --pgs-couleur-surface-jaune: #FDF6DC; --pgs-couleur-surface-profonde: #0E1A15; --pgs-couleur-surface-encre: #0E1A15; --pgs-couleur-surface-marque: #0E1A15; --pgs-couleur-filet: #E6E9E4; --pgs-couleur-filet-attenue: #EFF1ED; --pgs-couleur-filet-appuye: #DDE3DE; --pgs-couleur-filet-accent: #9FC4B2; --pgs-couleur-filet-erreur: #E3B7B0; --pgs-couleur-filet-information: #D2DEF0; --pgs-couleur-filet-carte: #E6E9E4; --pgs-couleur-separateur: #EFF1ED; --pgs-couleur-filet-clair: rgba(255, 255, 255, .14); /* Écart assumé nº 2 de l'ancienne charte, qui vaut toujours ici : la maquette de bureau emploie `#6B7A72` comme encre secondaire, soit 4,29:1 sur son fond, sous le seuil AA. L'encre atténuée retenue est `#5C6B62`. */ --pgs-couleur-texte: #0E1A15; /* sur fond : 16,94:1 */ --pgs-couleur-texte-appuye: #3D4C44; /* sur surface : 9,07:1 */ --pgs-couleur-texte-attenue: #5C6B62; /* sur fond : 5,34:1 */ --pgs-couleur-texte-faible: #6B7A72; /* sur fond : 4,29:1, SOUS AA */ --pgs-couleur-texte-accent: #06714C; /* sur surface : 6,04:1 */ --pgs-couleur-texte-accent-appuye: #04593C; /* sur surface-accent : 7,48:1 */ --pgs-couleur-texte-sur-accent: #FFFFFF; /* sur accent : 6,04:1 */ --pgs-couleur-texte-erreur: #9B2C1E; /* sur surface-erreur : 6,85:1 */ --pgs-couleur-texte-erreur-appuye: #7A2418; /* sur surface-erreur : 9,08:1 */ --pgs-couleur-texte-information: #2C5C9E; /* sur surface-information : 5,97:1 */ --pgs-couleur-texte-avertissement: #0E1A15; /* sur surface-avertissement : 12,12:1 */ --pgs-couleur-texte-sur-jaune: #0E1A15; --pgs-couleur-texte-sur-marque: #C8D3CC; /* sur surface-marque : 11,31:1 */ --pgs-couleur-texte-sur-marque-attenue: #7D8C84; /* sur surface-marque : 5,09:1 */ --pgs-couleur-texte-sur-profond: #C8D3CC; --pgs-couleur-texte-sur-profond-clair: #C8D3CC; --pgs-couleur-texte-sur-profond-attenue: #7D8C84; --pgs-couleur-accent: #06714C; --pgs-couleur-accent-appuye: #04593C; --pgs-couleur-accent-doux: #F3FAF6; --pgs-couleur-accent-bleu: #2C5C9E; --pgs-couleur-accent-bleu-appuye: #1F4271; --pgs-couleur-accent-profond: #06301F; --pgs-couleur-voile: rgba(14, 26, 21, .45); --pgs-couleur-voile-clair: rgba(255, 255, 255, .07); --pgs-couleur-verre: #FFFFFF; --pgs-couleur-halo-bleu: transparent; --pgs-couleur-halo-vert: transparent; --pgs-couleur-halo-jaune: transparent; /* -- B.2 Typographie ----------------------------------------------------- */ --pgs-police-texte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --pgs-police-titre: 'Newsreader', Georgia, 'Times New Roman', serif; --pgs-police-chiffre: 'IBM Plex Sans', system-ui, sans-serif; --pgs-taille-xs: 0.71875rem; /* 11,5 px */ --pgs-taille-s: 0.78125rem; /* 12,5 px */ --pgs-taille-m: 0.84375rem; /* 13,5 px */ --pgs-taille-l: 0.9375rem; /* 15 px */ --pgs-taille-xl: 1.125rem; /* 18 px */ --pgs-titre-accroche: 2.5rem; /* 40 px */ --pgs-titre-1: 2.5rem; /* 40 px */ --pgs-titre-2: 1.875rem; /* 30 px */ --pgs-titre-3: 1.5625rem; /* 25 px */ --pgs-titre-4: 1.25rem; /* 20 px */ --pgs-titre-5: 1.1875rem; /* 19 px */ --pgs-graisse-normale: 400; --pgs-graisse-moyenne: 500; --pgs-graisse-forte: 600; --pgs-graisse-affichage: 600; --pgs-etirement-normal: 100%; --pgs-etirement-titre: 100%; --pgs-etirement-titre-large: 100%; --pgs-interligne-titre: 1.2; --pgs-interligne-affichage: 1.2; --pgs-interligne-compact: 1.35; --pgs-interligne-texte: 1.55; --pgs-interligne-long: 1.7; --pgs-approche-affichage: -.015em; --pgs-approche-titre: -.015em; --pgs-approche-capitale: .08em; --pgs-approche-capitale-large: .14em; /* -- B.3 Espacements ----------------------------------------------------- */ /* Inchangée : le conteneur du back-office a toujours porté 28px, comme celui du portail. Le jeton est nouveau, la valeur ne l'est pas. */ --pgs-marge-laterale: 28px; --pgs-controle-y: 11px; --pgs-controle-x: 12px; --pgs-controle-large-y: 13px; --pgs-controle-large-x: 18px; --pgs-largeur-drapeau: 34px; --pgs-hauteur-drapeau: 25px; --pgs-hauteur-marque: 32px; --pgs-hauteur-marque-bande: 40px; /* -- B.4 Rayons et ombres ------------------------------------------------ */ --pgs-rayon-s: 6px; --pgs-rayon-m: 8px; --pgs-rayon-l: 10px; --pgs-rayon-icone: 8px; --pgs-rayon-carte: 10px; --pgs-rayon-bloc: 10px; --pgs-rayon-carte-large: 10px; --pgs-rayon-pastille: 999px; --pgs-epaisseur-filet-appuye: 2px; --pgs-ombre-carte: 0 1px 2px rgba(14, 26, 21, .04); --pgs-ombre-accent: 0 1px 2px rgba(6, 113, 76, .08); --pgs-ombre-survol: 0 6px 20px rgba(14, 26, 21, .12); --pgs-ombre-survol-appuyee: 0 6px 20px rgba(14, 26, 21, .12); --pgs-ombre-flottante: 0 6px 20px rgba(14, 26, 21, .12); --pgs-ombre-accroche: 0 6px 20px rgba(14, 26, 21, .12); --pgs-ombre-suggestions: 0 6px 20px rgba(14, 26, 21, .12); --pgs-ombre-modale: 0 6px 20px rgba(14, 26, 21, .12); --pgs-levee-survol: 0px; --pgs-anneau-focus: 0 0 0 3px rgba(6, 113, 76, .14); --pgs-couleur-focus: #06714C; --pgs-epaisseur-focus: 2px; --pgs-decalage-focus: 2px; --pgs-flou-verre: 0px; --pgs-saturation-verre: 1; --pgs-flou-voile: 0px; /* -- B.5 Largeurs -------------------------------------------------------- */ --pgs-largeur-utile: 1400px; --pgs-largeur-lecture: 660px; --pgs-largeur-depot: 880px; --pgs-largeur-panneau: 340px; --pgs-largeur-colonne-minimale: 260px; --pgs-largeur-colonne-large: 340px; --pgs-largeur-colonne-etroite: 215px; /* -- B.6 Durées ---------------------------------------------------------- */ --pgs-duree-courte: .18s; --pgs-duree-moyenne: .3s; --pgs-duree-entree: .3s; --pgs-duree-entree-longue: .3s; --pgs-decalage-entree: 0px; /* -- B.7 Variantes d'état ------------------------------------------------ */ --pgs-variante-neutre-fond: #F1F3F1; --pgs-variante-neutre-encre: #3D4C44; --pgs-variante-succes-fond: #EAF4EF; --pgs-variante-succes-encre: #04593C; --pgs-variante-information-fond: #EDF2FA; --pgs-variante-information-encre: #2C5C9E; --pgs-variante-avertissement-fond: #FCD116; --pgs-variante-avertissement-encre: #0E1A15; --pgs-variante-erreur-fond: #FDF1EF; --pgs-variante-erreur-encre: #9B2C1E; /* -- B.8 Ce que le back-office ajoute, et rien de plus. Écart assumé nº 4 : les courbes étaient tracées en `#B08900`, soit 3,27:1 sur blanc, sous le seuil de 3:1 dès que la valeur est écrite dans la teinte de sa série. La deuxième série retenue est `#7A5E00`. Écart assumé nº 5 : les cases à cocher étaient bordées en `#BEC7BF`, soit 1,73:1 sur blanc. `--pgs-couleur-filet-controle` vaut `#7C8A81`. ------------------------------------------------------------------------ */ --pgs-largeur-rail: 258px; --pgs-largeur-table-dense: 1180px; --pgs-hauteur-graphe: 175px; --pgs-hauteur-jauge: 8px; --pgs-espace-cellule-y: 11px; --pgs-espace-cellule-x: 14px; --pgs-couleur-filet-controle: #7C8A81; /* 3,61:1 sur surface */ --pgs-couleur-jauge-fond: #EFF1ED; --pgs-couleur-serie-1: #06714C; /* sur surface : 6,04:1 */ --pgs-couleur-serie-2: #7A5E00; /* sur surface : 6,12:1 */ --pgs-couleur-serie-3: #2C5C9E; /* sur surface : 6,71:1 */ --pgs-couleur-serie-4: #9B2C1E; /* sur surface : 6,85:1 */ --pgs-couleur-serie-aire: #EAF4EF; }