@maboussoleaidant/design-system 0.1.44 → 0.1.45

package/CHANGELOG.md

@@ -6,6 +6,31 @@ Format inspiré de [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/). Ver
 
 ---
 
+## [0.1.45] — 2026-09-18
+
+Correctif de **netteté des logos** (header et footer). **100 % rétrocompatible** (aucune classe modifiée).
+
+### 🐛 Correctif
+
+- **`.mba-header__logo-img`** et **`.mba-footer__logo`** — `max-width: 227.92px` remplacé par `max-width: 100%`.
+  - **Problème** : les SVG de logo ont un `viewBox` de **228** × 32, mais la borne CSS valait `227.92px` — une valeur relevée dans Figma. Le navigateur rognait donc l'image à **227,9140625 px** de large pour 32 px de haut : une largeur **fractionnaire, hors grille pixel**, et un ratio de 7,12231 au lieu de 7,125. Le SVG était rasterisé en sous-pixel, d'où un rendu flou — particulièrement visible sur la micro-typographie « RETRAITE COMPLÉMENTAIRE ».
+  - Le défaut touchait le footer **à toutes les largeurs**, et le header en desktop.
+  - **Correction** : la hauteur pilote seule, le ratio natif est respecté et les dimensions retombent sur des entiers.
+
+- **`.mba-footer__logo`** — ajout de `align-self: flex-start` et `width: auto`.
+  - `.mba-footer__brand` étant un flex en colonne, son `align-items: stretch` par défaut étirait l'image sur toute la largeur dès que la borne en pixels disparaissait (jusqu'à un ratio de 11,19 à 390 px). `align-self` la ramène à sa largeur intrinsèque.
+
+Dimensions rendues après correction, vérifiées dans le DOM sur les deux variantes (aidant et pro) :
+
+| Composant | 1440 px | 390 px | 320 px |
+|---|---|---|---|
+| Logo header | 228 × 32 | 171 × 24 | 171 × 24 |
+| Logo footer | 228 × 32 | 228 × 32 | 228 × 32 |
+
+Ratio constant à **7,125**, identique au `viewBox`, et toutes les valeurs sur la grille pixel.
+
+---
+
 ## [0.1.44] — 2026-09-15
 
 L'**infobox du dropdown** devient desktop uniquement. Rétrocompatible pour toute app qui ne l'émettait pas dans son menu mobile.

package/dist/mba-design-system.css

@@ -3543,12 +3543,15 @@ button.mba-input-icon__icon:hover {
 }
 
 .mba-header__logo-img {
-  max-width: 227.92px;
   /* width:auto neutralise l'attribut width= du balisage : sans lui, la
      hauteur réduite en mobile (24px) écraserait le logo au lieu de le
-     redimensionner. La hauteur pilote, le ratio suit. */
+     redimensionner. La hauteur pilote, le ratio suit.
+     max-width en % et non en px : une borne de 227.92px rognait le SVG
+     (viewBox 228x32) à 227.914px, soit une largeur fractionnaire hors
+     grille pixel — d'où un rendu flou. */
   width: auto;
   height: 32px;
+  max-width: 100%;
   display: block;
 }
 
@@ -4561,8 +4564,16 @@ button.mba-input-icon__icon:hover {
 }
 
 .mba-footer__logo {
-  max-width: 227.92px;
+  /* Même correctif que .mba-header__logo-img : la borne de 227.92px rognait
+     le SVG (viewBox 228x32) à 227.914px, largeur fractionnaire hors grille
+     pixel, donc rendu flou.
+     align-self indispensable ici : .mba-footer__brand est un flex en colonne,
+     dont le stretch par défaut étirait l'image sur toute la largeur dès que
+     la borne en pixels a disparu. */
+  align-self: flex-start;
+  width: auto;
   height: 32px;
+  max-width: 100%;
   display: block;
 }