@maboussoleaidant/design-system 0.1.38 → 0.1.40

package/dist/mba-design-system.css

@@ -1,23 +1,33 @@
+
+@layer theme, base, components, utilities;
 /**
  * MBA Design System
  *
  * Point d'entrée principal (sans Tailwind utilities)
  * Inclut: tokens + base + composants
  */
-
+/**
+ * Ordre des cascade layers — DOIT rester la 1re règle du CSS compilé.
+ *
+ * Sans cette déclaration, les layers étaient ordonnés par ordre d'apparition
+ * (`components` puis `base`), ce qui faisait gagner le reset `base`
+ * (ex. `button { background-color: transparent }`, `a { … }`) sur les
+ * composants `.mba-*` de `@layer components` — y compris à l'intérieur d'un
+ * Shadow DOM qui importe ce fichier. En figeant l'ordre priorité croissante
+ * `theme < base < components < utilities`, les composants gagnent enfin sur
+ * le reset, comme attendu.
+ */
 /**
  * MBA Design System - Tokens
  *
  * Point d'entrée pour tous les design tokens
  */
-
 /**
  * MBA Design System - Couleurs
  *
  * Palette de couleurs extraite du Design System Figma
  * Préfixe: --mba-color-
  */
-
 :root {
   /* ===========================================
      BASICS
@@ -173,14 +183,12 @@
   /* Focus ring (accessibilité) */
   --mba-focus-ring: 0 0 0 3px rgba(112, 57, 115, 0.25);
 }
-
 /**
  * MBA Design System - Typographie
  *
  * Polices: Open Sans (textes) + Congenial (titres)
  * Source: Design System Figma
  */
-
 :root {
   /* ===========================================
      FAMILLES DE POLICES
@@ -229,12 +237,10 @@
   --mba-tracking-wider: 0.05em;
   --mba-tracking-widest: 0.1em;
 }
-
 /* ===========================================
    HEADING PRESETS (Congenial)
    Wrappé dans @layer components pour être overridable par utilities
    =========================================== */
-
 @layer components {
 
 /* XXL - 48px Bold */
@@ -338,16 +344,13 @@
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Espacements
  *
  * Échelle d'espacements extraite du Design System Figma
  * Préfixe: --mba-space-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA
@@ -372,14 +375,12 @@
      =========================================== */
   --mba-container-width: 70rem;   /* 1120px */
 }
-
 /**
  * MBA Design System - Border Radius
  *
  * Échelle de rayons de bordure extraite du Design System Figma
  * Préfixe: --mba-radius-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA
@@ -398,7 +399,6 @@
   --mba-radius-none: 0;
   --mba-radius-full: 9999px;
 }
-
 /**
  * MBA Design System - Ombres (Elevation)
  *
@@ -406,7 +406,6 @@
  * Couleur de base: Grey 400 (#71717A / rgba(113, 113, 122))
  * Préfixe: --mba-shadow-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA (Elevation)
@@ -450,13 +449,11 @@
   --mba-input-ring-success: 0 0 0 1.5px var(--mba-color-success-100);
   --mba-input-ring-success-focus: 0 0 0 1.5px var(--mba-color-success-300);
 }
-
 /**
  * MBA Design System - Transitions
  *
  * Durées et easings pour les animations
  */
-
 :root {
   /* ===========================================
      DUREES
@@ -485,7 +482,6 @@
   --mba-transition-base: var(--mba-duration-200) var(--mba-ease-in-out);
   --mba-transition-slow: var(--mba-duration-300) var(--mba-ease-in-out);
 }
-
 /**
  * MBA Design System - Breakpoints
  *
@@ -496,7 +492,6 @@
  * Utiliser les classes Tailwind (sm:, md:, lg:, xl:, 2xl:)
  * ou les @media queries directement.
  */
-
 :root {
   /* Breakpoints pour référence (usage JS) */
   --mba-breakpoint-sm: 640px;
@@ -505,7 +500,6 @@
   --mba-breakpoint-xl: 1280px;
   --mba-breakpoint-2xl: 1536px;
 }
-
 /*
   Usage en CSS pur (les @media ne supportent pas les custom properties) :
 
@@ -515,7 +509,6 @@
   @media (min-width: 1280px) { ... }  xl
   @media (min-width: 1536px) { ... }  2xl
 */
-
 /**
  * MBA Design System - Decorations
  *
@@ -525,7 +518,6 @@
  * - dip-up   = creux vers le haut ↑ (utilisé en position bottom)
  * - dip-down = creux vers le bas ↓ (utilisé en position top)
  */
-
 :root {
   /* Wave Default (42px) */
   --mba-wave-height: 42px;
@@ -537,23 +529,19 @@
   --mba-wave-sm-dip-up-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M1280 24H0V15.8118C95.612 15.8118 246.789 0 360.422 0C499.085 0 780.915 15.8118 914.071 15.8118C1068.75 15.8118 1190.9 0 1280 0V24Z' fill='black'/%3E%3C/svg%3E");
   --mba-wave-sm-dip-down-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V8.18824C1184.39 8.18824 1033.21 24 919.578 24C780.915 24 499.085 8.18824 365.929 8.18824C211.248 8.18824 89.1044 24 0 24V0Z' fill='black'/%3E%3C/svg%3E");
 }
-
 /**
  * MBA Design System - Base
  *
  * Reset et styles de base
  */
-
 /**
  * MBA Design System - Fonts
  *
  * @font-face declarations pour Open Sans et Congenial
  */
-
 /* ===========================================
    OPEN SANS (Textes)
    =========================================== */
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -561,7 +549,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-Regular.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -569,7 +556,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -577,7 +563,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-Bold.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -585,12 +570,10 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
 }
-
 /* ===========================================
    CONGENIAL (Titres)
    Note: ExtraBold non disponible, on utilise Bold pour les titres
    =========================================== */
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -598,7 +581,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -606,7 +588,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial-Medium.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -614,7 +595,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial-Bold.woff2") format("woff2");
 }
-
 /**
  * MBA Design System - Icons
  *
@@ -626,11 +606,9 @@
  *   1. Éditer src/icons/icons.list.txt
  *   2. Lancer: npm run icons:build
  */
-
 /* ===========================================
    FONT FACE - Material Symbols Rounded
    =========================================== */
-
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
@@ -638,12 +616,10 @@
   font-display: block;
   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 {
@@ -766,9 +742,7 @@
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Preflight
  *
@@ -778,7 +752,6 @@
  * Wrappé dans @layer base pour permettre aux utilities Tailwind
  * de l'overrider sans avoir besoin de !important
  */
-
 @layer base {
 
 *,
@@ -1013,15 +986,12 @@ video {
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Base Typography
  *
  * Styles de base pour le texte
  */
-
 @layer base {
 
 body {
@@ -1065,15 +1035,12 @@ a:hover {
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Composants
  *
  * Classes de composants prêtes à l'emploi
  */
-
 /**
  * MBA Design System - Boutons
  *
@@ -1081,7 +1048,6 @@ a:hover {
  * Couleur: Primary (Violet #703973)
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -1505,6 +1471,53 @@ a:hover {
   color: var(--mba-color-error-500);
 }
 
+/* ===========================================
+   BACK TO TOP (retour en haut)
+   Bouton rond flottant (bas-droit), ancre #top → JS-free.
+   L'app bascule .is-hidden selon le scroll. Pour un défilement doux,
+   poser `scroll-behavior: smooth` sur <html> côté app.
+   width/height 48px, icône arrow_upward 24px.
+   Source: Design System Figma (Annuaire, node 7672-576).
+   =========================================== */
+.mba-btn-to-top {
+  position: fixed;
+  right: var(--mba-space-lg);
+  bottom: var(--mba-space-lg);
+  z-index: 40;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mba-space-xl); /* 48px */
+  height: var(--mba-space-xl); /* 48px */
+  padding: 0;
+  border: none;
+  border-radius: var(--mba-radius-full);
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+  cursor: pointer;
+  transition: background-color var(--mba-transition-base);
+}
+
+.mba-btn-to-top .mba-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+}
+
+.mba-btn-to-top:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-primary-800);
+}
+
+.mba-btn-to-top:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+/* Affichage géré par l'app (visible au scroll) */
+.mba-btn-to-top.is-hidden {
+  display: none;
+}
+
 /* ===========================================
    SMALL BUTTON
    padding: 4px 8px, gap: 8px
@@ -1559,9 +1572,7 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Links
  *
@@ -1577,7 +1588,6 @@ a:hover {
  *   <span class="material-symbols-rounded">arrow_forward</span>
  * </a>
  */
-
 @layer components {
 
 .mba-link {
@@ -1620,16 +1630,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Cards
  *
  * Classes: .mba-card, .mba-card--sm, .mba-card-grid
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -1710,6 +1717,24 @@ a:hover {
   transform: translateX(4px);
 }
 
+/* ===========================================
+   ICÔNE EN PASTILLE RONDE (badge de tête)
+   Modifieur de .mba-card__icon : icône décorative dans un cercle, en tête de
+   card (ex. cartes « rubrique » / « sujet »). Neutralise le décalage au survol,
+   réservé à la flèche d'action de fin de card.
+   =========================================== */
+.mba-card__icon--circle {
+  width: var(--mba-space-xl);  /* 48px */
+  height: var(--mba-space-xl);
+  padding: var(--mba-space-xs);
+  border-radius: var(--mba-radius-full);
+  background-color: var(--mba-color-primary-50);
+}
+
+.mba-card:hover .mba-card__icon--circle {
+  transform: none;
+}
+
 /* ===========================================
    CARD GRID
    =========================================== */
@@ -1989,10 +2014,241 @@ a:hover {
   }
 }
 
+/* ===========================================
+   ARTICLE CARD - VARIANTE EDITO
+   Card article éditoriale : image inset arrondie, ligne meta (date + auteur),
+   tag catégorie AU-DESSUS du titre (réutiliser .mba-tag), lien « Lire l'article ».
+   N'altère pas la base .mba-article-card.
+   Source: Design System Figma (Card edito, node 4749-3666).
+   =========================================== */
+.mba-article-card--edito {
+  padding: var(--mba-space-xs); /* 8px : l'image et le contenu sont inset */
+  gap: var(--mba-space-md); /* 16px entre média / contenu / footer */
+  justify-content: space-between;
 }
 
-/* end @layer components */
+/* Bloc média : image + ligne meta (gap 8px) */
+.mba-article-card__media {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-xs);
+  width: 100%;
+}
+
+/* Image inset : arrondie sur tous les coins, plus haute */
+.mba-article-card--edito .mba-article-card__image {
+  height: 232px;
+  border-radius: var(--mba-radius-xs);
+}
+
+/* Ligne meta : « Mis à jour le … - Par … » */
+.mba-article-card__meta {
+  margin: 0;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs); /* 14px */
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-primary-900);
+  line-height: normal;
+}
+
+/* Contenu edito : le tag/titre/texte s'alignent sur l'image (pas de padding) */
+.mba-article-card--edito .mba-article-card__content {
+  padding: 0;
+  gap: var(--mba-space-xs);
+}
+
+/* Titre edito : primary-900, tronqué sur 2 lignes */
+.mba-article-card--edito .mba-article-card__title {
+  color: var(--mba-color-primary-900);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+/* Texte edito : primary-900, tronqué sur 3 lignes */
+.mba-article-card--edito .mba-article-card__text {
+  color: var(--mba-color-primary-900);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+/* Footer edito : le padding est porté par la card, on neutralise */
+.mba-article-card--edito .mba-article-card__footer {
+  padding: 0;
+  margin-top: 0;
+}
+
+/* ===========================================
+   FEATURE CARD (image pleine + label flottant)
+   Card de mise en avant : image de couverture + étiquette blanche ancrée en
+   bas (titre + flèche). Toute la card est cliquable.
+   Source: Design System Figma (node 4660-19320).
+   =========================================== */
+.mba-feature-card {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: 181 / 212; /* ~362 x 424 (maquette) */
+  border-radius: var(--mba-radius-sm);
+  text-decoration: none;
+}
+
+.mba-feature-card__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform var(--mba-transition-base);
+}
+
+/* Étiquette blanche flottante, ancrée en bas avec 8px de marge */
+.mba-feature-card__label {
+  position: absolute;
+  left: var(--mba-space-xs);
+  right: var(--mba-space-xs);
+  bottom: var(--mba-space-xs);
+  display: flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  padding: var(--mba-space-sm);
+  background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-sm);
+}
+
+.mba-feature-card__title {
+  flex: 1 1 0;
+  min-width: 0;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm); /* 18px */
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-900);
+  line-height: normal;
+}
+
+.mba-feature-card__icon {
+  flex-shrink: 0;
+  color: var(--mba-color-primary-500);
+  transition: transform var(--mba-transition-base);
+}
+
+/* Hover : léger zoom de l'image + flèche qui avance */
+.mba-feature-card:hover .mba-feature-card__image {
+  transform: scale(1.04);
+}
+
+.mba-feature-card:hover .mba-feature-card__icon {
+  transform: translateX(4px);
+}
+
+.mba-feature-card:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mba-feature-card__image,
+  .mba-feature-card__icon {
+    transition: none;
+  }
+  .mba-feature-card:hover .mba-feature-card__image {
+    transform: none;
+  }
+}
+
+/* ===========================================
+   RESOURCE CARD (dossier / ressource)
+   Card bordée avec forme décorative en fond, pastille, titre, sous-titre et
+   bouton. Réutilise .mba-tag (pastille) et .mba-btn (bouton).
+   La forme décorative est un SLOT rempli par l'app (.mba-resource-card__decoration) :
+   le DS pose un lavis pastel par défaut, thémable via --lavender/--oranger/--bleuet.
+   Source: Design System Figma (node 4660-19046).
+   =========================================== */
+.mba-resource-card {
+  /* Couleur du lavis décoratif (thémée par les modifieurs ci-dessous) */
+  --mba-resource-decoration-color: var(--mba-color-pastel-lavender);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--mba-space-md);
+  overflow: hidden;
+  padding: var(--mba-space-md) var(--mba-space-xxl) var(--mba-space-md) var(--mba-space-md);
+  background-color: var(--mba-color-white);
+  border: 1px solid var(--mba-color-grey-100);
+  border-radius: var(--mba-radius-md);
+}
+
+/* Thèmes de la forme décorative */
+.mba-resource-card--oranger {
+  --mba-resource-decoration-color: var(--mba-color-pastel-oranger);
+}
+.mba-resource-card--bleuet {
+  --mba-resource-decoration-color: var(--mba-color-pastel-bleuet);
+}
+
+/* Slot décoratif : lavis pastel par défaut, remplaçable par une illustration
+   fournie par l'app (poser une <img>/<svg> à l'intérieur). */
+.mba-resource-card__decoration {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+  background: radial-gradient(
+    115% 90% at 12% 100%,
+    var(--mba-resource-decoration-color),
+    transparent 72%
+  );
+}
+
+/* Contenu au-dessus de la décoration */
+.mba-resource-card__content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-sm);
+  width: 100%;
+}
+
+.mba-resource-card__title {
+  margin: 0;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-md); /* 24px */
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-900);
+  line-height: normal;
+}
+
+.mba-resource-card__text {
+  margin: 0;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs); /* 16px */
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-900);
+  line-height: normal;
+}
+
+/* Bouton : au-dessus de la décoration */
+.mba-resource-card__action {
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 600px) {
+  .mba-resource-card {
+    padding-right: var(--mba-space-md);
+  }
+}
 
+}
+/* end @layer components */
 /**
  * MBA Design System - Arrow Buttons
  *
@@ -2004,7 +2260,6 @@ a:hover {
  * - background: Primary-500
  * - disabled: Grey-300
  */
-
 @layer components {
 
 .mba-arrow {
@@ -2047,16 +2302,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Radio & Checkbox
  *
  * Classes: .mba-radio, .mba-radio--pro, .mba-checkbox, .mba-checkbox--pro
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -2260,16 +2512,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Pagination
  *
  * Composant de pagination pour la navigation entre pages
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -2438,17 +2687,40 @@ a:hover {
   cursor: default;
 }
 
+/* ===========================================
+   DOTS - Variante « pilule extensible »
+   Point actif allongé, inactifs courts (carousel).
+   Actif: 72px primary-500 · inactif: 16px grey-100.
+   =========================================== */
+.mba-dots--expand .mba-dot {
+  width: var(--mba-space-sm); /* 16px (inactif) */
+  background-color: var(--mba-color-grey-100);
+  transition: width var(--mba-transition-base), background-color var(--mba-transition-base);
 }
 
-/* end @layer components */
+.mba-dots--expand .mba-dot:hover:not(.is-active) {
+  background-color: var(--mba-color-grey-300);
+}
 
-/**
- * MBA Design System - Inputs
- *
- * Classes: .mba-textarea, .mba-input, .mba-label
- * Source: Design System Figma
- */
+.mba-dots--expand .mba-dot.is-active {
+  width: 4.5rem; /* 72px (actif) - valeur visuelle maquette (~71px) */
+  background-color: var(--mba-color-primary-500);
+}
 
+@media (prefers-reduced-motion: reduce) {
+  .mba-dots--expand .mba-dot {
+    transition: none;
+  }
+}
+
+}
+/* end @layer components */
+/**
+ * MBA Design System - Inputs
+ *
+ * Classes: .mba-textarea, .mba-input, .mba-label
+ * Source: Design System Figma
+ */
 @layer components {
 
 /* ===========================================
@@ -2880,6 +3152,14 @@ a:hover {
   margin-left: var(--mba-space-xs);
 }
 
+/* Variante icône EN TÊTE (à gauche du champ).
+   L'icône précède l'<input> dans le DOM : on inverse la marge
+   (margin-right au lieu de margin-left). Ex. barre de recherche « loupe ». */
+.mba-input-icon--leading .mba-input-icon__icon {
+  margin-left: 0;
+  margin-right: var(--mba-space-xs);
+}
+
 /* Icon clickable (button) */
 button.mba-input-icon__icon {
   background: none;
@@ -2955,9 +3235,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Tabs
  *
@@ -2966,7 +3244,6 @@ button.mba-input-icon__icon:hover {
  * Couleurs: Primary 500 (MBA), Primary 900 (Partenaires)
  * Source: Design System Figma (Tabs - Lina-7347)
  */
-
 @layer components {
 
 /* ===========================================
@@ -3055,9 +3332,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* @layer components */
-
 /**
  * MBA Design System - Tags (Badges)
  *
@@ -3083,7 +3358,6 @@ button.mba-input-icon__icon:hover {
  * Note: fonds plus foncés que les pastels de base pour l'accessibilité.
  * Source: Design System Figma.
  */
-
 @layer components {
 
 .mba-tag {
@@ -3177,16 +3451,13 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Header
  *
  * Navigation principale avec dropdown et version mobile
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -3862,9 +4133,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Wave
  *
@@ -3886,7 +4155,6 @@ button.mba-input-icon__icon:hover {
  * <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 {
@@ -3952,9 +4220,7 @@ button.mba-input-icon__icon:hover {
 
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Section
  *
@@ -3982,7 +4248,6 @@ button.mba-input-icon__icon:hover {
  *   ...
  * </section>
  */
-
 @layer components {
 
 .mba-section {
@@ -4157,9 +4422,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Footer
  *
@@ -4178,7 +4441,6 @@ button.mba-input-icon__icon:hover {
  * Modificateurs:
  * - .mba-footer--pro           - Version partenaire (primary-pro)
  */
-
 @layer components {
 
 /* ===========================================
@@ -4566,13 +4828,170 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /* @import "./_forms.css"; */
+/**
+ * MBA Design System - Alerts
+ *
+ * Alerte contextuelle : message d'information, de succès, d'avertissement ou
+ * d'erreur. Différent de `.mba-feedback` (qui ne sert qu'à la validation de
+ * champs de formulaire).
+ *
+ * Principe visuel (source Figma - « Recherche : détresse détectée ») :
+ * - fond + bordure portent la couleur sémantique de la variante ;
+ * - le texte reste neutre (titre grey-800, corps primary-900) pour la
+ *   lisibilité et le contraste ;
+ * - l'icône porte l'accent de la variante.
+ *
+ * Variantes : --info, --success, --warning, --error.
+ * Le « bandeau détresse » de la maquette = .mba-alert--warning (+ --dashed et
+ * icône « boxed »), pas de variante « support » maison.
+ *
+ * Convention d'état :
+ * - .is-hidden masque l'alerte (dismiss basculé par l'app, zéro JS dans le DS).
+ *
+ * Accessibilité (câblage markup, cf. story) :
+ * - info / success : role="status" + aria-live="polite".
+ * - warning / error : role="alert" + aria-live="assertive".
+ * - bouton fermeture : aria-label="Fermer".
+ *
+ * Source: Design System Figma (node 4660-18800).
+ */
+@layer components {
+
+  /* ===========================================
+     CONTENEUR
+     =========================================== */
+  .mba-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mba-space-sm);
+    padding: var(--mba-space-sm);
+    border: 1px solid transparent;
+    border-radius: var(--mba-radius-sm);
+    background-color: var(--mba-color-grey-50);
+    font-family: var(--mba-font-family-text);
+  }
+
+  /* Bordure en pointillés (bandeau détresse) */
+  .mba-alert--dashed {
+    border-style: dashed;
+  }
+
+  /* État masqué (dismiss géré par l'app) */
+  .mba-alert.is-hidden {
+    display: none;
+  }
+
+  /* ===========================================
+     ICÔNE
+     =========================================== */
+  .mba-alert__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--mba-color-grey-800);
+  }
+
+  /* Icône dans un chip blanc (bandeau détresse) */
+  .mba-alert__icon--boxed {
+    padding: var(--mba-space-xs);
+    background-color: var(--mba-color-white);
+    border-radius: var(--mba-radius-xs);
+  }
+
+  /* ===========================================
+     CONTENU
+     =========================================== */
+  .mba-alert__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xs);
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .mba-alert__title {
+    margin: 0;
+    font-size: var(--mba-font-size-xxs); /* 14px */
+    font-weight: var(--mba-font-weight-bold);
+    color: var(--mba-color-grey-800);
+    line-height: normal;
+  }
+
+  .mba-alert__text {
+    margin: 0;
+    font-size: var(--mba-font-size-xs); /* 16px */
+    font-weight: var(--mba-font-weight-regular);
+    color: var(--mba-color-primary-900);
+    line-height: var(--mba-leading-snug);
+  }
 
-/* @import "./_alerts.css"; */
+  /* ===========================================
+     BOUTON FERMETURE (optionnel)
+     =========================================== */
+  .mba-alert__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: var(--mba-color-grey-400);
+    cursor: pointer;
+    transition: color var(--mba-transition-base);
+  }
 
+  .mba-alert__close:hover {
+    color: var(--mba-color-grey-800);
+  }
+
+  .mba-alert__close:focus-visible {
+    outline: none;
+    border-radius: var(--mba-radius-2xs);
+    box-shadow: var(--mba-focus-ring);
+  }
+
+  /* ===========================================
+     VARIANTES SÉMANTIQUES
+     Fond = teinte claire ; bordure = teinte 400 ; icône = teinte 500.
+     =========================================== */
+  .mba-alert--info {
+    background-color: var(--mba-color-info-50);
+    border-color: var(--mba-color-info-400);
+  }
+  .mba-alert--info .mba-alert__icon {
+    color: var(--mba-color-info-500);
+  }
+
+  .mba-alert--success {
+    background-color: var(--mba-color-success-100);
+    border-color: var(--mba-color-success-400);
+  }
+  .mba-alert--success .mba-alert__icon {
+    color: var(--mba-color-success-500);
+  }
+
+  .mba-alert--warning {
+    background-color: var(--mba-color-warning-50);
+    border-color: var(--mba-color-warning-400);
+  }
+  .mba-alert--warning .mba-alert__icon {
+    color: var(--mba-color-warning-500);
+  }
+
+  .mba-alert--error {
+    background-color: var(--mba-color-error-100);
+    border-color: var(--mba-color-error-400);
+  }
+  .mba-alert--error .mba-alert__icon {
+    color: var(--mba-color-error-500);
+  }
+
+}
 /**
  * MBA Design System - Accordion
  *
@@ -4581,7 +5000,6 @@ button.mba-input-icon__icon:hover {
  * - À partir de 5 items (ou si le contenu est trop long),
  *   utiliser la variante scrollable pour afficher une scrollbar.
  */
-
 @layer components {
 
   /* ===========================================
@@ -4848,39 +5266,301 @@ button.mba-input-icon__icon:hover {
   }
 
 }
+/**
+ * MBA Design System - Carousel
+ *
+ * Carousel 100% CSS : défilement horizontal natif avec scroll-snap (swipe
+ * tactile + molette + clavier), zéro JS dans le DS.
+ * - .mba-carousel__track : piste flex scrollable, scroll-snap-type: x mandatory.
+ * - .mba-carousel__slide : chaque diapo s'aligne au début (scroll-snap-align).
+ * - .mba-carousel__controls : flèches rondes (précédent / suivant).
+ * - Pagination : réutiliser .mba-dots / .mba-dot (_paging.css).
+ *
+ * Comportement (à la charge de l'app, zéro JS embarqué) :
+ * - Le clic sur les flèches / points fait défiler la piste (scrollBy / scrollIntoView).
+ * - L'app bascule .is-active sur le point courant et .is-disabled / [disabled]
+ *   sur la flèche en butée.
+ *
+ * Accessibilité (câblage markup, cf. story) :
+ * - Conteneur : role="region" + aria-roledescription="carousel" + aria-label.
+ * - Piste focusable au clavier (tabindex="0") pour le défilement clavier.
+ * - Flèches : aria-label "Précédent" / "Suivant".
+ *
+ * Largeur des diapos : personnalisable via --mba-carousel-slide-width
+ * (défaut 360px ; ex. 85% pour laisser deviner la diapo suivante en mobile).
+ *
+ * Source: Design System Figma (nodes 4660-19043 / 4660-19016).
+ */
+@layer components {
 
-/* @import "./_carousel.css"; */
+  .mba-carousel {
+    width: 100%;
+  }
 
-/* @import "./_navigation.css"; */
+  /* ===========================================
+     PISTE (scroll-snap horizontal)
+     =========================================== */
+  .mba-carousel__track {
+    display: flex;
+    gap: var(--mba-space-sm);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    /* Masquer la scrollbar sans bloquer le scroll clavier / tactile */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge legacy */
+  }
+
+  .mba-carousel__track::-webkit-scrollbar {
+    display: none; /* WebKit */
+  }
 
+  .mba-carousel__slide {
+    flex: 0 0 var(--mba-carousel-slide-width, 360px);
+    max-width: 100%;
+    scroll-snap-align: start;
+  }
+
+  /* ===========================================
+     PIED : pagination centrée + flèches à droite
+     =========================================== */
+  .mba-carousel__footer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 32px;
+    margin-top: var(--mba-space-md);
+  }
+
+  .mba-carousel__controls {
+    position: absolute;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mba-space-xs);
+  }
+
+  /* ===========================================
+     FLÈCHE (contrôle rond)
+     =========================================== */
+  .mba-carousel__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: var(--mba-space-xxs);
+    border: none;
+    border-radius: var(--mba-radius-full);
+    background-color: var(--mba-color-primary-500);
+    color: var(--mba-color-white);
+    cursor: pointer;
+    transition: background-color var(--mba-transition-base);
+  }
+
+  .mba-carousel__control:hover:not(:disabled):not(.is-disabled) {
+    background-color: var(--mba-color-primary-800);
+  }
+
+  .mba-carousel__control:focus-visible {
+    outline: none;
+    box-shadow: var(--mba-focus-ring);
+  }
+
+  /* Flèche en butée (début / fin de piste) */
+  .mba-carousel__control:disabled,
+  .mba-carousel__control.is-disabled {
+    background-color: var(--mba-color-grey-100);
+    cursor: not-allowed;
+  }
+
+  /* ===========================================
+     ACCESSIBILITÉ : mouvement réduit
+     =========================================== */
+  @media (prefers-reduced-motion: reduce) {
+    .mba-carousel__track {
+      scroll-behavior: auto;
+    }
+  }
+
+}
+/**
+ * MBA Design System - Navigation
+ *
+ * Fil d'Ariane (breadcrumb).
+ * - Le premier niveau porte une icône « maison » (home) + libellé.
+ * - Les séparateurs sont des chevrons décoratifs (keyboard_arrow_right).
+ * - Les niveaux parents sont des liens neutres (grey-800) ; l'élément courant
+ *   est mis en avant en primary-500 et n'est pas cliquable.
+ *
+ * Accessibilité (câblage markup, cf. story) :
+ * - Conteneur : <nav aria-label="Fil d'Ariane"> avec un <ol>.
+ * - Élément courant : aria-current="page" (stylé via l'attribut).
+ * - Séparateurs : aria-hidden="true".
+ *
+ * Source: Design System Figma (Breadcrumbs - Ma vie d'aidant, node 4660-18352).
+ */
+@layer components {
+
+  /* ===========================================
+     CONTENEUR
+     =========================================== */
+  .mba-breadcrumb {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xxs); /* 14px */
+    line-height: normal;
+  }
+
+  /* ===========================================
+     LISTE (<ol>)
+     Gap uniforme de 4px entre chaque élément et séparateur.
+     =========================================== */
+  .mba-breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mba-space-xxs); /* 4px */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* ===========================================
+     ITEM (<li>)
+     Contient le lien (ou l'élément courant) et son séparateur.
+     =========================================== */
+  .mba-breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mba-space-xxs); /* 4px */
+    min-width: 0;
+  }
+
+  /* ===========================================
+     LIEN (niveaux parents)
+     Neutre grey-800, hover primary-800 + soulignement.
+     =========================================== */
+  .mba-breadcrumb__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mba-space-xxs); /* 4px : icône home + libellé */
+    min-width: 0;
+    color: var(--mba-color-grey-800);
+    font-weight: var(--mba-font-weight-semibold);
+    text-decoration: none;
+    transition: color var(--mba-transition-base);
+  }
+
+  .mba-breadcrumb__link:hover {
+    color: var(--mba-color-primary-800);
+    text-decoration: underline;
+  }
+
+  .mba-breadcrumb__link:focus-visible {
+    outline: none;
+    border-radius: var(--mba-radius-2xs);
+    box-shadow: var(--mba-focus-ring);
+  }
+
+  /* Libellé tronqué proprement si trop long (mobile) */
+  .mba-breadcrumb__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Icône « maison » : hérite de la couleur du lien (grey-800) */
+  .mba-breadcrumb__home-icon {
+    flex-shrink: 0;
+    color: inherit;
+  }
+
+  /* ===========================================
+     SÉPARATEUR (chevron décoratif)
+     =========================================== */
+  .mba-breadcrumb__separator {
+    flex-shrink: 0;
+    color: var(--mba-color-grey-400);
+    user-select: none;
+  }
+
+  /* ===========================================
+     ÉLÉMENT COURANT (page active, non cliquable)
+     Accent primary-500. Stylé via la classe ou l'attribut aria-current.
+     =========================================== */
+  .mba-breadcrumb__current,
+  .mba-breadcrumb [aria-current="page"] {
+    color: var(--mba-color-primary-500);
+    font-weight: var(--mba-font-weight-semibold);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ===========================================
+     FIL REPLIABLE (ellipsis)
+     Pour les fils longs / mobile : les niveaux intermédiaires sont masqués
+     derrière un bouton « … » qui les déplie.
+     Comportement (masquage des items, bascule aria-expanded) piloté par l'app —
+     zéro JS dans le DS. Style du bouton aligné sur .mba-breadcrumb__link.
+     À câbler : <button class="mba-breadcrumb__toggle" aria-expanded="false"
+     aria-label="Afficher le fil d'Ariane complet">…</button>
+     =========================================== */
+  .mba-breadcrumb__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    padding: 0 var(--mba-space-xxs);
+    border: none;
+    background: transparent;
+    color: var(--mba-color-grey-800);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--mba-font-weight-semibold);
+    line-height: normal;
+    cursor: pointer;
+    transition: color var(--mba-transition-base);
+  }
+
+  .mba-breadcrumb__toggle:hover {
+    color: var(--mba-color-primary-800);
+  }
+
+  .mba-breadcrumb__toggle:focus-visible {
+    outline: none;
+    border-radius: var(--mba-radius-2xs);
+    box-shadow: var(--mba-focus-ring);
+  }
+
+  /* Item masqué tant que le fil est replié (bascule par l'app). */
+  .mba-breadcrumb__item.is-hidden {
+    display: none;
+  }
+
+}
 /**
  * MBA Design System - Utilities
  *
  * Classes utilitaires complémentaires à Tailwind
  */
-
 /* ===========================================
    FONT SIZE UTILITIES (MBA custom scale)
    Tailwind génère xs, sm, base, lg, xl, 2xl...
    On ajoute nos tailles custom : xxs, md, xxl
    =========================================== */
-
 .text-xxs {
   font-size: var(--mba-font-size-xxs);
 }
-
 .text-md {
   font-size: var(--mba-font-size-md);
 }
-
 .text-xxl {
   font-size: var(--mba-font-size-xxl);
 }
-
 /* ===========================================
    ACCESSIBILITY UTILITIES
    =========================================== */
-
 /* Reduced motion - Respect user preference for reduced animations
    Triggered when user enables "Reduce motion" in system settings
    (macOS, Windows, iOS, Android)
@@ -4892,7 +5572,6 @@ button.mba-input-icon__icon:hover {
 
    WCAG 2.1 Success Criterion 2.3.3 (AAA)
 */
-
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -4903,9 +5582,7 @@ button.mba-input-icon__icon:hover {
     scroll-behavior: auto !important;
   }
 }
-
 /* Visually hidden (accessible) */
-
 .mba-sr-only {
   position: absolute;
   width: 1px;
@@ -4917,9 +5594,7 @@ button.mba-input-icon__icon:hover {
   white-space: nowrap;
   border-width: 0;
 }
-
 /* Not visually hidden */
-
 .mba-not-sr-only {
   position: static;
   width: auto;
@@ -4930,43 +5605,32 @@ button.mba-input-icon__icon:hover {
   clip: auto;
   white-space: normal;
 }
-
 /* ===========================================
    VISIBILITY UTILITIES
    Override pour garantir le masquage même avec
    les composants MBA (display: inline-flex, etc.)
    =========================================== */
-
 /* Hidden - force display: none sur tous les composants */
-
 .hidden {
   display: none !important;
 }
-
 /* Visible utilities */
-
 .visible {
   visibility: visible;
 }
-
 .invisible {
   visibility: hidden;
 }
-
 /* ===========================================
    GRADIENT UTILITIES
    =========================================== */
-
 .bg-gradient-sunset {
   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;
@@ -4983,7 +5647,6 @@ button.mba-input-icon__icon:hover {
   opacity: 0;
   transition: opacity var(--mba-transition-base);
 }
-
 .mba-border-gradient:hover::before,
 .mba-border-gradient--visible::before {
   opacity: 1;