Corrige une régression fonctionnelle : revient à Bulma 1.0.2 (plus de Sass)

L'utilisateur a signalé des bugs réels en jeu après la refonte design
system : jauges qui ne se remplissent plus, conditions de visibilité
cassées sur une carte (enveloppe ouverte/fermée affichées en même temps).
Racine du problème : Phase A avait basculé Bulma de 1.0.2 (CDN d'origine)
vers 0.9.4, seule version compatible avec libsass (1.0.2 utilise le
système de modules @use/@forward que libsass ne sait pas compiler). Or
screens/rendering/render_jauge.py pilote le remplissage d'une jauge en
fixant en ligne --bulma-progress-value-background-color — une variable
CSS qui n'existe QUE dans le nouveau système de theming de Bulma 1.x,
absente de 0.9.4. Aucune perte de données : les champs d'objet étaient
toujours intacts en base (vérifié directement sur projects/test/game.db)
— uniquement un problème de rendu/comportement en jeu.

Correction : revient à Bulma 1.0.2, vendoré tel quel et non modifié
(static/vendor/bulma.min.css, ~677 Ko, auto-hébergé — toujours aucune
dépendance CDN). Bulma 1.x expose déjà tout son thème via de vraies
variables CSS (--bulma-primary-h/-s/-l, --bulma-radius...), justement
conçues pour être surchargées après coup SANS recompilation Sass —
styles/bulma-override.css les redéfinit avec la palette Forge (teintes
HSL calculées à partir des couleurs de la charte). build_css.py devient
un simple concaténage de 4 fichiers (bulma.min.css + bulma-override.css
+ forge-tokens.css + forge-custom.css), plus besoin de libsass ni
d'aucun compilateur — supprimé de requirements.txt. styles/bulma/ (source
Sass 0.9.4 vendorée en Phase A) et styles/forge-theme.scss supprimés.

Nouvelle règle ajoutée en commentaire dans bulma-override.css : ne plus
jamais changer de version de Bulma sans `grep -rn "\-\-bulma-" screens/
templates/` d'abord — cette dépendance n'est pas que visuelle.

197 tests toujours verts (ils ne couvrent que le HTML généré, jamais le
rendu réel — c'est pour ça que cette régression n'avait pas été détectée
avant que l'utilisateur ne la signale en jouant pour de vrai).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-29 08:40:16 +02:00
co-authored by Claude Sonnet 5
parent eaebc555d3
commit c60884ec46
74 changed files with 701 additions and 19301 deletions
+142
View File
@@ -0,0 +1,142 @@
/* bulma-override.css — palette Forge appliquée à Bulma 1.0.2 (vendoré tel
quel, non modifié, dans static/vendor/bulma.min.css) SANS recompilation
Sass : Bulma 1.x expose tout son thème via de vraies variables CSS
(--bulma-primary-h/-s/-l, --bulma-radius...), conçues justement pour être
surchargées après coup — voir regles/FORGE_ENGINE_TEMPLATE_BULMA.md, §6.
Chargé APRÈS bulma.min.css (voir build_css.py) : ce fichier ne fait que
redéfinir ses variables, jamais les siennes propres.
ATTENTION (leçon de la première version de ce chantier) : du code Python
de rendu du jeu (screens/rendering/render_jauge.py) fixe en ligne
--bulma-progress-value-background-color pour piloter le remplissage
d'une jauge — Bulma 1.x est donc une DÉPENDANCE FONCTIONNELLE réelle de
l'app, pas seulement un habillage visuel. Ne plus jamais changer de
version de Bulma sans vérifier `grep -rn "\-\-bulma-" screens/ templates/`
d'abord. */
:root {
--bulma-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
--bulma-radius: 10px;
--bulma-radius-small: 8px;
--bulma-radius-medium: 12px;
--bulma-radius-large: 16px;
--bulma-radius-rounded: 999px;
--bulma-primary-h: 14deg;
--bulma-primary-s: 100%;
--bulma-primary-l: 59%;
--bulma-link-h: 14deg;
--bulma-link-s: 100%;
--bulma-link-l: 59%;
--bulma-info-h: 217deg;
--bulma-info-s: 91%;
--bulma-info-l: 60%;
--bulma-success-h: 160deg;
--bulma-success-s: 84%;
--bulma-success-l: 39%;
--bulma-warning-h: 39deg;
--bulma-warning-s: 100%;
--bulma-warning-l: 56%;
--bulma-danger-h: 4deg;
--bulma-danger-s: 86%;
--bulma-danger-l: 58%;
/* Un seul teinte partagée par tous les fonds (main/bis/ter/bordures),
seule la LUMINOSITÉ varie — c'est le modèle natif de Bulma 1.x, calé
ici sur les valeurs de la charte Forge (--forge-bg/-bg-secondary/
-card/-border, voir bulma-tokens.css). */
--bulma-scheme-h: 220deg;
--bulma-scheme-s: 26%;
--bulma-scheme-main-l: 6%;
--bulma-scheme-main-bis-l: 9%;
--bulma-scheme-main-ter-l: 12%;
--bulma-background-l: 12%;
--bulma-border-weak-l: 15%;
--bulma-border-l: 18%;
--bulma-text-weak-l: 60%;
--bulma-text-l: 93%;
--bulma-text-strong-l: 97%;
--bulma-text-title-l: 100%;
--bulma-box-radius: var(--bulma-radius-large);
--bulma-card-radius: var(--bulma-radius-large);
--bulma-navbar-height: 3.5rem;
}
/* Composants dont Bulma ne prévoit pas de variable dédiée (mise en page
propre au navbar/tableaux/onglets de l'app, badges maison) — voir §6 du
document de règles. */
.navbar {
background: var(--forge-bg-secondary);
border-bottom: 1px solid var(--forge-border);
}
.navbar-item.brand { gap: 8px; font-size: 1rem; }
.navbar-item, .navbar-link { color: var(--forge-text); }
.navbar-item.is-active, .navbar-item:hover, .navbar-link:hover {
color: var(--accent);
background: var(--forge-card);
}
.table thead th {
position: sticky;
top: 0;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.75rem;
}
.tabs.is-toggle li.is-active a { color: #14100c; }
.button.is-primary, button.primary {
background: var(--gradient);
border: none;
color: #14100c;
font-weight: 700;
}
.button.is-primary:hover, button.primary:hover { box-shadow: 0 6px 16px -6px var(--glow); }
.box, .card {
background: linear-gradient(180deg, var(--forge-card), var(--forge-bg-secondary));
box-shadow: none;
transition: box-shadow .15s ease;
}
.box:hover, .card:hover { box-shadow: 0 10px 25px -8px var(--glow); }
.forge-badge {
display: inline-block;
padding: 0.4rem 1rem;
border-radius: 999px;
background: rgba(255, 95, 46, 0.1);
border: 1px solid rgba(255, 95, 46, 0.35);
color: var(--accent);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.forge-badge.is-success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: var(--status-success); }
.forge-badge.is-danger { background: rgba(240, 68, 56, 0.12); border-color: rgba(240, 68, 56, 0.35); color: var(--status-danger); }
/* Titre H1 en dégradé signature — réservé aux pages d'accueil/marketing et
à l'écran de connexion (§3/§5). */
.forge-gradient-title {
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Pages d'authentification (login/register/2FA/mot de passe oublié) :
seul endroit du site, avec l'accueil marketing, où le H1 en dégradé et
la grille de fond fine sont autorisés — absents de tous les écrans de
travail (tableau de bord, éditeur...). */
body.authBody {
background:
radial-gradient(circle at 1px 1px, rgba(232, 236, 244, 0.06) 1px, transparent 0) 0 0/26px 26px,
var(--forge-bg);
}
.authScreen { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 3.5rem); padding: 2rem 1rem; }
.authCard { width: 100%; max-width: 440px; }
.authCard.authCard-wide { max-width: 500px; }
.authTitle { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0.5rem; }