@maboussoleaidant/design-system 0.1.17 → 0.1.19

package/dist/mba-design-system.css

@@ -104,6 +104,7 @@
      =========================================== */
   --mba-color-brick-light: #FCF4F0;
   --mba-color-brick: #AC5118;
+  --mba-color-infobox: #fef7e6;
 
   /* ===========================================
      CUSTOM PALETTE - Forest
@@ -188,6 +189,7 @@
      FONT WEIGHTS
      =========================================== */
   --mba-font-weight-regular: 400;
+  --mba-font-weight-medium: 500;
   --mba-font-weight-semibold: 600;
   --mba-font-weight-bold: 700;
   --mba-font-weight-extrabold: 800;
@@ -348,6 +350,7 @@
      =========================================== */
   --mba-space-0: 0;
   --mba-space-px: 1px;
+  --mba-space-gap-10: 10px;
 
   /* ===========================================
      CONTAINER
@@ -541,7 +544,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("../assets/fonts/OpenSans-Regular.woff2") format("woff2");
+  src: url("/assets/fonts/OpenSans-Regular.woff2") format("woff2");
 }
 
 @font-face {
@@ -549,7 +552,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("../assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
+  src: url("/assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
 }
 
 @font-face {
@@ -557,7 +560,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("../assets/fonts/OpenSans-Bold.woff2") format("woff2");
+  src: url("/assets/fonts/OpenSans-Bold.woff2") format("woff2");
 }
 
 @font-face {
@@ -565,7 +568,7 @@
   font-style: normal;
   font-weight: 800;
   font-display: swap;
-  src: url("../assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
+  src: url("/assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
 }
 
 /* ===========================================
@@ -578,7 +581,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("../assets/fonts/Congenial.woff2") format("woff2");
+  src: url("/assets/fonts/Congenial.woff2") format("woff2");
 }
 
 @font-face {
@@ -586,7 +589,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("../assets/fonts/Congenial-Medium.woff2") format("woff2");
+  src: url("/assets/fonts/Congenial-Medium.woff2") format("woff2");
 }
 
 @font-face {
@@ -594,7 +597,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("../assets/fonts/Congenial-Bold.woff2") format("woff2");
+  src: url("/assets/fonts/Congenial-Bold.woff2") format("woff2");
 }
 
 /**
@@ -618,13 +621,16 @@
   font-style: normal;
   font-weight: 100 700;
   font-display: block;
-  src: url('../assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
+  src: url('/assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
 }
 
 /* ===========================================
    BASE ICON CLASS
+   Wrappé dans @layer base pour permettre aux @layer components de l'overrider
    =========================================== */
 
+@layer base {
+
 .material-symbols-rounded {
   font-family: 'Material Symbols Rounded';
   font-weight: normal;
@@ -656,7 +662,6 @@
    =========================================== */
 
 /* Base icon (24px) */
-
 .mba-icon {
   font-size: 24px;
   width: 24px;
@@ -669,7 +674,6 @@
 }
 
 /* Small icon (16px) */
-
 .mba-icon--sm {
   font-size: 16px;
   width: 16px;
@@ -681,8 +685,26 @@
     'opsz' 20;
 }
 
-/* Fill variant */
+/* Extra-small icon (12px) */
+.mba-icon--xs {
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 20;
+}
+
+/* Accordion item icons: force inline-flex to override base inline-block */
+.mba-accordion__item-icon.material-symbols-rounded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 
+/* Fill variant */
 .mba-icon--fill,
 .material-symbols-rounded.mba-icon--fill {
   font-variation-settings:
@@ -693,7 +715,6 @@
 }
 
 /* Fill + Small */
-
 .mba-icon--sm.mba-icon--fill {
   font-variation-settings:
     'FILL' 1,
@@ -705,7 +726,6 @@
 /* ===========================================
    COLOR UTILITIES
    =========================================== */
-
 .mba-icon--primary {
   color: var(--mba-color-primary-500);
 }
@@ -730,6 +750,10 @@
   color: var(--mba-color-text-muted);
 }
 
+}
+
+/* end @layer base */
+
 /**
  * MBA Design System - Preflight
  *
@@ -1001,6 +1025,14 @@ a {
   transition: color var(--mba-transition-fast);
 }
 
+.mba-header--partenaire a {
+  color: var(--mba-color-primary-pro-500);
+}
+
+.mba-header--partenaire a:hover {
+  color: var(--mba-color-primary-pro-500);
+}
+
 a:hover {
   color: var(--mba-color-link-hover);
 }
@@ -1360,9 +1392,10 @@ a:hover {
 
 /* Deja-vu state */
 .mba-btn-pin.is-deja-vu {
-  border-color: var(--mba-color-grey-300);
-  background-color: var(--mba-color-grey-50);
-  color: var(--mba-color-grey-300);
+  box-shadow: var(--mba-shadow-xs);
+  border-color: var(--mba-color-white);
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-grey-400);
 }
 
 /* Activated state */
@@ -1638,8 +1671,11 @@ a:hover {
 
 .mba-card__icon {
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--mba-color-primary-500);
-  font-size: 24px;
+  font-size: var(--mba-font-size-md);
   transition: transform var(--mba-transition-base);
 }
 
@@ -1708,20 +1744,6 @@ a:hover {
   box-sizing: border-box;
 }
 
-.mba-carousel-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1px;
-  background: var(--mba-gradient-sunset);
-  border-radius: 24px 24px 8px 24px;
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
 
 .mba-carousel-card__title {
   font-family: var(--mba-font-family-text);
@@ -1768,20 +1790,6 @@ a:hover {
   transition: transform var(--mba-transition-slow), box-shadow var(--mba-transition-slow);
 }
 
-.mba-stats-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1px;
-  background: var(--mba-gradient-sunset);
-  border-radius: var(--mba-radius-md);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
 
 .mba-stats-card:hover {
   transform: translateY(-4px);
@@ -1936,7 +1944,7 @@ a:hover {
 }
 
 .mba-article-card__link .material-symbols-rounded {
-  font-size: 20px;
+  font-size: var(--mba-font-size-xs);
 }
 
 /* Grid pour article cards */
@@ -2443,7 +2451,7 @@ a:hover {
 
 /* Icone info */
 .mba-label__icon {
-  font-size: 16px;
+  font-size: var(--mba-font-size-xs);
   color: var(--mba-color-grey-400);
 }
 
@@ -2700,7 +2708,7 @@ a:hover {
   right: 0;
   display: none;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--mba-space-gap-10);
   padding: var(--mba-space-xs);
   border-radius: var(--mba-radius-2xs);
   background-color: var(--mba-color-white);
@@ -2763,6 +2771,8 @@ a:hover {
   display: inline-block;
   width: 42px;
   height: 24px;
+  box-shadow: var(--mba-shadow-xxs);
+  border-radius: 32px;
 }
 
 .mba-toggle input {
@@ -2791,6 +2801,7 @@ a:hover {
   left: 2px;
   top: 2px;
   background-color: var(--mba-color-white);
+  box-shadow: var(--mba-shadow-xxs);
   transition: all var(--mba-transition-slow);
   border-radius: 50%;
 }
@@ -2842,7 +2853,7 @@ a:hover {
 }
 
 .mba-input-icon__icon {
-  font-size: 16px;
+  font-size: var(--mba-font-size-xs);
   color: var(--mba-color-grey-400);
   margin-left: var(--mba-space-xs);
 }
@@ -2925,154 +2936,812 @@ button.mba-input-icon__icon:hover {
 
 /* end @layer components */
 
+/* @import "./_tags.css"; */
+
 /**
- * MBA Design System - Wave
- *
- * Élément décoratif ondulé réutilisable pour les transitions de sections.
- *
- * Classes:
- * - .mba-wave           - Wave de base (43px)
- * - .mba-wave--sm       - Petite wave (24px)
- * - .mba-wave--top      - Inversée (pour haut de section)
- * - .mba-wave--bottom   - Normale (défaut)
- * - .mba-wave--lavender - Couleur lavender
- * - .mba-wave--white    - Couleur blanche
- * - .mba-wave--beige    - Couleur beige
+ * MBA Design System - Header
  *
- * Usage:
- * <div class="mba-wave mba-wave--lavender"></div>
- * <div class="mba-wave mba-wave--sm mba-wave--lavender mba-wave--top"></div>
+ * Navigation principale avec dropdown et version mobile
+ * Source: Design System Figma
  */
 
 @layer components {
 
-.mba-wave {
-  display: block;
+/* ===========================================
+   HEADER BASE
+   =========================================== */
+.mba-header {
+  background-color: var(--mba-color-white);
+  border-radius: 0 0 var(--mba-radius-md) var(--mba-radius-md);
+  box-shadow: var(--mba-shadow-xs);
+  position: relative;
   width: 100%;
-  height: var(--mba-wave-height);
-  background-color: var(--mba-color-pastel-lavender);
-  -webkit-mask-image: var(--mba-wave-dip-up-mask);
-  -webkit-mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-  mask-image: var(--mba-wave-dip-up-mask);
-  mask-size: 100% 100%;
-  mask-repeat: no-repeat;
+  box-sizing: border-box;
 }
 
-/* Position variants */
-.mba-wave--top {
-  -webkit-mask-image: var(--mba-wave-dip-down-mask);
-  mask-image: var(--mba-wave-dip-down-mask);
+.mba-header__container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--mba-space-md) var(--mba-space-xl); /* 16px 32px */
+  max-width: var(--mba-container-width);
+  margin: 0 auto;
 }
 
-.mba-wave--bottom {
-  -webkit-mask-image: var(--mba-wave-dip-up-mask);
-  mask-image: var(--mba-wave-dip-up-mask);
+/* ===========================================
+   LOGO
+   =========================================== */
+.mba-header__logo {
+  display: flex;
+  align-items: center;
+  gap: var(--mba-space-xs); /* 8px */
+  text-decoration: none;
 }
 
-/* Size variants */
-.mba-wave--sm {
-  height: var(--mba-wave-sm-height);
-  -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
-  mask-image: var(--mba-wave-sm-dip-up-mask);
+.mba-header__logo-img {
+  max-width: 227.92px;
+  height: 32px;
+  display: block;
 }
 
-.mba-wave--sm.mba-wave--top {
-  -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
-  mask-image: var(--mba-wave-sm-dip-down-mask);
+/* ===========================================
+   NAVIGATION DESKTOP
+   =========================================== */
+.mba-header__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--mba-space-md);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-left: var(
+    --mba-space-lg
+  ); /* Espace cohérent entre logo et nav, nav alignée à gauche */
 }
 
-/* Color variants */
-.mba-wave--lavender {
-  background-color: var(--mba-color-pastel-lavender);
+.mba-header__nav-item {
+  position: relative;
 }
 
-.mba-wave--white {
-  background-color: var(--mba-color-white);
+.mba-header__nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--mba-space-xxs); /* 4px (gap texte/icone) */
+  padding: var(--mba-space-xxs) var(--mba-space-xs); /* 2XS (haut/bas), XS (gauche/droite) */
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-primary-900);
+  text-decoration: none;
+  border-radius: var(--mba-radius-sm);
+  transition: background-color var(--mba-transition-base),
+    color var(--mba-transition-base);
+  cursor: pointer;
+  background: none;
+  border: none;
+  white-space: nowrap;
 }
 
-.mba-wave--beige {
-  background-color: var(--mba-color-beige);
+.mba-header__nav-link:hover {
+  background-color: var(--mba-color-pastel-lavender);
+  color: var(--mba-color-primary-900);
 }
 
-.mba-wave--primary-50 {
-  background-color: var(--mba-color-primary-50);
+/* Header partenaire : ne pas passer le texte en violet au hover */
+.mba-header--partenaire .mba-header__nav-link:hover {
+  color: var(--mba-color-primary-pro-500);
+  background-color: var(--mba-color-pastel-bleuet);
 }
 
+/* Header partenaire : liens en Primary Pro par défaut */
+.mba-header--partenaire .mba-header__nav-link {
+  color: var(--mba-color-primary-pro-500);
 }
 
-/* end @layer components */
+.mba-header__nav-link--active {
+  background-color: var(--mba-color-pastel-lavender);
+  border-radius: var(--mba-radius-sm);
+  color: var(--mba-color-primary-900);
+}
 
-/**
- * MBA Design System - Section
- *
- * Section avec fond coloré et waves optionnelles en haut/bas.
- * Les waves sont générées via pseudo-éléments, pas besoin de HTML supplémentaire.
- *
- * Classes:
- * - .mba-section                    - Container de base
- * - .mba-section--lavender          - Fond lavender
- * - .mba-section--beige             - Fond beige
- * - .mba-section--primary-50        - Fond primary-50
- * - .mba-section--wave-top          - Wave en haut
- * - .mba-section--wave-bottom       - Wave en bas
- * - .mba-section--wave-both         - Waves en haut ET en bas
- * - .mba-section--wave-sm           - Petite wave (24px au lieu de 43px)
- * - .mba-section--wave-inset        - Padding ajusté pour que le contenu commence après la wave
- *
- * Usage:
- * <section class="mba-section mba-section--lavender mba-section--wave-both">
- *   <div class="mba-section__content">...</div>
- * </section>
- *
- * Petite wave:
- * <section class="mba-section mba-section--lavender mba-section--wave-both mba-section--wave-sm">
- *   ...
- * </section>
- */
+/* Icône dropdown (Material Symbols: arrow_drop_down / arrow_drop_up) */
+.mba-header__nav-link .mba-icon,
+.mba-header__mobile-nav-link .mba-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--mba-space-xxs);
+  color: var(--mba-color-primary-900);
+}
 
-@layer components {
+/* Variante partenaire : couleur de l'icône */
+.mba-header--partenaire .mba-header__nav-link .mba-icon,
+.mba-header--partenaire .mba-header__mobile-nav-link .mba-icon {
+  color: var(--mba-color-primary-pro-500);
+}
 
-.mba-section {
-  position: relative;
-  width: 100%;
+/* Lien avec dropdown ouvert : conserve le fond lavender comme l'état actif */
+.mba-header__nav-link--open {
+  background-color: var(--mba-color-pastel-lavender);
+  border-radius: var(--mba-radius-sm);
+  color: var(--mba-color-primary-900);
 }
 
-.mba-section__content {
-  position: relative;
-  z-index: 1;
-  max-width: var(--mba-container-width);
-  margin: 0 auto;
-  padding: var(--mba-space-xxl) 0;
+/* Variante partenaire : fond et couleur spécifiques quand le dropdown est ouvert */
+.mba-header--partenaire .mba-header__nav-link--open {
+  background-color: var(--mba-color-pastel-bleuet);
+  color: var(--mba-color-primary-pro-500);
 }
 
 /* ===========================================
-   WAVE INSET (opt-in)
-   Ajoute du padding pour que le contenu commence après la wave
+   DROPDOWN MENU
    =========================================== */
-.mba-section--wave-inset.mba-section--wave-top .mba-section__content,
-.mba-section--wave-inset.mba-section--wave-both .mba-section__content {
-  padding-top: calc(var(--mba-wave-height) + var(--mba-space-xxl));
+.mba-header__dropdown {
+  position: absolute;
+  top: calc(100% + var(--mba-space-lg)); /* 32px sous le lien */
+  left: 0;
+  width: 739px; /* Largeur Spécifique Figma dans le design system */
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-500);
+  border-radius: var(--mba-radius-sm);
+  box-shadow: var(--mba-shadow-sm);
+  padding: var(--mba-space-sm);
+  display: none;
+  z-index: 1000;
+  animation: dropdownFadeIn var(--mba-transition-base);
 }
 
-.mba-section--wave-inset.mba-section--wave-bottom .mba-section__content,
-.mba-section--wave-inset.mba-section--wave-both .mba-section__content {
-  padding-bottom: calc(var(--mba-wave-height) + var(--mba-space-xxl));
+.mba-header__dropdown--open {
+  display: block;
+  box-shadow: var(--mba-shadow-xs);
 }
 
-/* Wave inset pour petites waves */
-.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-top .mba-section__content,
-.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
-  padding-top: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--mba-space-xs)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-bottom .mba-section__content,
-.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
-  padding-bottom: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
+.mba-header__dropdown-title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-text);
+  margin: 0 0 var(--mba-space-xs) 0;
+  padding-bottom: var(--mba-space-sm);
+  border-bottom: 1px solid var(--mba-color-grey-50);
 }
 
-/* ===========================================
-   BACKGROUND COLORS
+/* Header partenaire : titre du dropdown (PrimaryPro-800), inchangé au hover */
+.mba-header--partenaire .mba-header__dropdown-title,
+.mba-header--partenaire .mba-header__dropdown-title:hover {
+  color: var(--mba-color-primary-pro-800);
+}
+
+.mba-header__dropdown-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-xxs);
+}
+
+.mba-header__dropdown-item {
+  display: flex;
+  align-items: flex-start;
+  text-decoration: none;
+  cursor: pointer;
+  position: relative;
+  border-radius: var(--mba-radius-sm);
+  border: 1px solid transparent;
+  gap: var(--mba-space-sm);
+  padding: var(--mba-space-xs);
+  transition: background-color var(--mba-transition-base);
+}
+
+
+
+.mba-header__dropdown-icon {
+  margin-top: var(--mba-space-xs);
+  padding: var(--mba-space-sm);
+  gap: var(--mba-space-gap-10);
+  flex-shrink: 0;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mba-color-pastel-lavender);
+  border-radius: var(--mba-radius-sm);
+  color: var(--mba-color-primary-500);
+}
+
+.mba-header__dropdown-icon .mba-icon {
+  font-size: var(--mba-font-size-md);
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-bottom: var(--mba-space-xxs);
+}
+
+/* Header partenaire : couleurs spécifiques des icônes du dropdown */
+.mba-header--partenaire .mba-header__dropdown-icon {
+  background-color: var(--mba-color-pastel-bleuet);
+  color: var(--mba-color-primary-pro-500);
+}
+
+.mba-header__dropdown-content {
+  flex: 1;
+  gap: var(--mba-space-xxs);
+}
+
+.mba-header__dropdown-label {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-900);
+  margin: 0 0 var(--mba-space-xxs) 0;
+  display: block;
+}
+
+/* Header partenaire : labels du dropdown en PrimaryPro-800 */
+.mba-header--partenaire .mba-header__dropdown-label {
+  color: var(--mba-color-primary-pro-800);
+}
+
+/* Header partenaire : labels du dropdown en PrimaryPro-800 */
+.mba-header--partenaire .mba-header__dropdown-description {
+  color: var(--mba-color-primary-pro-800);
+}
+
+.mba-header__dropdown-description {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-primary-900);
+  margin: 0;
+  line-height: var(--mba-leading-normal);
+}
+
+/* Wrapper pour layout côte à côte (gauche: titre + liste, droite: infobox) */
+.mba-header__dropdown-content-wrapper {
+  display: flex;
+  gap: var(--mba-space-md);
+  align-items: stretch; /* infobox s'étire sur toute la hauteur */
+  margin-top: var(--mba-space-xs);
+}
+
+.mba-header__dropdown-main {
+  flex: 1;
+  width: 437px;
+  gap: var(--mba-space-sm); /* 16px */
+}
+
+/* Infobox "S'informer pour mieux aider" */
+.mba-header__dropdown-infobox {
+  flex: 0 0 246px;
+  background-color: var(--mba-color-pastel-narcisse);
+  border-radius: var(--mba-radius-sm);
+  padding: var(--mba-space-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-gap-10);
+}
+
+.mba-header__dropdown-infobox-title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-900);
+  margin: 0 0 var(--mba-space-xxs) 0; /* 4px */
+}
+
+.mba-header__dropdown-infobox-description {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-primary-900);
+  margin: 0;
+  line-height: var(--mba-leading-normal);
+}
+
+/* Header partenaire : infobox en PrimaryPro-800 */
+.mba-header--partenaire .mba-header__dropdown-infobox-title,
+.mba-header--partenaire .mba-header__dropdown-infobox-description {
+  color: var(--mba-color-primary-pro-800);
+}
+
+/* ===========================================
+   BURGER MENU (MOBILE)
+   =========================================== */
+.mba-header__burger {
+  display: none;
+  color: var(--mba-color-primary-500);
+  flex-direction: column;
+  gap: var(--mba-space-xxs);
+  background: none;
+  border: none;
+  padding: var(--mba-space-xs);
+  cursor: pointer;
+  border-radius: var(--mba-radius-2xs);
+  transition: background-color var(--mba-transition-base);
+  position: relative;
+  width: 40px; /* Largeur Spécifique Figma dans le design system  24px + 16px dus au padding*/
+  height: 40px; /* Hauteur Spécifique Figma dans le design system  24px + 16px dus au padding*/
+  align-items: center;
+  justify-content: center;
+}
+
+.mba-header__burger:hover {
+  background-color: var(--mba-color-grey-50);
+}
+
+.mba-header__burger-line {
+  width: 24px;
+  height: 2px;
+  background-color: var(--mba-color-primary-500);
+  border-radius: var(--mba-radius-2xs);
+  transition: opacity var(--mba-transition-base);
+}
+
+/* Animation burger ouvert - Masquer les barres */
+.mba-header__burger--open .mba-header__burger-line {
+  opacity: 0;
+}
+
+/* Croix (X) quand le menu est ouvert */
+.mba-header__burger--open::before,
+.mba-header__burger--open::after {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 2px;
+  background-color: var(--mba-color-primary-500);
+  top: 50%;
+  left: 50%;
+}
+
+.mba-header__burger--open::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.mba-header__burger--open::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+/* Header partenaire : lignes du burger en PrimaryPro-500 */
+.mba-header--partenaire .mba-header__burger-line {
+  background-color: var(--mba-color-primary-pro-500);
+}
+
+.mba-header--partenaire .mba-header__burger--open::before,
+.mba-header--partenaire .mba-header__burger--open::after {
+  background-color: var(--mba-color-primary-pro-500);
+}
+
+/* ===========================================
+   MOBILE MENU
+   =========================================== */
+.mba-header__mobile-menu {
+  position: absolute;
+  top: calc(100% + var(--mba-space-xs));
+  left: 0;
+  right: 0;
+  background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-xs);
+  padding: var(--mba-space-md);
+  display: none;
+  z-index: 999;
+  animation: mobileMenuSlideIn var(--mba-transition-slow);
+}
+
+.mba-header__mobile-menu--open {
+  display: block;
+}
+
+@keyframes mobileMenuSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--mba-space-sm)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.mba-header__mobile-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-xxs); /* 4px */
+}
+
+.mba-header__mobile-nav-item {
+  width: 100%;
+  padding-bottom: var(--mba-space-sm);
+}
+
+.mba-header__mobile-nav-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--mba-space-xxs) var(--mba-space-xs);
+  gap: var(--mba-space-sm);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-900);
+  text-decoration: none;
+  border-radius: var(--mba-radius-2xs);
+  transition: background-color var(--mba-transition-base);
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  position: relative;
+}
+
+/* Ligne sous le lien mobile (visible même quand le dropdown est ouvert) */
+.mba-header__mobile-nav-link::after {
+  content: "";
+  position: absolute;
+  left: var(--mba-space-xs);
+  right: var(--mba-space-xs);
+  bottom: 0;
+  height: 2px;
+  border-radius: var(--mba-radius-2xs);
+  background-color: var(--mba-color-primary-100);
+}
+
+/* Variante partenaire : ligne en PrimaryPro-100 */
+.mba-header--partenaire .mba-header__mobile-nav-link::after {
+  background-color: var(--mba-color-primary-pro-100);
+}
+
+
+
+/* Variante partenaire : liens du menu mobile en PrimaryPro-800 */
+.mba-header--partenaire .mba-header__mobile-nav-link {
+  color: var(--mba-color-primary-pro-800);
+}
+
+.mba-header__mobile-nav-link .mba-icon {
+  color: var(--mba-color-primary-500);
+}
+
+/* Header partenaire : icônes des liens du menu mobile en PrimaryPro-500 */
+.mba-header--partenaire .mba-header__mobile-nav-link .mba-icon {
+  color: var(--mba-color-primary-pro-500);
+}
+
+.mba-header__mobile-nav-link--active {
+  color: var(--mba-color-primary-500);
+  background-color: var(--mba-color-primary-50);
+}
+
+/* Sous-menu mobile */
+.mba-header__mobile-submenu {
+  display: none;
+  margin-top: var(--mba-space-xs);
+  padding: 0;
+  background-color: transparent; /* Liste simple, sans fond de carte */
+  border-radius: 0;
+}
+
+.mba-header__mobile-submenu--open {
+  display: block;
+}
+
+/* Réutiliser les styles du dropdown desktop pour le mobile */
+.mba-header__mobile-submenu .mba-header__dropdown-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-xs);
+  margin-bottom: var(--mba-space-xs); /* 8px supplémentaires sous la liste des liens */
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-item {
+  gap: var(--mba-space-xs);
+  border-radius: 0;
+  transition: color var(--mba-transition-base);
+  background-color: transparent; /* pas de carte blanche */
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-item::before {
+  opacity: 0; /* caché par défaut en mobile */
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-item:active::before {
+  opacity: 1; /* au pressed mobile : uniquement la bordure gradient */
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-item:hover {
+  background-color: transparent; /* pas de fond gris au hover (mobile) */
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-icon {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mba-color-pastel-lavender);
+  border-radius: var(--mba-radius-xs);
+  color: var(--mba-color-primary-500);
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-icon .mba-icon {
+  font-size: var(--mba-font-size-md);
+}
+
+.mba-header--partenaire .mba-header__mobile-submenu .mba-header__dropdown-icon {
+  background-color: var(--mba-color-pastel-bleuet);
+  color: var(--mba-color-primary-pro-500);
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-content {
+  flex: 1;
+  gap: var(--mba-space-2xs);
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-label {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-900);
+  margin: 0 0 var(--mba-space-xxs) 0;
+  display: block;
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-description {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-primary-900);
+  margin: 0;
+  line-height: var(--mba-leading-normal);
+}
+
+/* Infobox dans le menu mobile */
+.mba-header__mobile-submenu .mba-header__dropdown-infobox {
+  margin-top: var(--mba-space-sm); /* 12px */
+  flex: 1; /* Prend toute la largeur en mobile */
+  background-color: var(--mba-color-pastel-narcisse);
+  border-radius: var(--mba-radius-2xs);
+  padding: var(--mba-space-sm);
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-infobox-title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-text);
+  margin: 0 0 var(--mba-space-xxs) 0;
+}
+
+.mba-header__mobile-submenu .mba-header__dropdown-infobox-description {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-text);
+  margin: 0;
+  line-height: var(--mba-leading-normal);
+}
+
+/* ===========================================
+   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;
+  }
+
+  .mba-header__mobile-menu {
+    padding: var(--mba-space-sm) var(--mba-space-xs); /* top/bottom SM, left/right XS */
+  }
+
+  .mba-header__nav {
+    display: none;
+  }
+
+  .mba-header__burger {
+    display: flex;
+  }
+
+  .mba-header__logo-img {
+    height: 24px;
+  }
+
+  .mba-icon {
+    margin-top: var(--mba-space-xxs);
+  }
+}
+
+@media (min-width: 769px) {
+  .mba-header__mobile-menu {
+    display: none !important;
+  }
+
+  /* Header Partenaire - Dropdown \"Diffuser\" (index 1) avec hauteur fixe en desktop */
+  .mba-header--partenaire .mba-header__dropdown--open[data-dropdown="1"] {
+    min-height: 271px; /* Hauteur minimale Spécifique Figma dans le design system */
+    box-sizing: border-box;
+  }
+
+  .mba-header--partenaire
+    .mba-header__dropdown--open[data-dropdown="1"]
+    .mba-header__dropdown-infobox {
+    height: calc(271px - 2 * var(--mba-space-sm));
+  }
+}
+
+}
+
+/* end @layer components */
+
+/**
+ * MBA Design System - Wave
+ *
+ * Élément décoratif ondulé réutilisable pour les transitions de sections.
+ *
+ * Classes:
+ * - .mba-wave           - Wave de base (43px)
+ * - .mba-wave--sm       - Petite wave (24px)
+ * - .mba-wave--top      - Inversée (pour haut de section)
+ * - .mba-wave--bottom   - Normale (défaut)
+ * - .mba-wave--lavender - Couleur lavender
+ * - .mba-wave--white    - Couleur blanche
+ * - .mba-wave--beige    - Couleur beige
+ *
+ * Usage:
+ * <div class="mba-wave mba-wave--lavender"></div>
+ * <div class="mba-wave mba-wave--sm mba-wave--lavender mba-wave--top"></div>
+ */
+
+@layer components {
+
+.mba-wave {
+  display: block;
+  width: 100%;
+  height: var(--mba-wave-height);
+  background-color: var(--mba-color-pastel-lavender);
+  -webkit-mask-image: var(--mba-wave-dip-up-mask);
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--mba-wave-dip-up-mask);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+}
+
+/* Position variants */
+.mba-wave--top {
+  -webkit-mask-image: var(--mba-wave-dip-down-mask);
+  mask-image: var(--mba-wave-dip-down-mask);
+}
+
+.mba-wave--bottom {
+  -webkit-mask-image: var(--mba-wave-dip-up-mask);
+  mask-image: var(--mba-wave-dip-up-mask);
+}
+
+/* Size variants */
+.mba-wave--sm {
+  height: var(--mba-wave-sm-height);
+  -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
+  mask-image: var(--mba-wave-sm-dip-up-mask);
+}
+
+.mba-wave--sm.mba-wave--top {
+  -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
+  mask-image: var(--mba-wave-sm-dip-down-mask);
+}
+
+/* Color variants */
+.mba-wave--lavender {
+  background-color: var(--mba-color-pastel-lavender);
+}
+
+.mba-wave--white {
+  background-color: var(--mba-color-white);
+}
+
+.mba-wave--beige {
+  background-color: var(--mba-color-beige);
+}
+
+
+}
+
+/* end @layer components */
+
+/**
+ * MBA Design System - Section
+ *
+ * Section avec fond coloré et waves optionnelles en haut/bas.
+ * Les waves sont générées via pseudo-éléments, pas besoin de HTML supplémentaire.
+ *
+ * Classes:
+ * - .mba-section                    - Container de base
+ * - .mba-section--lavender          - Fond lavender
+ * - .mba-section--beige             - Fond beige
+ * - .mba-section--primary-50        - Fond primary-50
+ * - .mba-section--wave-top          - Wave en haut
+ * - .mba-section--wave-bottom       - Wave en bas
+ * - .mba-section--wave-both         - Waves en haut ET en bas
+ * - .mba-section--wave-sm           - Petite wave (24px au lieu de 43px)
+ * - .mba-section--wave-inset        - Padding ajusté pour que le contenu commence après la wave
+ *
+ * Usage:
+ * <section class="mba-section mba-section--lavender mba-section--wave-both">
+ *   <div class="mba-section__content">...</div>
+ * </section>
+ *
+ * Petite wave:
+ * <section class="mba-section mba-section--lavender mba-section--wave-both mba-section--wave-sm">
+ *   ...
+ * </section>
+ */
+
+@layer components {
+
+.mba-section {
+  position: relative;
+  width: 100%;
+}
+
+.mba-section__content {
+  position: relative;
+  z-index: 1;
+  max-width: var(--mba-container-width);
+  margin: 0 auto;
+  padding: var(--mba-space-xxl) 0;
+}
+
+/* ===========================================
+   WAVE INSET (opt-in)
+   Ajoute du padding pour que le contenu commence après la wave
+   =========================================== */
+.mba-section--wave-inset.mba-section--wave-top .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-both .mba-section__content {
+  padding-top: calc(var(--mba-wave-height) + var(--mba-space-xxl));
+}
+
+.mba-section--wave-inset.mba-section--wave-bottom .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-both .mba-section__content {
+  padding-bottom: calc(var(--mba-wave-height) + var(--mba-space-xxl));
+}
+
+/* Wave inset pour petites waves */
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-top .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
+  padding-top: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
+}
+
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-bottom .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
+  padding-bottom: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
+}
+
+/* ===========================================
+   BACKGROUND COLORS
    =========================================== */
 
 .mba-section--lavender {
@@ -3562,7 +4231,265 @@ button.mba-input-icon__icon:hover {
 
 /* @import "./_alerts.css"; */
 
-/* @import "./_accordion.css"; */
+/**
+ * MBA Design System - Accordion
+ *
+ * Accordions empilables avec panneau déroulant.
+ * - Les accordions peuvent se superposer verticalement.
+ * - À partir de 5 items (ou si le contenu est trop long),
+ *   utiliser la variante scrollable pour afficher une scrollbar.
+ */
+
+@layer components {
+
+  /* ===========================================
+     CONTAINER & GROUP
+     =========================================== */
+  .mba-accordion-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xs); /* Espacement vertical entre accordions empilés */
+  }
+
+  .mba-accordion {
+    width: 100%;
+    max-width: 220px;
+    border-radius: var(--mba-radius-xs);
+    background-color: var(--mba-color-white);
+    border: 1px solid var(--mba-color-grey-100);
+    overflow: hidden;
+  }
+
+  .mba-accordion--full-width {
+    max-width: 100%;
+  }
+
+  /* Variante line-only (header sans carte, seulement une ligne bottom) */
+  .mba-accordion--line {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  /* ===========================================
+     HEADER (TRIGGER)
+     =========================================== */
+  .mba-accordion__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mba-space-sm);
+    padding: var(--mba-space-xs) var(--mba-space-sm);
+    cursor: pointer;
+    background-color: var(--mba-color-white);
+    border: none;
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 43px;
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-regular);
+    color: var(--mba-color-primary-900);
+    text-align: left;
+  }
+
+  /* Header pour la variante line : pas de fond, juste une ligne en bottom */
+  .mba-accordion--line .mba-accordion__header {
+    padding-left: var(--mba-space-xs);  /* 8px */
+    padding-right: var(--mba-space-xs); /* 8px */
+    background-color: transparent;
+    border-bottom: 1.8px solid var(--mba-color-primary-400);
+  }
+
+  /* Pile d'accordions line : les suivants utilisent un trait en pointillés
+     (couleur gérée par la variante Aidants / Partenaires) */
+  .mba-accordion-group
+    .mba-accordion--line
+    + .mba-accordion--line
+    .mba-accordion__header {
+    border-bottom-style: dashed;
+  }
+
+  /* Hover pour Aidants uniquement : fond grey-50 */
+  .mba-accordion--line:not(.mba-accordion--partenaire) .mba-accordion__header:hover {
+    background-color: var(--mba-color-grey-50);
+    border-radius: var(--mba-radius-xs) var(--mba-radius-xs) 0 0;
+  }
+
+  /* Variante Partenaire : couleur de ligne spécifique */
+  .mba-accordion--line.mba-accordion--partenaire .mba-accordion__header {
+    border-bottom-color: var(--mba-color-primary-pro-400);
+    background-color: transparent;
+  }
+
+  .mba-accordion--line.mba-accordion--partenaire .mba-accordion__header:hover {
+    background-color: transparent;
+  }
+
+  .mba-accordion__title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--mba-space-xs);
+    min-width: 0;
+  }
+
+  .mba-accordion__title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: var(--mba-font-size-xs);
+    color: var(--mba-color-primary-900);
+    font-weight: var(--mba-font-weight-semibold);
+  }
+
+  /* Variante Partenaire : titre en PrimaryPro-900 */
+  .mba-accordion--partenaire .mba-accordion__title {
+    color: var(--mba-color-primary-pro-900);
+  }
+
+  /* Compteur d’éléments (pastille à droite du titre) */
+  .mba-accordion__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--mba-space-md);
+    height: var(--mba-space-md);
+    padding: var(--mba-space-xxs);
+    border-radius: var(--mba-radius-full);
+    background-color: var(--mba-color-pastel-oranger);
+    color: var(--mba-color-primary-900);
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xxs);
+    font-weight: var(--mba-font-weight-semibold);
+    flex-shrink: 0;
+  }
+
+  /* Variante Line Aidants : badge en secondary-500 */
+  .mba-accordion--line .mba-accordion__badge {
+    background-color: var(--mba-color-secondary-500);
+  }
+
+  /* Variante Partenaire : badge en narcisse */
+  .mba-accordion--partenaire .mba-accordion__badge {
+    background-color: var(--mba-color-pastel-narcisse);
+  }
+
+  .mba-accordion__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--mba-space-xs);
+    color: var(--mba-color-primary-900);
+    transition: transform var(--mba-transition-base);
+  }
+
+  .mba-accordion--open .mba-accordion__icon {
+    transform: rotate(180deg);
+  }
+
+  /* ===========================================
+     PANEL
+     =========================================== */
+  .mba-accordion__panel {
+    display: none;
+    background-color: var(--mba-color-white);
+  }
+
+  .mba-accordion--open .mba-accordion__panel {
+    display: block;
+  }
+
+  .mba-accordion__panel-inner {
+    padding: var(--mba-space-xs) var(--mba-space-sm);
+  }
+
+  /* Panel pour la variante line : aligné à gauche avec le header */
+  .mba-accordion--line .mba-accordion__panel-inner {
+    padding-left: var(--mba-space-xs);
+    padding-right: var(--mba-space-xs);
+  }
+
+  /* Variante scrollable : à utiliser à partir de 5 items */
+  .mba-accordion__panel-inner--scrollable {
+    max-height: 9.5rem; /* hauteur raisonnable avant scroll */
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--mba-color-primary-400) transparent;
+  }
+
+  .mba-accordion__panel-inner--scrollable::-webkit-scrollbar {
+    width: var(--mba-space-xxs);
+  }
+
+  .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-thumb {
+    background-color: var(--mba-color-primary-400);
+    border-radius: var(--mba-radius-2xs);
+  }
+
+  .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  /* Scrollbar variante Partenaire (PrimaryPro-400) */
+  .mba-accordion--partenaire .mba-accordion__panel-inner--scrollable {
+    scrollbar-color: var(--mba-color-primary-pro-400) transparent;
+  }
+
+  .mba-accordion--partenaire
+    .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-thumb {
+    background-color: var(--mba-color-primary-pro-400);
+  }
+
+  /* ===========================================
+     LISTE D’ITEMS
+     =========================================== */
+  .mba-accordion__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xxs);
+  }
+
+  .mba-accordion__item {
+    display: flex;
+    align-items: center;
+    gap: var(--mba-space-xs);
+    padding: var(--mba-space-xs);
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    color: var(--mba-color-primary-900);
+  }
+
+  .mba-accordion__item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 2px;
+    line-height: 1;
+    vertical-align: middle;
+    color: inherit;
+  }
+
+  .mba-accordion__item-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* États optionnels (hover / sélection) */
+  .mba-accordion__item:hover {
+    background-color: var(--mba-color-grey-50);
+    border-radius: var(--mba-radius-xs);
+  }
+
+  .mba-accordion__item--selected {
+    font-weight: var(--mba-font-weight-semibold);
+  }
+
+}
 
 /* @import "./_carousel.css"; */
 
@@ -3676,4 +4603,32 @@ button.mba-input-icon__icon:hover {
   background: var(--mba-gradient-sunset);
 }
 
+/* Border gradient (hover reveal) — applique un contour gradient sunset via ::before */
+
+.mba-border-gradient {
+  position: relative;
+}
+
+.mba-border-gradient::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: var(--mba-gradient-sunset);
+  border-radius: inherit;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--mba-transition-base);
+}
+
+.mba-border-gradient:hover::before,
+.mba-border-gradient--visible::before {
+  opacity: 1;
+}
+
 /*# sourceMappingURL=mba-design-system.css.map */