@maboussoleaidant/design-system 0.1.16 → 0.1.18

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,7 +621,7 @@
   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');
 }
 
 /* ===========================================
@@ -983,6 +986,8 @@ video {
  * Styles de base pour le texte
  */
 
+@layer base {
+
 body {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xs);
@@ -994,30 +999,39 @@ body {
 }
 
 /* Liens */
-
 a {
   color: var(--mba-color-link);
   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);
 }
 
 /* Focus visible pour accessibilité */
-
 :focus-visible {
   outline: 2px solid var(--mba-color-primary-500);
   outline-offset: 2px;
 }
 
 /* Selection */
-
 ::selection {
   background-color: var(--mba-color-primary-100);
   color: var(--mba-color-primary-900);
 }
 
+}
+
+/* end @layer base */
+
 /**
  * MBA Design System - Composants
  *
@@ -2697,7 +2711,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);
@@ -2922,6 +2936,687 @@ button.mba-input-icon__icon:hover {
 
 /* end @layer components */
 
+/* @import "./_tags.css"; */
+
+/**
+ * MBA Design System - Header
+ *
+ * Navigation principale avec dropdown et version mobile
+ * Source: Design System Figma
+ */
+
+@layer components {
+
+/* ===========================================
+   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%;
+  box-sizing: border-box;
+}
+
+.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;
+}
+
+/* ===========================================
+   LOGO
+   =========================================== */
+.mba-header__logo {
+  display: flex;
+  align-items: center;
+  gap: var(--mba-space-xs); /* 8px */
+  text-decoration: none;
+}
+
+.mba-header__logo-img {
+  max-width: 227.92px;
+  height: 32px;
+  display: block;
+}
+
+/* ===========================================
+   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 */
+}
+
+.mba-header__nav-item {
+  position: relative;
+}
+
+.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-header__nav-link:hover {
+  background-color: var(--mba-color-pastel-lavender);
+  color: var(--mba-color-primary-900);
+}
+
+/* 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);
+}
+
+.mba-header__nav-link--active {
+  background-color: var(--mba-color-pastel-lavender);
+  border-radius: var(--mba-radius-sm);
+  color: var(--mba-color-primary-900);
+}
+
+/* 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);
+}
+
+/* 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);
+}
+
+/* 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);
+}
+
+/* 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);
+}
+
+/* ===========================================
+   DROPDOWN MENU
+   =========================================== */
+.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-header__dropdown--open {
+  display: block;
+  box-shadow: var(--mba-shadow-xs);
+}
+
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--mba-space-xs)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.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);
+}
+
+/* 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-item::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-header__dropdown-item:hover::before {
+  opacity: 1;
+}
+
+
+.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
  *