@maboussoleaidant/design-system 0.1.39 → 0.1.41

package/AGENTS.md

@@ -233,6 +233,8 @@ Utiliser comme `shadow-{name}`.
 | `--mba-shadow-xs` | `xs` |
 | `--mba-shadow-sm` | `sm` |
 | `--mba-shadow-md` | `md` |
+| `--mba-shadow-footer` | `footer` |
+| `--mba-shadow-footer-pro` | `footer-pro` |
 | `--mba-shadow-inner` | `inner` |
 
 <!-- AUTO-GENERATED:tokens-mapping END -->

package/CHANGELOG.md

@@ -6,6 +6,77 @@ Format inspiré de [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/). Ver
 
 ---
 
+## [0.1.41] — 2026-09-15
+
+Mise en conformité du **footer** avec la maquette : coins hauts arrondis et ombre portée. **100 % rétrocompatible** (aucune classe modifiée, aucun changement de structure HTML).
+
+### 💅 Style
+
+- **`.mba-footer`** (`src/components/_footer.css`) — ajout de `border-radius` et `box-shadow`.
+  - `border-radius: var(--mba-radius-sm) var(--mba-radius-sm) 0 0` → 16 px sur les coins hauts uniquement, coins bas laissés droits.
+  - `box-shadow: var(--mba-shadow-footer)` → ombre projetée **vers le haut**, le footer étant ancré en bas de page.
+  - Coins hauts **en miroir du `.mba-header`**, qui arrondit ses coins bas avec le même `--mba-radius-sm`. Les deux extrémités de page se répondent désormais.
+  - `.mba-footer--pro` reçoit `--mba-shadow-footer-pro`, déclinaison bleue de la même ombre.
+  - Vérifié sur desktop / tablette (768 px) / mobile (375 px), variantes aidant et pro.
+
+### ✨ Nouveaux tokens
+
+Ombres **sémantiques teintées marque** (`src/tokens/_shadows.css`), hors échelle d'élévation : celle-ci est grise (Grey 400) et à double couche, alors que ces deux ombres sont monocouche et colorées.
+
+- **`--mba-shadow-footer`** — `0 -4px 8px 8px rgba(112, 57, 115, 0.04)`, soit Primary 500 (`#703973`, la couleur déposée) à 4 %. Transcription du style Figma « Footer aidant ».
+- **`--mba-shadow-footer-pro`** — même géométrie en Primary Pro 500 (`#395172`) à 4 %.
+
+Exposés côté Tailwind via `src/tailwind-preset.css` → `shadow-footer` et `shadow-footer-pro`.
+
+### 📐 Conteneur de page unifié (header + footer)
+
+Le header et le footer utilisaient deux modèles de conteneur incompatibles : le header avait `max-width: 80rem` (1280 px) avec un padding horizontal fixe de 80 px, le footer `max-width: 1120px` avec un padding horizontal **nul** au-delà de 768 px. Leurs contenus ne s'alignaient qu'à partir de 1280 px de viewport, et la gouttière du footer s'effondrait complètement en dessous de 1120 px — logo collé au bord de l'écran.
+
+- **Nouveau token `--mba-container-gutter`** (`src/tokens/_spacing.css`) — 16 px par défaut, 80 px à partir de 768 px.
+- **`.mba-header__container`**, **`.mba-footer__main`** et **`.mba-footer__legal`** partagent désormais `box-sizing: content-box`, `max-width: var(--mba-container-width)` et `padding-inline: var(--mba-container-gutter)`.
+  - `content-box` est nécessaire : le `border-box` global du preflight aurait sinon rogné le contenu à 1120 px moins les gouttières.
+
+Position du bord gauche du logo, avant → après :
+
+| Viewport | Header | Footer |
+|---|---|---|
+| 1440 px | 160 → 160 px | 160 → 160 px |
+| 1200 px | 80 → 80 px | 40 → **80 px** |
+| 1023 px | 80 → 80 px | 0 → **80 px** |
+| 375 px | 24 → **16 px** | 16 → 16 px |
+
+Le rendu au-delà de 1280 px est **inchangé** pour les deux composants (1120 px de contenu utile). Les écarts se résorbent en dessous, et la gouttière ne tombe plus jamais à zéro.
+
+### 🍔 Bascule burger du header remontée à 1130 px
+
+La nav horizontale ne tenait plus sur la ligne du logo bien avant l'ancien seuil de 768 px : le dernier item (« Espace partenaire ») débordait du conteneur. Le bloc responsive de `_header.css` est scindé en **deux seuils découplés** :
+
+- **1130 px** — bascule nav → burger (`__nav`, `__burger`, `__mobile-menu`, et la hauteur fixe du dropdown Partenaire en desktop).
+- **768 px** — traitement téléphone conservé tel quel (logo à 24 px, ombre retirée, rythme vertical resserré).
+
+Ce découplage est délibéré : appliquer le traitement téléphone dès 1130 px rapetissait le logo et supprimait l'ombre sur un écran de portable.
+
+| Viewport | Nav | Burger | Logo | Ombre |
+|---|---|---|---|---|
+| 1131 px | visible | masqué | 32 px | oui |
+| 1130 px | masquée | **visible** | 32 px | oui |
+| 769 px | masquée | visible | 32 px | oui |
+| 768 px | masquée | visible | **24 px** | **non** |
+
+---
+
+## [0.1.40] — 2026-08-07
+
+Correctif de **cascade layers**. **100 % rétrocompatible** (aucune classe modifiée).
+
+### 🐛 Correctif
+
+- **Ordre des `@layer` figé** (`src/main.css`) — ajout de `@layer theme, base, components, utilities;` en 1re règle du CSS compilé.
+  - **Problème** : sans ordre déclaré, les layers étaient ordonnés par apparition (`components` puis `base`) → le reset de `@layer base` (ex. `button { background-color: transparent }`, `a { … }`) **écrasait** les composants `.mba-*` de `@layer components`. Symptômes côté consommateur : `.mba-btn` / `.mba-btn-light` / `.mba-input-icon` / `.mba-btn-to-top` sans fond ni couleur, `.is-hidden` sans effet, liens `.mba-breadcrumb__link` en mauvaise couleur — **y compris dans un Shadow DOM** important ce fichier.
+  - **Correction** : priorité croissante `theme < base < components < utilities` → les composants gagnent enfin sur le reset, comme attendu. Débloque l'adoption des composants DS dans `mba_front` sans override local.
+
+---
+
 ## [0.1.39] — 2026-08-07
 
 Lot de composants **« Ma vie d'aidant »** (publié en patch pour éviter des publications en cascade). **100 % rétrocompatible** : que des ajouts, aucune classe `.mba-*` existante modifiée de façon cassante. Tout est **CSS pur** (zéro JS dans le DS), tokens uniquement, accessible (0 violation a11y sur les nouvelles stories).