/* * account.css : la feuille propre aux pages de COMPTE (`/{locale}/login` et * `/{locale}/settings`), story 11.4. * * ── CE QU'ELLE EST (story 12.8, le reste d'AC3 livré) ────────────────────── * * Elle porte le logotype de marque, les jetons de couleur de la charte, LA PILE * SYSTÈME et LES BOUTONS D'ACTION EN INDIGO. Jusqu'au 01/09/2026 elle s'arrêtait * aux jetons des trois panneaux et le disait : « les boutons restent en bleu * Bootstrap, la typographie reste Arial, Helvetica ». Ces deux phrases sont * devenues fausses avec cette story, qui est l'AC3 que la 11.4 attendait. * * ⚠️ CE QUI N'EST TOUJOURS PAS ICI, ET C'EST DIT : * · le pied de page reste celui du gabarit (`/style.css`), commun à tout le * site : le redessiner ici ne toucherait que deux pages sur dix, * · le sélecteur de langue garde ses drapeaux et sa géométrie (AC4 de la * 11.4, REFUSÉ sur mesure par le dossier du 31/08, non rouvert), * · aucun thème sombre. Le motif est mesuré et écrit plus bas. * * ── CE QUE CE CHARGEMENT CHANGE POUR LE SITE, ET IL FAUT LE SAVOIR ───────── * * 🔑 `login.php` et `settings.php` sont les PREMIÈRES pages du site à charger * LES DEUX feuilles à la fois, celle du gabarit (`/style.css`) puis celle-ci. * Jusqu'ici l'accueil était la seule à poser `$PAGE_STYLESHEETS`, et elle * renonce à celle du gabarit, si bien qu'AUCUN rendu n'exerçait leur ordre. * `HomePageTest::testTheTemplateStillEmitsPageStylesheetsAfterItsOwn` le * disait explicitement et se rabattait sur une lecture de source, en * précisant que c'était faible. Ce n'est plus le cas : l'ordre est désormais * prouvé sur du HTML servi. * * 🔒 AUCUNE ORIGINE TIERCE. Pas d'`@import`, pas d'`url()` distante, pas une * seule police téléchargée. La fuite la plus discrète du 12/08/2026 était un * `@import` de Google Fonts en première ligne de `/style.css`, invisible du * HTML servi : `ThirdPartyAssetsTest` lit donc aussi le CONTENU des feuilles. * * 🔒 ET AUCUN `url()` VERS `src/img/`. C'est le répertoire d'images du gabarit * MLFloriKit, d'où venaient la photographie de cimetière et la signature * manuscrite. `BoilerplateAssetsTest` refuse tout `url()` qui y résout, * depuis n'importe quelle feuille servie, celle-ci comprise. */ /* ══════════════════════════════════════════════════════════════════════ LES JETONS DE LA CHARTE ══════════════════════════════════════════════════════════════════════ */ /* 🎨 LES TROIS PANNEAUX DE `settings.php` ÉTAIENT EN VERT SAUGE `#8eb292ab`, une teinte du gabarit MLFloriKit qui n'appartient à aucune charte du produit. Ils lisent désormais ces jetons, posés par la 9.6 dans `home/home.css`. ⚠️ POURQUOI LES VALEURS SONT RECOPIÉES ICI, ET CE QUI FERME LA DÉRIVE. `home/home.css` n'est chargée que par la page d'accueil, qui renonce à `/style.css` : la lier depuis les pages de compte importerait sa mise en page entière, ce qui n'est pas ce que cette correction demande. Il n'existe aujourd'hui aucune feuille de jetons partagée, donc les valeurs sont recopiées, ce qui crée une surface de dérive. Elle est fermée par un verrou : `BoilerplateAssetsTest` confronte CHAQUE jeton déclaré ici à sa valeur claire dans `home/home.css`, et changer l'un sans l'autre rougit. La vraie réponse, le jour où une troisième surface en aura besoin, est une feuille de jetons unique. Elle n'est pas écrite ici parce qu'elle toucherait l'accueil, qui est en production et hors périmètre. ⚠️ VALEURS CLAIRES SEULEMENT, ET LE RENONCEMENT EST REMESURÉ LE 01/09/2026 (story 12.8, AC4). `home/home.css` porte un bloc `prefers-color-scheme: dark`. Le reprendre ici peindrait des panneaux sombres dans une page qui resterait claire, et le compte a été refait plutôt que repris de confiance. Ce qui peint ces deux pages hors de cette feuille, et qui n'a AUCUN thème sombre : · `/style.css` : `body { background: #f6f5fb }` et `#body_container { background-color: #ffffffdd }`, plus le pied de page `.footer-distributed { background-color: #292c2f }`, tous en valeurs FIXES, · Bootstrap 4.3.1, servi en local : la feuille contient ZÉRO `prefers-color-scheme` (compté sur les octets servis), et ses composants sont peints en clair EN DUR : `.card { background-color: #fff }`, `.form-control { color: #495057; background-color: #fff }`, `.form-control:disabled { background-color: #e9ecef }`, `.alert-success/-danger/-warning` et `.dropdown-menu`. Or le formulaire de connexion et le formulaire de compte sont faits de ces composants-là. Un thème sombre pour ces deux pages n'est donc pas un bloc de jetons de plus, c'est le rhabillage des composants Bootstrap qui portent les deux formulaires, plus la reprise des trois fonds du gabarit. C'est plus qu'une session, et la 12.8 le REFUSE explicitement au lieu de le commencer à moitié : un demi-thème sombre est pire que pas de thème sombre, il donne un formulaire clair dans une page sombre. Conséquence assumée et déjà écrite dans le verrou : une copie de la charte SANS bloc sombre est un état admis (`BoilerplateAssetsTest`, anti-vacuité sur le mode clair seul). ⚠️ `--home-accent` ÉTAIT ABSENT D'ICI JUSQU'AU 31/08/2026, et le commentaire qui l'expliquait disait vrai à sa date : rien ne le lisait. La story 12.3 lui donne son premier lecteur, le bouton d'achat de la rangée d'abonnement, et le jeton est donc déclaré AVEC son lecteur, dans le même geste. La règle n'a pas changé, c'est le fait qui a changé. `--home-accent-ink` l'accompagne parce qu'une couleur de fond sans sa couleur d'encre laisserait le libellé du bouton en noir Bootstrap sur de l'indigo, ce qui est un défaut de contraste, pas une mise à la charte. */ :root { --home-bg-soft: #f6f5fb; --home-line: #e4e2ee; --home-accent: #5946B2; --home-accent-ink: #ffffff; } /* ⚠️ AUCUN JETON DE PLUS QUE CES QUATRE, ET C'EST LA RÈGLE DE LA 12.3 RECONDUITE : un jeton se déclare AVEC son lecteur. `--home-muted` a été écrit puis retiré pendant cette story : le gris de texte secondaire de ces deux pages est celui de `.text-muted` de Bootstrap (`#6c757d`), porté par le balisage existant, et cette story ne réforme pas les classes utilitaires du gabarit. Déclarer le jeton sans le lire aurait ajouté une ligne au verrou de parité pour rien. */ /* ══════════════════════════════════════════════════════════════════════ LA PILE SYSTÈME (story 12.8, AC2) ══════════════════════════════════════════════════════════════════════ */ /* 🔤 CES DEUX PAGES ÉTAIENT EN `Arial, Helvetica`, ET C'ÉTAIT LE GABARIT. `/style.css` pose `body { font: 14px/1.5 Arial, Helvetica, sans-serif }`, hérité de MLFloriKit, pendant que l'accueil, la 404 et les landings sont en pile système depuis la 9.6. La marque changeait donc de typographie entre la page qui vend et la page qui encaisse. 🔑 SEULE LA FAMILLE EST REPOSÉE, PAS LA TAILLE NI L'INTERLIGNE, et c'est une décision de non-régression, pas un oubli. `home/home.css` déclare `font: 400 17px/1.6 ` : reprendre le raccourci entier ferait passer ces deux pages de 14 px à 17 px, donc redimensionnerait tout ce que Bootstrap exprime en `em` (les hauteurs de `.form-control`, les `padding` des `.btn`, les `.spinner-border`). Aucun navigateur n'a été ouvert dans cette story : on ne change que ce dont on peut prouver l'effet. La pile, elle, est une SUBSTITUTION de familles, et le verrou `BoilerplateAssetsTest::testLaPileSystemeRecopieeEgaleCelleDeLaCharte` exige déjà qu'elle soit MOT POUR MOT celle de la charte. 🔒 POURQUOI UN SÉLECTEUR `body` NU SUFFIT ICI, ET CE N'EST PAS LA DETTE D9.6-1. Cette feuille est émise APRÈS `/style.css`, et cette position n'est pas une convention : elle est portée par le mécanisme `$PAGE_STYLESHEETS` de `templates/head.php` (9.6) et prouvée sur le HTML SERVI par `HomePageTest::testTheTemplateStillEmitsPageStylesheetsAfterItsOwn`. À spécificité égale, la dernière règle lue gagne. La dette D9.6-1 visait des contre-règles qui DÉFAISAIENT une mise en page (un `overflow`, une image de fond, un pied de page flottant) : ici on ne défait rien, on SUBSTITUE une famille de polices, et si un jour `/style.css` montait d'un cran, le pire est une page en Arial, pas une page illisible. */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* ══════════════════════════════════════════════════════════════════════ LE LOGOTYPE ══════════════════════════════════════════════════════════════════════ */ /* 🔑 LA TAILLE EST PILOTÉE PAR LA HAUTEUR, JAMAIS PAR LA LARGEUR (18/08/2026). Le rapport du verrouillage est décidé par `packages/brand/src/logotype_build.py` (viewBox 4155,36 × 1085, soit 3,830:1) et `width: auto` le laisse décider. Poser une largeur ici rouvrirait la porte à une déformation de la marque. `color` n'est délibérément PAS posé : le lettrage est peint en `currentColor` et hérite donc de la couleur du texte de la page. Le blason, lui, porte ses couleurs de marque en dur, comme il doit. */ .account-lockup { display: inline-flex; flex: 0 0 auto; } .account-lockup svg { display: block; height: 30px; width: auto; } /* Sur la page de compte, le logotype prend la place qu'occupait la signature manuscrite : en haut à droite du panneau. La hauteur y est un peu plus basse que sur la connexion, la marque n'ayant pas à concurrencer le titre de page juste au-dessous. */ .account-lockup--corner { float: right; } .account-lockup--corner svg { height: 26px; } /* Sur la connexion, la marque est le premier élément de la carte : c'est la page où quelqu'un arrive sans contexte, et elle doit dire chez qui il est. */ .account-lockup--card { display: flex; justify-content: center; margin-bottom: 18px; } .account-lockup--card svg { height: 34px; } /* ══════════════════════════════════════════════════════════════════════ LA RANGÉE D'ACHAT (story 12.3, AC2) ══════════════════════════════════════════════════════════════════════ */ /* 🎨 LA RÉSERVE DE PÉRIMÈTRE QUITTE L'HABILLAGE D'ALERTE. Elle valait `class="alert alert-warning"`, c'est-à-dire le JAUNE Bootstrap, sur la seule phrase que quelqu'un lit juste avant de payer. L'habillage disait « attention, danger » alors que le texte, lui, est constatif et bien écrit : il dit ce que l'abonnement ouvre et ce qu'il n'ouvre pas ici. Ce n'est pas un avertissement, c'est le périmètre de la vente. 🔒 LE TEXTE NE CHANGE PAS D'UN MOT, et c'est la moitié du travail. `settings.subscribe_scope` est verrouillée par `SalesTermsTest` (son suffixe doit égaler `sales.availability`) : seul l'habillage bouge. ⚠️ LES JETONS SONT LUS DEPUIS UNE FEUILLE, PAS ÉCRITS EN LIGNE, et ce n'est pas un goût. La 12.3 écrivait ici que `BoilerplateAssetsTest::testLesTroisPanneauxDeCompteLisentLeJetonDeLaCharte` comptait EXACTEMENT trois `background-color: var(--home-bg-soft)` EN LIGNE dans la page servie. La story 12.8 a fait ce que la 12.3 annonçait : les trois panneaux ont rejoint cette feuille sous `.account-panel`, le compte d'occurrences en ligne est donc tombé de trois à ZÉRO, et le verrou a été refait dans le même geste (il découvre les panneaux dans le HTML servi et exige que leur classe lise le jeton dans une feuille que la page charge). Un compte d'occurrences n'était de toute façon pas la propriété : il rougissait pour un panneau ajouté comme pour un panneau dépeint. */ .account-sell-scope { background-color: var(--home-bg-soft); border: 1px solid var(--home-line); border-radius: 7px; padding: 12px 14px; } /* 🎨 LE BOUTON D'ACHAT EN INDIGO DE LA CHARTE. Il portait `btn-primary`, le bleu Bootstrap du gabarit MLFloriKit. C'est le geste que toute cette page existe pour proposer : il porte donc la couleur de la marque, celle du bouton « Ouvrir la carte » de l'accueil. 🔒 `btn` RESTE, ET C'EST DÉLIBÉRÉ. La géométrie (padding, rayon, curseur, comportement au clavier) vient de Bootstrap et n'est pas ce que cette story remplace. Seule la peinture change, exactement comme les trois panneaux en 11.4. 🔒 CE QUI N'EST PAS TOUCHÉ, ET QUI COMPTE PLUS QUE LA COULEUR : l'ancre reste SANS `href` dans le gabarit, la rangée reste `display: none`, et c'est toujours le seul chemin qui a constaté le jeton ET le rattachement qui pose l'un et lève l'autre (garde 11.1/11.6). Un style ne peut pas ouvrir une vente : `:hover` et `:focus` ci-dessous ne peignent rien d'autre que ce que le navigateur peindrait déjà (`:focus` et non `:focus-visible`, parce que Bootstrap peint déjà son propre `:focus` et qu'il faut le recouvrir dans les deux modes, souris comprise). */ .account-sell-cta { background-color: var(--home-accent); border: 1px solid var(--home-accent); color: var(--home-accent-ink); } .account-sell-cta:hover, .account-sell-cta:focus { background-color: var(--home-accent); border-color: var(--home-accent); color: var(--home-accent-ink); filter: brightness(0.92); } /* ══════════════════════════════════════════════════════════════════════ LES ACTIONS PRINCIPALES (story 12.8, AC2) ══════════════════════════════════════════════════════════════════════ */ /* 🎨 CE QUE CETTE RÈGLE REMPLACE, MESURÉ SUR LE SERVI AVANT CORRECTION : cinq `class="btn btn-primary"` sur les deux pages de compte (le retour à l'accueil et l'enregistrement des réglages, l'invitation à se connecter, l'export RGPD, l'envoi du lien de connexion), tous en `#007bff`, le bleu par défaut de Bootstrap. Ce bleu n'est pas une couleur du produit : c'est le même héritage que le vert sauge des panneaux et que la photographie de cimetière du gabarit. 🔒 POURQUOI CETTE RÈGLE NE FUSIONNE PAS AVEC `.account-sell-cta` CI-DESSUS, alors qu'elle porte les mêmes trois déclarations. Le bouton d'achat est le SEUL dont la peinture soit verrouillée par son nom (`AccountPageAndSignInMechanismTest::testTheSellingBlockReadsTheCharterTokensThroughALoadedStylesheet` exige un bloc `.account-sell-cta { … }` lisant `--home-accent` et `--home-accent-ink`). Le faire dépendre d'une classe générique rendrait possible de dépeindre en silence le seul geste d'achat du site en retirant une classe d'un attribut. Les deux règles ne peuvent pas DIVERGER pour autant : la source de la couleur n'est pas la règle, ce sont les deux jetons, et ils sont uniques. 🔒 `btn` RESTE, comme pour le bouton d'achat : la géométrie (padding, rayon, curseur, comportement au clavier) vient de Bootstrap et n'est pas ce que cette story remplace. Seule la peinture change. ⚠️ CE QUI NE PASSE PAS EN INDIGO, ET POURQUOI. `btn-danger` (supprimer le compte, confirmer la suppression) reste ROUGE : c'est une information de conséquence, pas un habillage, et la charte n'a aucun jeton de danger à lui donner. En inventer un serait une couleur de plus, ce que le dossier du 31/08 interdit (P3). `btn-secondary` (annuler, se déconnecter, réessayer) reste gris pour la raison symétrique : l'indigo est la couleur du geste ATTENDU, et repeindre les gestes secondaires en indigo effacerait la hiérarchie que cette story vient poser. */ .account-btn-primary { background-color: var(--home-accent); border: 1px solid var(--home-accent); color: var(--home-accent-ink); } .account-btn-primary:hover, .account-btn-primary:focus { background-color: var(--home-accent); border-color: var(--home-accent); color: var(--home-accent-ink); filter: brightness(0.92); } /* Le retour à l'accueil, en haut à gauche du conteneur de la page de compte. Il portait `style="float: left; color: white;"` : le flottement est de la mise en page et vient ici, la couleur d'encre est désormais celle du jeton (`--home-accent-ink`), donc la déclaration en ligne n'a plus d'objet. */ .account-btn--corner { float: left; } /* 🌀 L'INDICATEUR D'ATTENTE. Il portait `text-primary`, c'est-à-dire `color: #007bff !important` de Bootstrap, sur les deux pages. `.spinner-border` se peint en `currentColor` : poser la couleur du texte suffit, et il n'y a rien à surcharger puisque `text-primary` a été retiré du balisage plutôt que recouvert. Recouvrir un `!important` aurait demandé un second `!important`, c'est-à-dire deux règles qui se battent au lieu d'une qui décide. */ .account-spinner { color: var(--home-accent); } /* ══════════════════════════════════════════════════════════════════════ LES PANNEAUX ET LA TYPOGRAPHIE DE LA PAGE (story 12.8, AC2) ══════════════════════════════════════════════════════════════════════ */ /* 📦 LES TROIS PANNEAUX, VENUS DES ATTRIBUTS `style` DE `settings.php`. Ils y portaient mot pour mot `background-color: var(--home-bg-soft); border: 1px solid var(--home-line); border-radius: 7px; padding: 20px`, posé par la revue de la 11.4 le 24/08/2026. Les valeurs ne changent pas d'un octet, elles changent de LIEU : un attribut `style` ne peut être ni relu, ni factorisé, ni surchargé par un thème, et les jetons y étaient déjà lus trois fois à l'identique. ⚠️ `display: none` NE VIENT PAS ICI, ET C'EST LA SEULE EXCEPTION. Il reste en ligne sur `#account-panel` et sur `#subscribe-row` parce que ce n'est pas de la mise en forme : c'est l'état initial que `SignInEntryAndSpotsTest` et `SettingsAccountTest` lisent, et que les scripts de compte basculent. Le passer en classe changerait le comportement d'une page que cette story n'a le droit de toucher que par le style. */ .account-panel { background-color: var(--home-bg-soft); border: 1px solid var(--home-line); border-radius: 7px; padding: 20px; } .account-panel--stacked { margin-top: 20px; } /* Le titre de page. Il portait `style="margin:10px auto;"` : `#body_container` du gabarit centre son contenu, la marge automatique n'est là que pour le respirer. */ .account-title { margin: 10px auto; } /* Les deux niveaux de sous-titre de la page de compte, qui vivaient en `style="font-size: 1.25rem"` (trois fois) et `style="font-size: 1.1rem"` (une fois). Les valeurs sont reprises telles quelles : cette story déplace des déclarations, elle n'en redessine aucune. */ .account-h2 { font-size: 1.25rem; } .account-h3 { font-size: 1.1rem; } /* Le corps fin (mentions, notes, compteurs), neuf fois en `style="font-size: 0.875rem"`. Les deux variantes portent les marges qui accompagnaient certaines de ces déclarations, à l'octet. */ .account-fine { font-size: 0.875rem; /* Revue 12.8 (D7) : ce petit texte était encré par le `.text-muted` de Bootstrap (#6c757d), qui rend 4,33:1 sur le fond des panneaux (--home-bg-soft), sous le plancher de 4,5:1 pour du 0.875rem. L'encre vient de la charte (6,59:1 mesuré), et cette règle porte un jeton --home-*, donc elle entre d'office dans le verrou de contraste. */ color: var(--home-muted); } .account-fine--gap-top { margin-top: 10px; } .account-fine--gap-bottom { margin-bottom: 10px; } .account-section { margin-bottom: 20px; } .account-row { margin-top: 15px; } /* Story 21.5 (Mon activité) — mise en page SANS séparateur textuel codé en dur (majeur 7, passe 2) : chaque champ est un noeud DOM distinct, l'espace entre eux vient de la marge, jamais d'un caractère « : » ou « — ». */ .activity-counters dt { display: inline-block; min-width: 220px; } .activity-counters dd { margin: 0 0 6px 0; } .activity-list { list-style: none; padding: 0; } .activity-item { display: block; padding: 6px 0; border-bottom: 1px solid #e5e5e5; } .activity-item__location { font-weight: 600; margin-right: 8px; } .activity-item__label { color: #666; margin-right: 4px; } .activity-item__value { margin-right: 8px; } .activity-item__date { color: #999; font-size: 0.9em; }