.bg-menu .bg-tab:hover { background: var(--panel); color: var(--text); } .bg-menu .bg-tab.on { color: var(--accent); } .bg-filtre input { flex: 1 1 100%; } .bg-filtre select { flex: 1 1 auto; } .bg-filtre input, .bg-filtre select, .bg-filtre button { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 9px; min-height: var(--cible-mini); } /* 16px sur les champs de SAISIE : en dessous, iOS zoome au focus — le garde de test_fenetres_ui l'exige règle par règle, donc chaque famille porte SA taille, jamais un `font: inherit` groupé. */ .bg-filtre input, .bg-filtre select { font: inherit; font-size: 16px; } .bg-filtre button { font: inherit; font-size: var(--t-corps); cursor: pointer; } .bg-filtre button { cursor: pointer; color: var(--muted); } .bg-filtre button.on { color: var(--accent); border-color: var(--accent); } .bg-fab[hidden] { display: none; } /* L'HISTOIRE DE CE BOUTON, gardée parce qu'elle a coûté deux bancs. ① **Lot J** : il naît pour le téléphone — « une dépense se note debout, à une main, le bouton d'ajout ne bouge jamais ». ② **06/09, banc des listes** : son `display: flex` mobile était déclaré AVANT sa base `display: none`, donc MORT — le « + » n'apparaissait jamais au téléphone, aucune requête ne partait, rien ne rougissait. *À spécificité égale, l'ordre SOURCE décide, @media ou pas.* Le même défaut vivait chez `.ls-fab`, qui avait copié ce patron. ③ **12/09** : la bascule disparaît (voir plus haut). *Ce qui reste vrai de ② vaut pour tout FAB futur* — `.ls-fab` a disparu le 26/09. */ @media (max-width: 640px) { /* ⛔⛔ LE CORPS SE TERMINE AU-DESSUS DU « + », ET SANS ÇA LA DERNIÈRE DÉPENSE DU MOIS ÉTAIT ILLISIBLE. Le bouton flotte à `bottom: 76px` sur 52 de haut, donc il couvre la bande 76-128 px du bas — c'est-à-dire, une fois le journal déroulé jusqu'au bout, **le montant de la dernière ligne**. *Un bouton flottant qui masque une ligne au milieu est le prix normal du patron ; qu'il masque la DERNIÈRE est un défaut, parce qu'aucun défilement ne la dégage.* Vu sur la capture d'Adam du 12/09 à 18h45, où le « + » couvre le « € » de « −8,40 ». ⚠ 144 et non 128 : la hauteur du bouton plus un demi-interligne, pour que la ligne ne le FRÔLE pas non plus. */ #bg-add { display: none; } #bg-add.ouverte { display: flex; flex-wrap: wrap; } #bg-add.ouverte input { flex: 1 1 40%; } #bg-add.ouverte button { flex: 1 1 30%; } } /* ─── Ce qui est PROPRE au budget ──────────────────────────────── */ .bg-head #bg-mois { font-weight: var(--p-appuye); text-transform: capitalize; /* ⛔⛔ 5em, ET LE CHEMIN POUR Y ARRIVER VAUT PLUS QUE LE NOMBRE. Mon premier correctif (12/09, 14h20) a réduit le padding des boutons de barre de 12 à 8 px et ce `min-width` de 8.5 à 7em — **et il n'a RIEN changé à l'écran**, la capture suivante d'Adam montrait le ✕ toujours seul sur sa deuxième ligne. *Les deux leviers étaient DOMINÉS* : les boutons de barre portent `min-width: var(--cible)`, donc leur largeur vaut 44 px quel que soit le padding ; et « Septembre 2026 » mesure ~118 px, donc il imposait sa largeur par-dessus les 98 px de 7em. **J'avais mesuré des largeurs en supposant actifs deux réglages que d'autres écrasaient** — le calcul était juste, ses prémisses non. ✅ Ce qui agit vraiment : le TEXTE lui-même (voir `main.js`, l'année retirée quand elle est celle d'aujourd'hui) — « Septembre » fait ~88 px, et 5em (70 px) ne le domine plus. Manquait ~12 px, gagnés ~30. */ min-width: 5em; text-align: center; } /* ⛔ LA BASCULE « À MOI / AU FOYER » (11/09) — elle remplace `#bg-wallet`, un menu déroulant plafonné à 130 px. Elle prend toute la largeur utile, bornée comme les portes de l'accueil : *un bloc qui s'étire sur un écran large devient une surface blanche, la correction d'Adam du 11/09 au matin.* */ /* ⛔⛔ `width: 100%` N'EST PAS DÉCORATIF ICI — SANS LUI, LA BASCULE SE RÉTRACTE SUR SON CONTENU. `#budget` est un conteneur flex en COLONNE : l'axe transversal est horizontal, et **une marge `auto` sur cet axe annule le `stretch`**. Le `auto` était là pour centrer sur grand écran ; sur un téléphone il RÉTRÉCIT. Les deux boutons en `flex: 1` se partageaient alors une largeur minimale, « Au foyer » cassait sur deux lignes, et les deux hauteurs ne se répondaient plus. *Trouvé sur la capture d'Adam du 12/09 : « les deux boutons sont serrés et mauvaise proportion ».* ⚠ Le bon patron existait à quarante lignes d'ici — `.bg-s-dedans` (lot 6) fait `width: 100%; max-width: …; margin: … auto`. *Un défaut déjà réparé ailleurs dans le même fichier : c'est la troisième fois que ce motif se paie au budget.* */ .bg-qui { display: flex; gap: var(--e-2); width: 100%; max-width: 560px; margin: 8px auto 0; } .bg-qui-b { flex: 1; min-height: var(--cible); background: var(--panel2); color: var(--muted); border: 1px solid var(--line2); border-radius: var(--r-objet); font-size: var(--t-lu); font-weight: var(--p-appuye); } /* L'ÉTAT SE VOIT SANS ÊTRE LU : l'aplat d'accent dit lequel est actif. `aria-pressed` porte la même vérité pour qui n'a pas l'image — *une couleur seule laisse un lecteur d'écran muet.* */ .bg-qui-b[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* LA PHRASE DE CONFIDENTIALITÉ — elle DIT qui voit cet argent, au lieu de le laisser deviner. C'est le défaut qu'Adam a trouvé en mettant 2 000 € sur un compte que le foyer voyait sans qu'il l'ait choisi. */ .bg-qui-note { /* Même `width: 100%` que la bascule, et pour la même raison : sans lui, la phrase se rétracte au lieu de se centrer sur la largeur. */ width: 100%; max-width: 560px; margin: 4px auto 0; font-size: var(--t-note); color: var(--muted); text-align: center; } /* ⭐⭐ L'ÉCRAN DE SAISIE (lot 6) — il RECOUVRE la fenêtre budget au lieu de s'y glisser : pendant qu'on note, il n'y a rien d'autre à faire. *Un formulaire au milieu d'un tableau de bord fait lire le tableau de bord.* `#budget` est déjà positionné (fixed au téléphone, absolute sur grand écran), donc `inset: 0` suffit. */ .bg-saisie { position: absolute; inset: 0; z-index: 6; background: var(--bg); display: flex; padding: calc(var(--e-3) + var(--safe-t)) calc(var(--e-3) + var(--safe-r)) calc(var(--e-3) + var(--safe-b)) calc(var(--e-3) + var(--safe-l)); overflow-y: auto; } .bg-saisie[hidden] { display: none; } /* Le pavé se tient à la main, pas à la largeur de l'écran : au-delà, les touches deviendraient des dalles qu'on vise au lieu de frapper. */ .bg-s-dedans { width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; } .bg-s-barre { display: flex; align-items: center; gap: var(--e-3); padding-bottom: var(--e-3); } .bg-s-retour { width: var(--cible); height: var(--cible); flex: 0 0 auto; border-radius: var(--r-plein); border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: var(--t-lu); cursor: pointer; } .bg-s-quoi { font-size: var(--t-lu); font-weight: var(--p-appuye); } /* ⚠ 52px EST HORS DE L'ÉCHELLE TYPOGRAPHIQUE, ET C'EST DÉLIBÉRÉ — déclaré dans le registre de `test_fenetres_ui.js` avec son motif. Ce n'est pas du texte : c'est l'OBJET de l'écran, lu à bout de bras pendant qu'on frappe le pavé, et c'est la taille de la maquette qu'Adam a validée le 10/09. *L'échelle s'arrête à 24px, qui est la taille d'un titre — un montant à 24px redeviendrait une ligne de formulaire parmi d'autres, c'est-à-dire l'écran qui a échoué.* */ .bg-s-chiffre { margin: 0; text-align: center; padding: var(--e-2) 0 var(--e-3); font-size: 52px; font-weight: var(--p-appuye); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); } .bg-s-curseur { color: var(--accent); font-style: normal; font-weight: var(--p-normal); animation: bgClign 1.1s steps(2, start) infinite; } /* ⚠ Une animation qui clignote sans fin est une gêne pour qui la subit : elle s'éteint quand le système le demande. */ @media (prefers-reduced-motion: reduce) { .bg-s-curseur { animation: none; } } .bg-s-corps { display: flex; flex-direction: column; } /* LES PASTILLES — jamais une liste déroulante : « trois gestes pour une information déjà en tête » (Adam, 10/09). Elles se VOIENT, donc elles se choisissent d'un doigt. */ .bg-s-pastilles { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; padding-bottom: var(--e-3); } .bg-s-past { min-height: var(--cible); padding: 0 var(--e-3); border-radius: var(--r-plein); border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: var(--t-corps); cursor: pointer; } .bg-s-past[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .bg-s-rythme { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); background: var(--panel2); border-radius: var(--r-cadre); padding: var(--e-1); margin-bottom: var(--e-3); } .bg-s-rythme button { min-height: var(--cible); border: 0; background: none; border-radius: var(--r-objet); color: var(--muted); font-size: var(--t-corps); cursor: pointer; } .bg-s-rythme button[aria-pressed="true"] { background: var(--panel); color: var(--text); font-weight: var(--p-appuye); } .bg-s-duo { margin-bottom: var(--e-3); } .bg-s-duo button { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: var(--cible); padding: var(--e-2) var(--e-3); text-align: left; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: var(--t-corps); cursor: pointer; } .bg-s-duo button:first-child { border-radius: var(--r-cadre) var(--r-cadre) 0 0; } .bg-s-duo button:last-child { border-radius: 0 0 var(--r-cadre) var(--r-cadre); border-top: 0; } .bg-s-duo .q { color: var(--muted); font-size: var(--t-note); width: 42px; } .bg-s-duo .n { flex: 1; } .bg-s-duo .c { color: var(--accent); } .bg-s-note { font-size: var(--t-note); color: var(--muted); text-align: center; padding: 0 var(--e-3) var(--e-3); line-height: 1.4; } /* LA LIGNE GRISE : la date et le compte, REPLIÉS mais modifiables. ⚠ Règle de dessin n° 2 — on ne pose jamais une question qui n'a qu'une réponse possible : le compte n'apparaît QUE s'il y en a deux (`bgDessinerSaisie`). */ .bg-s-replie { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; align-items: center; padding-bottom: var(--e-3); } .bg-s-replie button { min-height: var(--cible); border: 0; background: none; color: var(--muted); font-size: var(--t-note); text-decoration: underline; cursor: pointer; } /* Le mot « le » devant la date : sans lui, un champ de date ne dit pas ce qu'il est tant qu'on n'a pas appuyé dessus — et *ce qu'on ne voit pas n'existe pas* (règle de dessin n° 4). */ .bg-s-quand { color: var(--muted); font-size: var(--t-note); } .bg-s-pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-top: auto; } .bg-s-touche { height: 56px; border-radius: var(--r-cadre); border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: var(--t-question); font-weight: var(--p-normal); font-variant-numeric: tabular-nums; cursor: pointer; } .bg-s-touche.sourde { background: none; border-color: transparent; color: var(--muted); font-size: var(--t-chiffre); } .bg-s-ok { margin-top: var(--e-3); height: 56px; width: 100%; border: 0; border-radius: var(--r-cadre); background: var(--accent); color: var(--on-accent); font-size: var(--t-lu); font-weight: var(--p-appuye); cursor: pointer; } .bg-kpi.warn .v { color: var(--danger); } .bg-sec { font-size: var(--t-etiquette); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 12px 0 4px; } .bg-sec:first-child { margin-top: 0; } /* La LIGNE monte à --t-lu, pas seulement son champ (Adam, 30/08). Un `em` de `grid-template-columns` se calcule sur la police de la LIGNE, alors qu'un `em` de `width` se calcule sur celle de l'ÉLÉMENT : deux références pour la même unité. Monter le champ seul aurait élargi le nombre dans une case qui n'aurait pas bougé — c'est pour ça que le budget débordait et pas le stock. */ /* Une ligne qui mène quelque part doit le DIRE avant le clic. */ .bg-row.cliq { cursor: pointer; } .bg-row.cliq:hover { background: var(--panel2); } .bg-row { display: grid; grid-template-columns: 1fr 5.6em 5.6em 1.4em; gap: 6px; font-size: var(--t-lu); align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); } .bg-row .lib { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bg-row .lib small { display: block; color: var(--muted); font-size: var(--t-etiquette); } .bg-row .num { text-align: right; font-variant-numeric: tabular-nums; } .bg-row .num.rouge { color: var(--danger); } .bg-row .num.ok { color: var(--accent); } /* ⭐ LA TÊTE DE « LE MOIS » — DEUX CHIFFRES, ET DEUX SEULEMENT. ⚠ `--t-chiffre` (19px) et NON `--t-question` (24px) : ce dernier porte le grand chiffre de l'accueil, et la maquette dit que « le grand chiffre appartient à l'accueil, et à lui seul ». Deux chiffres de 24px ici referaient la confusion de l'écran du 05/09 — celui où deux cartes côte à côte ne disaient pas laquelle regarder. */ .bg-mois-tete { display: flex; gap: var(--e-3); padding: var(--e-2) 0 var(--e-3); } .bg-mt { flex: 1 1 0; min-width: 0; } .bg-mt .k { font-size: var(--t-etiquette); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .bg-mt .v { font-size: var(--t-chiffre); font-weight: var(--p-appuye); font-variant-numeric: tabular-nums; line-height: 1.2; } .bg-mt .v.ko { color: var(--danger); } .bg-mt .v.ok { color: var(--accent); } /* ⛔ UN SOLDE QUE PERSONNE N'A DIT PORTE LA QUESTION, PAS UN CHIFFRE (10/09). La case affichait « 0,00 € » — un zéro inventé, à l'endroit exact où l'écran doit avouer qu'il ne sait pas. C'est un BOUTON et pas un texte parce qu'un manque se répare par un geste (règle de dessin n° 8, validée par Adam). ⚠ Il occupe la colonne du montant (5,6em) et respecte la cible tactile : sous --cible-mini, on tape à côté. */ .bg-row .bg-manque { width: 100%; min-height: var(--cible-mini); font-size: var(--t-etiquette); padding: 2px 4px; border: 1px dashed var(--line); border-radius: var(--r-objet); background: transparent; color: var(--muted); cursor: pointer; } .bg-row .bg-manque:hover { color: var(--text); border-style: solid; } /* Le manque à la place du chiffre d'accueil : le libellé DIT quel compte, le bouton MÈNE au geste. Un bloc muet aurait exactement l'air d'un écran qui n'a rien à dire. */ .bg-manque-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); justify-content: space-between; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-objet); padding: var(--e-3); margin: var(--e-2) 0; } .bg-manque-bloc .lib { font-size: var(--t-lu); min-width: 0; } .bg-manque-bloc button { min-height: var(--cible-mini); } /* ⭐⭐ L'ACCUEIL DU BUDGET — refonte validée par Adam le 10/09. « L'interface doit être comme l'iPhone : une vue générale avec l'essentiel, puis des boutons pour remplir. » ① LE CHIFFRE QU'ON REGARDE, hors de la grille et SANS CADRE. Dans une grille, tous les blocs se valent : y loger le solde lui donnerait le poids d'un bouton de réglage — et c'est exactement le défaut de l'écran du 05/09, où deux cartes côte à côte ne disaient pas laquelle regarder. *Ce qu'on REGARDE n'est pas ce qu'on TOUCHE.* */ .bg-avoir { grid-column: 1 / -1; text-align: center; padding: var(--e-3) 0 var(--e-2); } .bg-avoir .k { font-size: var(--t-etiquette); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } /* ⚠ `--t-question` (24px) EST LE PLUS GRAND DE L'ÉCHELLE, et c'est pour ça qu'il est ici : son commentaire dit « la scène est à elle », ce qui décrit exactement ce chiffre. Son NOM est étroit — il est né pour un quiz — mais l'échelle typographique n'a pas de taille au-dessus, et en inventer une est un choix de forme qui appartient à Adam. *Mon premier jet écrivait 34px : le garde de l'échelle l'a refusé, à raison — une taille hors échelle ne se voit pas comme une faute, elle se voit comme un écran un peu différent des autres.* */ .bg-avoir .v { font-size: var(--t-question); font-weight: var(--p-appuye); font-variant-numeric: tabular-nums; line-height: 1.15; } .bg-avoir .v.gris { color: var(--muted); } .bg-avoir .v.ko { color: var(--danger); } /* « Vraiment libre » NE DISPARAÎT PAS, il se replie — et il est plus PETIT, ce qui est la condition de la règle n° 1 : deux chiffres de même taille obligeraient à choisir, et c'est ce qui a fait échouer l'écran du 05/09. */ .bg-avoir-libre, .bg-avoir-manque { margin-top: 6px; min-height: var(--cible-mini); font-size: var(--t-etiquette); padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-objet); background: transparent; color: var(--muted); cursor: pointer; } .bg-avoir-libre:hover, .bg-avoir-manque:hover { color: var(--text); } /* ② LES HUIT PORTES. Deux colonnes, blocs CARRÉS — le nombre pair ferme la grille sans case orpheline (Adam : « ça tombe bien, on ferme l'écran avec un chiffre pair »). */ /* ⛔ DES RECTANGLES, PAS DES CARRÉS — correction du 11/09, jugée par Adam sur l'écran réel : « le principe est très bon, mais la surface blanche est beaucoup trop grande, ça fait bizarre sur mobile et sur PC ». Mon premier jet posait `aspect-ratio: 1/1`. La maquette le justifiait sur un cadre de téléphone de 390 px, où un carré fait ~185 px de côté ; mais `#budget` occupe toute la largeur de son conteneur, donc sur un grand écran le MÊME carré fait 300 ou 400 px de HAUT pour deux lignes de texte. *Une proportion n'est pas une taille : elle se comporte autrement à chaque largeur, et c'est ce que la maquette à cadre fixe ne pouvait pas montrer.* ⚠ La hauteur est désormais FIXE et la largeur seule respire : le bloc reste lisible partout au lieu d'être juste dans un cas. */ .bg-portes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin-top: var(--e-2); /* Sur grand écran, la grille cesse de s'étaler : sans cette borne, deux colonnes sur 900 px donnent des barres de 440 px de long pour 72 px de haut — l'autre façon de fabriquer du vide. */ max-width: 560px; margin-inline: auto; } .bg-porte { min-height: 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: var(--e-3); text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-objet); color: var(--text); cursor: pointer; } .bg-porte .t { font-size: var(--t-lu); font-weight: var(--p-appuye); } .bg-porte .s { font-size: var(--t-etiquette); color: var(--muted); } .bg-porte:hover { background: var(--panel2); } /* ⚠ LA COULEUR N'EST QUE SUR LES DEUX GESTES QUOTIDIENS (règle de dessin n° 6). Sept teintes ont été essayées et jugées par Adam : « c'est un sapin de Noël ». Au-delà de deux, plus aucune ne veut rien dire. *La hiérarchie s'obtient en retirant, pas en ajoutant.* ⚠ ET SORTIE N'EST PAS ROUGE : dépenser n'est pas une erreur, et le rouge doit rester lisible le jour où quelque chose va vraiment mal. ⚠ Les deux teintes sont EMPRUNTÉES aux repères de tiroir du menu (`--c-vert`, `--c-ambre`) au lieu d'être écrites en dur : elles existent déjà en version claire ET foncée, donc les quatre ambiances suivent. Une couleur en dur serait juste dans une ambiance et fausse dans les trois autres. */ .bg-porte.entree { border-color: var(--c-vert); } .bg-porte.entree .t { color: var(--c-vert); } .bg-porte.sortie { border-color: var(--c-ambre); } .bg-porte.sortie .t { color: var(--c-ambre); } /* ⭐ « MES COMPTES » — une CARTE par compte (maquette du 10/09), et non plus une ligne de tableau. Un tableau range des chiffres comparables ; ici chaque compte est un objet avec son état, ses explications et ses gestes — c'est ce qui rendait les actions illisibles quand tout devait tenir sur une rangée. */ .bg-carte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-objet); padding: var(--e-3); margin-bottom: var(--e-2); } .bg-carte .tete { flex: 1 1 55%; min-width: 0; } .bg-carte .nom { font-size: var(--t-lu); font-weight: var(--p-appuye); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bg-carte .quoi { font-size: var(--t-etiquette); color: var(--muted); } /* ⚠ LE SOLDE EST EN `--t-chiffre` (19px) ET PAS EN `--t-question` (24px) : le plus gros du module appartient à l'accueil, et à lui seul. *Deux chiffres de même taille dans deux écrans différents rouvrent la confusion que la refonte vient de fermer.* */ .bg-carte .montant { margin-left: auto; font-size: var(--t-chiffre); font-weight: var(--p-appuye); font-variant-numeric: tabular-nums; } .bg-carte .montant.ko { color: var(--danger); } /* Le manque prend la place du montant, et il se LIT comme une phrase : un zéro se lit comme un fait. */ .bg-carte .manque { margin-left: auto; font-size: var(--t-corps); color: var(--muted); } .bg-carte .quand { flex: 1 1 100%; font-size: var(--t-etiquette); color: var(--muted); } .bg-carte .note { flex: 1 1 100%; margin: 0; font-size: var(--t-note); color: var(--muted); } .bg-carte-geste { min-height: var(--cible-mini); padding: 4px 10px; font-size: var(--t-etiquette); background: transparent; border: 1px solid var(--line); border-radius: var(--r-objet); color: var(--muted); cursor: pointer; } .bg-carte-geste:hover { color: var(--text); border-color: var(--line2); } /* ③ LE RETOUR — visible, jamais un geste deviné (règle n° 4). ⛔⛔ CETTE PHRASE ÉTAIT VRAIE COMME INTENTION ET FAUSSE COMME COMPORTEMENT, pendant des semaines : le bouton qu'elle décrit cumulait cinq pâleurs et personne ne l'a lu contre le rendu. *Une intention écrite dans un commentaire n'est pas un comportement — le seul juge est l'appelant*, et ici l'appelant est l'œil d'Adam, qui a mis le défaut en mots le 12/09. Tout ce qui l'habille vit désormais dans la règle de navigation, trois cents lignes plus haut. Ne reste ici que ce qui n'appartient qu'à lui : l'air sous le bouton, et sa mise en forme propre. */ .bg-retour { margin-bottom: var(--e-2); } /* Case modifiable : elle DOIT se voir comme telle (un champ invisible n'est jamais essayé), sans pour autant transformer le tableau en formulaire — d'où le soulignement discret. */ .bg-row input.cell { width: 100%; background: none; color: var(--text); border: 0; border-bottom: 1px dashed var(--line2); border-radius: 0; padding: 3px 2px; font-family: inherit; text-align: right; font-variant-numeric: tabular-nums; outline: none; } .bg-row input.cell:focus { border-bottom-color: var(--accent); background: var(--panel); } .bg-row input.cell:disabled { border-bottom-color: transparent; color: var(--muted); } .bg-row .kill { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: var(--t-corps); /* Elle faisait ~20px de haut : on tapait a cote. --cible-mini et non --cible, parce que 44px casserait la hauteur de la ligne elle-meme -- c'est la seule derogation prevue par l'echelle. */ min-height: var(--cible-mini); min-width: var(--cible-mini); } .bg-row .kill:hover { color: var(--danger); } /* ⛔⛔ LE ✕ TOMBAIT SUR UNE DEUXIÈME LIGNE (capture d'Adam, 12/09 à 21h31) : `.bg-row` est une GRILLE À QUATRE COLONNES, et une échéance NON RÉALISÉE porte CINQ enfants depuis le lot du 12/09 au matin — libellé, vide, montant, ✓, ✕. *Le cinquième ne déborde pas : il passe au rang suivant, dans la première colonne, et la carte double de hauteur autour d'un bouton qui n'a plus l'air d'appartenir à quoi que ce soit.* ⚠ LE CORRECTIF N'ÉLARGIT PAS LA GRILLE, ET C'EST DÉLIBÉRÉ : `.bg-row` sert PARTOUT dans le budget (journal, comptes, objectifs, dettes, enveloppes). Lui ajouter une cinquième colonne changerait toutes ces lignes pour réparer une seule famille. *On répare là où le défaut est, jamais une marche au-dessus.* Les deux boutons comptent désormais pour UN enfant. */ .bg-row .bg-row-gestes { display: flex; align-items: center; gap: 2px; justify-content: flex-end; } /* ⛔ LES CARTES DU TÉLÉPHONE — ET LEUR PLACE EST LE CORRECTIF (07/09). Le lot J avait écrit ces quatre lignes DANS le grand @media du haut, déclaré AVANT la base ci-dessus. À spécificité égale, l'ordre SOURCE décide — @media ou pas : la base gagnait sur `padding`, `grid-template-columns` et la couleur du trait du bas, et seul passait ce qu'elle ne dit PAS (le fond, la bordure, les coins). D'où une carte arrondie dont le texte touchait les deux bords, dont le trait du bas n'avait pas la couleur des trois autres, et dont les libellés étaient coupés en « … » au lieu de passer à la ligne. ⚠ C'EST LE DÉFAUT DU « + » MORT DU 06/09, DANS LE MÊME BLOC, à huit lignes du commentaire qui explique cette règle exacte — réparé pour les deux FAB sans que le jumeau soit regardé. *Un correctif qui ne cherche pas ses frères en laisse un.* Gardé par `test_css_ancrage.py` (l'ordre source, BORNES DE LARGEUR COMPARÉES : deux @media exclusifs ne sont pas un défaut, et un garde qui crie sur un cas légitime apprend aux autres à l'ignorer). */ @media (max-width: 640px) { /* « les tableaux deviennent des cartes » (lot J, maquette bloc ⑩) : la grille GARDE ses quatre colonnes — rien à recâbler — elles passent en `auto`, et la ligne prend bordure, coins et respiration. */ .bg-row { grid-template-columns: 1fr auto auto auto; gap: 9px; background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r-objet); border-bottom: 1px solid var(--line2); padding: 9px 11px; margin-bottom: 6px; } .bg-row .lib { white-space: normal; } } .bg-tot { display: flex; justify-content: space-between; font-weight: 600; padding: 6px 0 2px; border-top: 1px solid var(--line2); font-variant-numeric: tabular-nums; } /* Barre de remplissage : elle dit d'un coup d'œil ce qu'un nombre demande de calculer. Rouge dès le dépassement. */ /* ÉCRETÉ : sur 3 px de haut, 2px et 999px dessinent le même trait — le navigateur ramène tout rayon à la moitié de la hauteur. Le choix ne portait pas sur le dessin, seulement sur le nom. */ .bg-bar { height: 3px; background: var(--line); border-radius: var(--r-plein); overflow: hidden; } .bg-bar i { display: block; height: 100%; background: var(--accent); } .bg-bar.over i { background: var(--danger); } .bg-alertes { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--t-note); } .bg-vide { color: var(--muted); padding: 18px 2px; line-height: 1.5; } .bg-recurrent input { width: 18px; height: 18px; accent-color: var(--accent); } /* ⚠ UNE SEULE REGLE POUR LES DEUX ZONES, jamais une copie : la barre de saisie du bas et le formulaire des comptes ont le meme champ, et deux definitions du meme style finissent par diverger -- c'est celle qu'on ne regarde pas qui a tort. */ .bg-add input, .bg-add select, .bg-form input, .bg-form select, .bg-trf select, .bg-champ input, .bg-champ select, .bg-part input { min-width: 0; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-objet); padding: 9px 10px; font-size: 16px; /* même règle anti-zoom iOS que le composeur */ font-family: inherit; outline: none; /* 44px : la règle du produit (`--cible`). Ils faisaient ~40 — c'est leur padding qui les portait, pas une hauteur déclarée. Champs ET boutons prennent la MÊME, sinon la barre reste décalée de 4px et ça se voit autant que ça se sent (lot 4, 07/09). */ min-height: var(--cible); } .bg-add #bg-amount { width: 6.5em; } .bg-add #bg-cat { flex: 1; } .bg-add input:focus, .bg-form input:focus, .bg-trf select:focus { border-color: var(--accent); } /* ⛔ CES QUATRE-LÀ FAISAIENT ~19px DE HAUT, ET RIEN NE LE DISAIT. `padding: 0 12px` sans hauteur déclarée : un bouton fait alors la hauteur de sa ligne de texte. Les champs de la même barre en font 44, la règle du produit dit 44 (`--cible`). ⚠ Le défaut était DÉJÀ CONNU quarante lignes plus haut : `.bg-row .kill` porte le commentaire « elle faisait ~20px de haut : on tapait à côté ». Trouvé, réparé — sur UN seul bouton. ⚠⚠ ET LE RELEVÉ QUI LES A TROUVÉS EN A D'ABORD ACCUSÉ DEUX INNOCENTS : `.ag-add button` et `#sec-bloc .sec-ligne button` n'ont pas de hauteur non plus, mais leur parent est un conteneur flex SANS `align-items` (ou en `stretch`) — ils prennent donc la hauteur de leur champ. *Un relevé qui ignore le parent accuse du code sain.* Le garde de `test_fenetres_ui.js` regarde le parent. */ .bg-add button, .bg-form button, .bg-trf button, .bg-deplie button { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-objet); padding: 0 14px; font-size: 14px; cursor: pointer; white-space: nowrap; min-height: var(--cible); } .bg-add button:hover, .bg-form button:hover, .bg-trf button:hover, .bg-deplie button:hover { border-color: var(--accent); } .bg-form input { flex: 1 1 9em; min-width: 9em; } .bg-form input[type="number"] { flex: 0 1 5em; min-width: 5em; } /* L'ÉTIQUETTE D'UN CHAMP DE DATE, COLLÉE À LUI. Le couple est UN item du flex, donc l'enveloppement ne peut pas les séparer — sinon « pour le » resterait un jour en fin de ligne à annoncer un champ parti au rang suivant. 11em et non 9 : le mot prend sa place, et la cible cliquable grandit d'autant. */ .bg-form .bg-form-quand { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 11em; min-width: 11em; } /* ─── LE TRANSFERT — le dépliant de la barre de saisie (lot G6) ── ⚠ `[hidden]` D'ABORD, ET CE N'EST PAS UNE PRÉCAUTION : `display: flex` l'emporte sur l'attribut `hidden`, et c'est exactement le défaut du 29/08 — des boutons réservés visibles pour tout le monde, invisible depuis un compte qui a tous les droits. */ .bg-trf[hidden] { display: none; } .bg-trf-ch select { max-width: 11em; } .bg-deplie .bg-form { padding: 4px 0; flex-wrap: wrap; } .bg-champ input, .bg-champ select { max-width: 12em; }