@maboussoleaidant/design-system 0.1.40 → 0.1.42

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,91 @@ Format inspiré de [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/). Ver
 
 ---
 
+## [0.1.42] — 2026-09-15
+
+Alignement des **logos du header** sur ceux du footer. **100 % rétrocompatible** (aucune classe modifiée).
+
+### 🖼️ Logos du header unifiés avec le footer
+
+Le header et le footer référençaient deux jeux de logos distincts, de géométries différentes : `assets/logos/logo_mba_aidants.svg` et `logo_mba_partenaires.svg` (viewBox `0 0 143 21`) d'un côté, `assets/logo-mba-agirc-arrco.svg` et `-pro.svg` (viewBox `0 0 228 32`) de l'autre. Le CSS des deux composants étant identique (`max-width: 227.92px; height: 32px`), le logo du header rendait ~218 px de large contre 228 px pour celui du footer.
+
+Les deux variantes du header pointent désormais sur les fichiers du footer :
+
+| | MBA | Partenaire |
+|---|---|---|
+| Source | `assets/logo-mba-agirc-arrco.svg` | `assets/logo-mba-agirc-arrco-pro.svg` |
+| Rendu desktop | 228 × 32 | 228 × 32 |
+| Rendu mobile | 171 × 24 | 171 × 24 |
+
+**Corrige au passage un défaut de packaging** : `build:assets` ne copiait pas `src/assets/logos/`, si bien que les logos du header étaient **absents du package npm** — ils n'existaient que dans Storybook, qui sert `src/`. Les fichiers désormais utilisés sont bien livrés dans `assets/`. Le dossier `src/assets/logos/` n'est plus référencé.
+
+### 🐛 Correctif
+
+- **`.mba-header__logo-img`** (`src/components/_header.css`) — ajout de `width: auto`.
+  - **Problème** : le header réduit la hauteur du logo à 24 px sous 768 px. Dès qu'un balisage porte un attribut `width` (recommandé pour éviter le CLS), cette largeur restait figée et **écrasait le logo** — 228 × 24 au lieu du ratio, soit 9,5 contre 7,125 attendu.
+  - **Correction** : `width: auto` neutralise l'attribut, la hauteur pilote et le ratio suit. Vérifié à 1440 px (228 × 32) et 375 px (171 × 24), ratio constant à 7,12.
+
+---
+
+## [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).

package/dist/mba-design-system.css

@@ -374,6 +374,18 @@
      CONTAINER
      =========================================== */
   --mba-container-width: 70rem;   /* 1120px */
+
+  /* Gouttière latérale du conteneur de page.
+     Partagée par le header et le footer : leurs contenus
+     (logo en tête) restent alignés à toutes les largeurs
+     et ne se collent jamais au bord du viewport.
+     Valeur mobile par défaut, élargie à partir de md. */
+  --mba-container-gutter: 1rem;   /* 16px */
+}
+@media (min-width: 768px) {
+  :root {
+    --mba-container-gutter: 5rem; /* 80px */
+  }
 }
 /**
  * MBA Design System - Border Radius
@@ -432,6 +444,22 @@
     0 2px 24px 0 rgba(113, 113, 122, 0.04),
     1px 2px 24px 0 rgba(113, 113, 122, 0.08);
 
+  /* ===========================================
+     OMBRES SÉMANTIQUES (teintées marque)
+     Hors échelle d'élévation : couleur de marque
+     et non Grey 400, une seule couche.
+     =========================================== */
+
+  /* Footer — style Figma « Footer aidant »
+     0 -4px 8px 8px, Primary 500 (#703973) à 4 %
+     Offset Y négatif : le footer est ancré en bas
+     de page, son ombre remonte sur le contenu. */
+  --mba-shadow-footer: 0 -4px 8px 8px rgba(112, 57, 115, 0.04);
+
+  /* Footer variante Pro — même géométrie,
+     Primary Pro 500 (#395172) à 4 %. */
+  --mba-shadow-footer-pro: 0 -4px 8px 8px rgba(57, 81, 114, 0.04);
+
   /* ===========================================
      VALEURS UTILITAIRES
      =========================================== */
@@ -3495,9 +3523,13 @@ button.mba-input-icon__icon:hover {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--mba-space-md) 5rem; /* vertical: md (24px), horizontal: 80px */
-  max-width: 80rem; /* 1280px = 1120px de contenu + 2 x 80px de padding */
+  /* content-box : --mba-container-width borne le CONTENU, la gouttière
+     s'ajoute autour. Sans cela, le border-box global du preflight
+     rognerait le contenu à 1120px - 2 x gouttière. */
+  box-sizing: content-box;
+  max-width: var(--mba-container-width); /* 1120px de contenu */
   margin: 0 auto;
+  padding: var(--mba-space-md) var(--mba-container-gutter);
 }
 
 /* ===========================================
@@ -3512,6 +3544,10 @@ 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. */
+  width: auto;
   height: 32px;
   display: block;
 }
@@ -4082,21 +4118,23 @@ button.mba-input-icon__icon:hover {
 
 /* ===========================================
    RESPONSIVE
-   =========================================== */
-@media (max-width: 768px) {
-  .mba-header {
-    box-shadow: none; /* pas de shadow en mobile */
-  }
 
-  .mba-header__container {
-    padding: var(--mba-space-sm) var(--mba-space-md); /* 12px 16px */
-    justify-content: space-between;
-  }
+   Deux seuils distincts, volontairement découplés :
 
-  .mba-header__mobile-menu {
-    padding: var(--mba-space-sm) var(--mba-space-xs); /* top/bottom SM, left/right XS */
-  }
+   - 1130px — bascule nav horizontale → menu burger.
+     En dessous, la nav complète ne tient plus sur la ligne
+     du logo et le dernier item débordait du conteneur.
 
+   - 768px — traitement téléphone (logo réduit, ombre
+     retirée, rythme vertical resserré). Ces choix sont
+     propres au petit écran : les appliquer dès 1130px
+     rapetisserait le logo sur un portable.
+   =========================================== */
+
+/* -------------------------------------------
+   Bascule nav → burger
+   ------------------------------------------- */
+@media (max-width: 1130px) {
   .mba-header__nav {
     display: none;
   }
@@ -4105,16 +4143,12 @@ button.mba-input-icon__icon:hover {
     display: flex;
   }
 
-  .mba-header__logo-img {
-    height: 24px;
-  }
-
-  .mba-icon {
-    margin-top: var(--mba-space-xxs);
+  .mba-header__mobile-menu {
+    padding: var(--mba-space-sm) var(--mba-space-xs); /* top/bottom SM, left/right XS */
   }
 }
 
-@media (min-width: 769px) {
+@media (min-width: 1131px) {
   .mba-header__mobile-menu {
     display: none !important;
   }
@@ -4132,6 +4166,30 @@ button.mba-input-icon__icon:hover {
   }
 }
 
+/* -------------------------------------------
+   Traitement téléphone
+   ------------------------------------------- */
+@media (max-width: 768px) {
+  .mba-header {
+    box-shadow: none; /* pas de shadow en mobile */
+  }
+
+  .mba-header__container {
+    /* Gouttière héritée du token (16px sous md), seul le rythme
+       vertical est resserré en mobile. */
+    padding: var(--mba-space-sm) var(--mba-container-gutter);
+    justify-content: space-between;
+  }
+
+  .mba-header__logo-img {
+    height: 24px;
+  }
+
+  .mba-icon {
+    margin-top: var(--mba-space-xxs);
+  }
+}
+
 }
 /* end @layer components */
 /**
@@ -4428,6 +4486,10 @@ button.mba-input-icon__icon:hover {
  *
  * Footer principal avec logo, navigation, réseaux sociaux et mentions légales.
  *
+ * Coins hauts arrondis (--mba-radius-sm), en miroir du .mba-header qui
+ * arrondit ses coins bas avec la même valeur, et ombre projetée vers le haut
+ * (--mba-shadow-footer, style Figma « Footer aidant »).
+ *
  * Structure:
  * .mba-footer
  *   .mba-footer__main          - Section principale (flex, space-between)
@@ -4450,6 +4512,8 @@ button.mba-input-icon__icon:hover {
 .mba-footer {
   width: 100%;
   background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-sm) var(--mba-radius-sm) 0 0;
+  box-shadow: var(--mba-shadow-footer);
 }
 
 /* ===========================================
@@ -4457,9 +4521,12 @@ button.mba-input-icon__icon:hover {
    =========================================== */
 
 .mba-footer__main {
+  /* Conteneur commun avec .mba-header__container : même largeur de
+     contenu, même gouttière, donc logos alignés à toutes les largeurs. */
+  box-sizing: content-box;
   max-width: var(--mba-container-width);
   margin: 0 auto;
-  padding: var(--mba-space-xl) var(--mba-space-sm) var(--mba-space-sm);
+  padding: var(--mba-space-xl) var(--mba-container-gutter) var(--mba-space-sm);
   display: flex;
   flex-direction: column;
   gap: var(--mba-space-lg);
@@ -4467,7 +4534,7 @@ button.mba-input-icon__icon:hover {
 
 @media (min-width: 768px) {
   .mba-footer__main {
-    padding: var(--mba-space-xl) 0;
+    padding: var(--mba-space-xl) var(--mba-container-gutter);
   }
 }
 
@@ -4719,9 +4786,10 @@ button.mba-input-icon__icon:hover {
 
 
 .mba-footer__legal {
+  box-sizing: content-box;
   max-width: var(--mba-container-width);
   margin: 0 auto;
-  padding: var(--mba-space-md) var(--mba-space-sm);
+  padding: var(--mba-space-md) var(--mba-container-gutter);
   display: flex;
   flex-direction: column;
   gap: var(--mba-space-sm);
@@ -4729,7 +4797,6 @@ button.mba-input-icon__icon:hover {
 
 @media (min-width: 768px) {
   .mba-footer__legal {
-    padding: var(--mba-space-md) 0;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
@@ -4789,6 +4856,10 @@ button.mba-input-icon__icon:hover {
    PRO VARIANT
    =========================================== */
 
+.mba-footer--pro {
+  box-shadow: var(--mba-shadow-footer-pro);
+}
+
 .mba-footer--pro .mba-footer__contact,
 .mba-footer--pro .mba-footer__nav-link,
 .mba-footer--pro .mba-footer__legal-link {