npm - @maboussoleaidant/design-system - Versions diffs - 0.1.37 → 0.1.39 - Mend

@maboussoleaidant/design-system 0.1.37 → 0.1.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/AGENTS.md +7 -4
package/CHANGELOG.md +76 -0
package/LICENSE +0 -0
package/README.md +0 -0
package/assets/fonts/Congenial-Bold.woff2 +0 -0
package/assets/fonts/Congenial-Medium.woff2 +0 -0
package/assets/fonts/Congenial.woff2 +0 -0
package/assets/fonts/MaterialSymbolsRounded.woff2 +0 -0
package/assets/fonts/OpenSans-Bold.woff2 +0 -0
package/assets/fonts/OpenSans-ExtraBold.woff2 +0 -0
package/assets/fonts/OpenSans-Regular.woff2 +0 -0
package/assets/fonts/OpenSans-SemiBold.woff2 +0 -0
package/assets/icons-social.svg +0 -0
package/assets/logo-mba-agirc-arrco-pro.svg +0 -0
package/assets/logo-mba-agirc-arrco.svg +0 -0
package/assets/wave.svg +0 -0
package/dist/mba-design-system.css +788 -5
package/dist/mba-design-system.css.map +1 -1
package/dist/mba-design-system.min.css +2 -2
package/dist/mba-tailwind.css +544 -11
package/dist/mba-tailwind.css.map +1 -1
package/dist/mba-tailwind.min.css +2 -2
package/dist/mba-tokens-only.css +0 -0
package/dist/mba-tokens-only.css.map +0 -0
package/package.json +2 -1
package/src/tailwind-preset.css +0 -0
package/src/tokens/_breakpoints.css +0 -0
package/src/tokens/_colors.css +0 -0
package/src/tokens/_decorations.css +0 -0
package/src/tokens/_radius.css +0 -0
package/src/tokens/_shadows.css +0 -0
package/src/tokens/_spacing.css +0 -0
package/src/tokens/_transitions.css +0 -0
package/src/tokens/_typography.css +0 -0
package/src/tokens/index.css +0 -0

package/dist/mba-design-system.css CHANGED Viewed

@@ -1505,6 +1505,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
@@ -1710,6 +1757,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,6 +2054,239 @@ 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;
+}
+/* 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 */
@@ -2438,6 +2736,32 @@ 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);
+}
+.mba-dots--expand .mba-dot:hover:not(.is-active) {
+  background-color: var(--mba-color-grey-300);
+}
+.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 */
@@ -2880,6 +3204,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;
@@ -4571,7 +4903,169 @@ button.mba-input-icon__icon:hover {
 /* @import "./_forms.css"; */
-/* @import "./_alerts.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);
+  }
+  /* ===========================================
+     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
@@ -4668,6 +5162,19 @@ button.mba-input-icon__icon:hover {
     background-color: transparent;
   }
+  /* ===========================================
+     IMBRICATION (parent → sous-éléments)
+     - Parent : séparateur ligne pleine (défaut .mba-accordion--line).
+     - Sous-élément imbriqué dans le panneau du parent : ligne pointillés.
+     - Replier le parent replie visuellement les sous-éléments : ils vivent
+       dans .mba-accordion__panel (display:none tant que le parent est fermé).
+     =========================================== */
+  /* Tout accordion line imbriqué dans le panneau d'un parent → trait pointillés */
+  .mba-accordion__panel .mba-accordion--line .mba-accordion__header {
+    border-bottom-style: dashed;
+  }
   .mba-accordion__title-wrapper {
     display: flex;
     align-items: center;
@@ -4725,7 +5232,8 @@ button.mba-input-icon__icon:hover {
     transition: transform var(--mba-transition-base);
   }
-  .mba-accordion--open .mba-accordion__icon {
+  /* Enfant direct uniquement : ne pas piloter l'icône des accordions imbriqués */
+  .mba-accordion--open > .mba-accordion__header .mba-accordion__icon {
     transform: rotate(180deg);
   }
@@ -4737,7 +5245,9 @@ button.mba-input-icon__icon:hover {
     background-color: var(--mba-color-white);
   }
-  .mba-accordion--open .mba-accordion__panel {
+  /* Enfant direct uniquement : chaque accordion contrôle son propre panneau,
+     sans forcer l'ouverture des panneaux des accordions imbriqués */
+  .mba-accordion--open > .mba-accordion__panel {
     display: block;
   }
@@ -4833,9 +5343,282 @@ button.mba-input-icon__icon:hover {
 }
-/* @import "./_carousel.css"; */
+/**
+ * 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 {
+  .mba-carousel {
+    width: 100%;
+  }
+  /* ===========================================
+     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;
+  }
-/* @import "./_navigation.css"; */
+  /* ===========================================
+     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