@maboussoleaidant/design-system 0.1.11 → 0.1.14

package/dist/mba-design-system.css

@@ -176,6 +176,7 @@
   /* ===========================================
      TAILLES DE POLICE (Figma Scale)
      =========================================== */
+  --mba-font-size-xxxs: 0.75rem;   /* 12px - feedback, captions */
   --mba-font-size-xxs: 0.875rem;   /* 14px */
   --mba-font-size-xs: 1rem;        /* 16px */
   --mba-font-size-sm: 1.125rem;    /* 18px */
@@ -214,10 +215,12 @@
 
 /* ===========================================
    HEADING PRESETS (Congenial)
+   Wrappé dans @layer components pour être overridable par utilities
    =========================================== */
 
-/* XXL - 48px Bold */
+@layer components {
 
+/* XXL - 48px Bold */
 .mba-heading-xxl {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-xxl);
@@ -226,7 +229,6 @@
 }
 
 /* XL - 32px Bold */
-
 .mba-heading-xl {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-xl);
@@ -235,7 +237,6 @@
 }
 
 /* MD - 24px Bold (Figma: extra-bold, mais Congenial ExtraBold non dispo) */
-
 .mba-heading-md {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-md);
@@ -244,7 +245,6 @@
 }
 
 /* SM - 18px Bold */
-
 .mba-heading-sm {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-sm);
@@ -253,7 +253,6 @@
 }
 
 /* XS - 16px Bold */
-
 .mba-heading-xs {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-xs);
@@ -262,7 +261,6 @@
 }
 
 /* XXS - 14px Bold */
-
 .mba-heading-xxs {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-xxs);
@@ -275,7 +273,6 @@
    =========================================== */
 
 /* XXL - 48px */
-
 .mba-text-xxl {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xxl);
@@ -284,7 +281,6 @@
 }
 
 /* XL - 32px */
-
 .mba-text-xl {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xl);
@@ -293,7 +289,6 @@
 }
 
 /* MD - 24px */
-
 .mba-text-md {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-md);
@@ -302,7 +297,6 @@
 }
 
 /* SM - 18px */
-
 .mba-text-sm {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-sm);
@@ -311,7 +305,6 @@
 }
 
 /* XS - 16px (Base) */
-
 .mba-text-xs {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xs);
@@ -320,7 +313,6 @@
 }
 
 /* XXS - 14px */
-
 .mba-text-xxs {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xxs);
@@ -328,6 +320,10 @@
   line-height: var(--mba-leading-normal);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Espacements
  *
@@ -352,6 +348,11 @@
      =========================================== */
   --mba-space-0: 0;
   --mba-space-px: 1px;
+
+  /* ===========================================
+     CONTAINER
+     =========================================== */
+  --mba-container-width: 70rem;   /* 1120px */
 }
 
 /**
@@ -723,8 +724,13 @@
  *
  * Reset CSS basé sur Tailwind Preflight / modern-normalize
  * https://tailwindcss.com/docs/preflight
+ *
+ * Wrappé dans @layer base pour permettre aux utilities Tailwind
+ * de l'overrider sans avoir besoin de !important
  */
 
+@layer base {
+
 *,
 ::before,
 ::after {
@@ -956,6 +962,10 @@ video {
   display: none;
 }
 
+}
+
+/* end @layer base */
+
 /**
  * MBA Design System - Base Typography
  *
@@ -1011,11 +1021,12 @@ a:hover {
  * Source: Design System Figma
  */
 
+@layer components {
+
 /* ===========================================
    BASE BUTTON (Primary - Large/Default)
    height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
-
 .mba-btn {
   display: inline-flex;
   height: 38px;
@@ -1031,7 +1042,7 @@ a:hover {
   border: 1px solid transparent;
   border-radius: var(--mba-radius-xs);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   white-space: nowrap;
 
@@ -1064,7 +1075,6 @@ a:hover {
    SECONDARY BUTTON (Large/Default)
    height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
-
 .mba-btn-secondary {
   display: inline-flex;
   height: 38px;
@@ -1079,7 +1089,7 @@ a:hover {
   text-decoration: none;
   border-radius: var(--mba-radius-xs);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   white-space: nowrap;
 
@@ -1112,7 +1122,6 @@ a:hover {
    TERTIARY BUTTON (Large/Default)
    height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
-
 .mba-btn-tertiary {
   display: inline-flex;
   height: 38px;
@@ -1128,7 +1137,7 @@ a:hover {
   border: none;
   border-radius: var(--mba-radius-xs);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   white-space: nowrap;
 
@@ -1158,7 +1167,6 @@ a:hover {
    INLINE BUTTON
    height: 24px, padding: 8px 16px, gap: 4px
    =========================================== */
-
 .mba-btn-inline {
   display: inline-flex;
   height: 24px;
@@ -1174,7 +1182,7 @@ a:hover {
   border: none;
   border-radius: var(--mba-radius-xs);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   white-space: nowrap;
 
@@ -1203,7 +1211,6 @@ a:hover {
 }
 
 /* Alert-Error state */
-
 .mba-btn-inline.is-error {
   background-color: var(--mba-color-white);
   color: var(--mba-color-error-500);
@@ -1214,7 +1221,6 @@ a:hover {
    LIGHT BUTTON (Large/Default)
    height: 30px, padding: 4px 12px, gap: 4px
    =========================================== */
-
 .mba-btn-light {
   display: inline-flex;
   height: 30px;
@@ -1230,7 +1236,7 @@ a:hover {
   border: 1.5px solid var(--mba-color-primary-400);
   border-radius: var(--mba-radius-sm);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   white-space: nowrap;
 
@@ -1263,7 +1269,6 @@ a:hover {
    ANNUAIRE BUTTON (Large/Default)
    height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
-
 .mba-btn-annuaire {
   display: inline-flex;
   height: 38px;
@@ -1279,7 +1284,7 @@ a:hover {
   border: 1px solid var(--mba-color-grey-100);
   border-radius: var(--mba-radius-xs);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   white-space: nowrap;
 
@@ -1311,7 +1316,6 @@ a:hover {
    PIN BUTTON
    width: 40px, height: 40px, icon: 20px
    =========================================== */
-
 .mba-btn-pin {
   display: inline-flex;
   width: 40px;
@@ -1322,7 +1326,7 @@ a:hover {
   border: 1px solid var(--mba-color-primary-500);
   border-radius: 50%;
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
 
   background-color: var(--mba-color-white);
@@ -1341,7 +1345,6 @@ 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);
@@ -1349,7 +1352,6 @@ a:hover {
 }
 
 /* Activated state */
-
 .mba-btn-pin.is-activated {
   border-color: var(--mba-color-primary-500);
   background-color: var(--mba-color-primary-500);
@@ -1371,7 +1373,6 @@ a:hover {
    ICON BUTTON
    width: 24px, height: 24px, icon: 16px
    =========================================== */
-
 .mba-btn-icon-only {
   display: inline-flex;
   width: 24px;
@@ -1381,7 +1382,7 @@ a:hover {
   align-items: center;
   border-radius: var(--mba-radius-xs);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   border: 1px solid var(--mba-color-black);
   background-color: var(--mba-color-white);
@@ -1405,7 +1406,6 @@ a:hover {
 }
 
 /* Activated state */
-
 .mba-btn-icon-only.is-activated {
   border-color: var(--mba-color-primary-500);
   background-color: var(--mba-color-white);
@@ -1418,7 +1418,6 @@ a:hover {
 }
 
 /* Disabled state */
-
 .mba-btn-icon-only:disabled,
 .mba-btn-icon-only.is-disabled {
   border-color: var(--mba-color-grey-300);
@@ -1429,7 +1428,6 @@ a:hover {
 }
 
 /* Alert state */
-
 .mba-btn-icon-only.is-alert {
   border-color: var(--mba-color-error-500);
   background-color: var(--mba-color-white);
@@ -1445,7 +1443,6 @@ a:hover {
    SMALL BUTTON
    padding: 4px 8px, gap: 8px
    =========================================== */
-
 .mba-btn-sm {
   height: auto;
   padding: var(--mba-space-xxs) var(--mba-space-xs);
@@ -1456,7 +1453,6 @@ a:hover {
 /* ===========================================
    ICON ALIGNMENT
    =========================================== */
-
 .mba-btn-icon-only i,
 .mba-btn-icon-only svg,
 .mba-btn i,
@@ -1467,7 +1463,6 @@ a:hover {
 }
 
 /* Arrow forward icon alignment */
-
 .mba-btn .arrow-forward,
 .mba-btn-secondary .arrow-forward {
   vertical-align: middle;
@@ -1478,7 +1473,6 @@ a:hover {
    =========================================== */
 
 /* Full width */
-
 .mba-btn-block {
   display: block;
   width: 100%;
@@ -1488,7 +1482,6 @@ a:hover {
 /* ===========================================
    RESPONSIVE (full width on mobile)
    =========================================== */
-
 @media (max-width: 767px) {
   .mba-btn,
   .mba-btn-secondary {
@@ -1498,6 +1491,71 @@ a:hover {
   }
 }
 
+}
+
+/* end @layer components */
+
+/**
+ * MBA Design System - Links
+ *
+ * Composant de lien avec icône
+ * L'underline au hover s'applique uniquement au texte, pas à l'icône
+ *
+ * Classes:
+ * - .mba-link - Lien de base avec icône
+ *
+ * Structure HTML:
+ * <a href="#" class="mba-link">
+ *   <span class="mba-link__text">En lire plus</span>
+ *   <span class="material-symbols-rounded">arrow_forward</span>
+ * </a>
+ */
+
+@layer components {
+
+.mba-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  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-500);
+  text-decoration: none;
+  transition: color var(--mba-transition-base);
+}
+
+.mba-link:hover {
+  color: var(--mba-color-primary-800);
+}
+
+/* Underline uniquement sur le texte, pas l'icône */
+.mba-link__text {
+  text-decoration: none;
+  transition: text-decoration var(--mba-transition-base);
+}
+
+.mba-link:hover .mba-link__text {
+  text-decoration: underline;
+}
+
+/* Icône */
+.mba-link .material-symbols-rounded {
+  font-size: 20px;
+  text-decoration: none;
+}
+
+/* Focus state */
+.mba-link:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+  border-radius: var(--mba-radius-2xs);
+}
+
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Cards
  *
@@ -1505,11 +1563,12 @@ a:hover {
  * Source: Design System Figma
  */
 
+@layer components {
+
 /* ===========================================
    BASE CARD (Large / Default)
    padding: 24px (MD), border-radius: 16px (SM)
    =========================================== */
-
 .mba-card {
   display: flex;
   flex-direction: column;
@@ -1517,7 +1576,7 @@ a:hover {
   border-radius: var(--mba-radius-sm);
   background-color: var(--mba-color-beige);
   border: 2px solid transparent;
-  transition: border-color 0.25s ease-in-out;
+  transition: border-color var(--mba-transition-base);
   cursor: pointer;
 }
 
@@ -1528,7 +1587,6 @@ a:hover {
 /* ===========================================
    SMALL CARD
    =========================================== */
-
 .mba-card--sm {
   padding: var(--mba-space-sm);
 }
@@ -1536,7 +1594,6 @@ a:hover {
 /* ===========================================
    CARD PARTS
    =========================================== */
-
 .mba-card__header {
   display: flex;
   justify-content: space-between;
@@ -1569,7 +1626,7 @@ a:hover {
   flex-shrink: 0;
   color: var(--mba-color-primary-500);
   font-size: 24px;
-  transition: transform 0.2s ease;
+  transition: transform var(--mba-transition-base);
 }
 
 .mba-card__icon svg {
@@ -1584,7 +1641,6 @@ a:hover {
 /* ===========================================
    CARD GRID
    =========================================== */
-
 .mba-card-grid {
   display: grid;
   gap: var(--mba-space-md);
@@ -1609,13 +1665,11 @@ a:hover {
    =========================================== */
 
 /* White background */
-
 .mba-card--white {
   background-color: var(--mba-color-white);
 }
 
 /* Non-interactive (no hover) */
-
 .mba-card--static {
   cursor: default;
 }
@@ -1628,7 +1682,6 @@ a:hover {
    CAROUSEL CARD (Testimonial)
    Bordure gradient sunset
    =========================================== */
-
 .mba-carousel-card {
   position: relative;
   display: flex;
@@ -1692,14 +1745,13 @@ a:hover {
    STATS CARD
    Bordure gradient sunset
    =========================================== */
-
 .mba-stats-card {
   position: relative;
   padding: var(--mba-space-md);
   background-color: var(--mba-color-white);
   border-radius: var(--mba-radius-md);
   box-shadow: var(--mba-shadow-xs);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition: transform var(--mba-transition-slow), box-shadow var(--mba-transition-slow);
 }
 
 .mba-stats-card::before {
@@ -1751,7 +1803,6 @@ a:hover {
 /* ===========================================
    STATS GRID
    =========================================== */
-
 .mba-stats-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -1771,6 +1822,133 @@ a:hover {
   }
 }
 
+/* ===========================================
+   ARTICLE CARD (avec image)
+   Image en haut, tag, titre, texte, lien
+   =========================================== */
+.mba-article-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-sm);
+  overflow: hidden;
+  box-shadow: var(--mba-shadow-xs);
+  transition: box-shadow var(--mba-transition-base), transform var(--mba-transition-base);
+}
+
+.mba-article-card:hover {
+  box-shadow: var(--mba-shadow-sm);
+  transform: translateY(-2px);
+}
+
+/* Image container (pour positionner le tag) */
+.mba-article-card__image-wrapper {
+  position: relative;
+}
+
+.mba-article-card__image {
+  display: block;
+  width: 100%;
+  height: 152px;
+  object-fit: cover;
+  border-radius: var(--mba-radius-sm) var(--mba-radius-sm) 0 0;
+}
+
+/* Tag/badge sur l'image */
+.mba-article-card__tag {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: var(--mba-space-xxs) var(--mba-space-xs);
+  background-color: var(--mba-color-brick);
+  color: var(--mba-color-white);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  border-radius: 0 var(--mba-radius-xs) 0 0;
+}
+
+.mba-article-card__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: var(--mba-space-sm) var(--mba-space-sm) 0;
+  gap: var(--mba-space-xs);
+}
+
+.mba-article-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-800);
+  margin: 0;
+}
+
+.mba-article-card__text {
+  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);
+  line-height: var(--mba-leading-normal);
+  margin: 0;
+}
+
+/* Footer avec lien */
+.mba-article-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 var(--mba-space-sm) var(--mba-space-sm);
+  margin-top: var(--mba-space-md);
+}
+
+.mba-article-card__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  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-500);
+  text-decoration: none;
+  transition: color var(--mba-transition-base);
+}
+
+.mba-article-card__link:hover {
+  color: var(--mba-color-primary-800);
+}
+
+.mba-article-card__link:hover .mba-article-card__link-text {
+  text-decoration: underline;
+}
+
+.mba-article-card__link .material-symbols-rounded {
+  font-size: 20px;
+}
+
+/* Grid pour article cards */
+.mba-article-card-grid {
+  display: grid;
+  gap: var(--mba-space-md);
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .mba-article-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 900px) {
+  .mba-article-card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Arrow Buttons
  *
@@ -1783,6 +1961,8 @@ a:hover {
  * - disabled: Grey-300
  */
 
+@layer components {
+
 .mba-arrow {
   display: inline-flex;
   align-items: center;
@@ -1793,7 +1973,7 @@ a:hover {
   color: var(--mba-color-white);
   border: none;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: background-color var(--mba-transition-base);
 }
 
 .mba-arrow:hover {
@@ -1806,7 +1986,6 @@ a:hover {
 }
 
 /* Disabled state */
-
 .mba-arrow:disabled,
 .mba-arrow.is-disabled {
   background-color: var(--mba-color-grey-300);
@@ -1819,11 +1998,14 @@ a:hover {
 }
 
 /* Icon sizing */
-
 .mba-arrow .material-symbols-rounded {
   font-size: 24px;
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Radio & Checkbox
  *
@@ -1831,10 +2013,11 @@ a:hover {
  * Source: Design System Figma
  */
 
+@layer components {
+
 /* ===========================================
    RADIO BUTTON - Aidants (Primary)
    =========================================== */
-
 .mba-radio {
   position: relative;
   display: inline-flex;
@@ -1861,7 +2044,7 @@ a:hover {
   border-radius: 8px;
   border: 1px solid var(--mba-color-primary-900);
   background-color: var(--mba-color-white);
-  transition: all 0.2s ease;
+  transition: all var(--mba-transition-base);
 }
 
 .mba-radio .mba-radio__control::after {
@@ -1874,11 +2057,10 @@ a:hover {
   height: 12px;
   border-radius: 50%;
   background-color: var(--mba-color-primary-400);
-  transition: transform 0.2s ease;
+  transition: transform var(--mba-transition-base);
 }
 
 /* Hover state (pas sur disabled) */
-
 .mba-radio:hover:not(:has(input:disabled)) .mba-radio__control::after {
   transform: translate(-50%, -50%) scale(1);
   width: 10px;
@@ -1886,7 +2068,6 @@ a:hover {
 }
 
 /* Selected state */
-
 .mba-radio input:checked + .mba-radio__control::after {
   transform: translate(-50%, -50%) scale(1);
   width: 12px;
@@ -1894,13 +2075,11 @@ a:hover {
 }
 
 /* Focus state */
-
 .mba-radio input:focus + .mba-radio__control {
   box-shadow: var(--mba-focus-ring);
 }
 
 /* Disabled state */
-
 .mba-radio input:disabled + .mba-radio__control {
   border-color: var(--mba-color-grey-300);
   background-color: var(--mba-color-grey-50);
@@ -1918,7 +2097,6 @@ a:hover {
 /* ===========================================
    RADIO BUTTON - Partenaire (PrimaryPro)
    =========================================== */
-
 .mba-radio--pro .mba-radio__control {
   border-color: var(--mba-color-primary-pro-800);
 }
@@ -1930,7 +2108,6 @@ a:hover {
 /* ===========================================
    CHECKBOX - Aidants (Primary)
    =========================================== */
-
 .mba-checkbox {
   position: relative;
   display: inline-flex;
@@ -1957,7 +2134,7 @@ a:hover {
   border-radius: var(--mba-radius-2xs);
   border: 1px solid var(--mba-color-primary-900);
   background-color: var(--mba-color-white);
-  transition: all 0.2s ease;
+  transition: all var(--mba-transition-base);
 }
 
 .mba-checkbox .mba-checkbox__control::after {
@@ -1970,11 +2147,10 @@ a:hover {
   height: 12px;
   border-radius: 2px;
   background-color: var(--mba-color-primary-400);
-  transition: transform 0.2s ease;
+  transition: transform var(--mba-transition-base);
 }
 
 /* Hover state (pas sur disabled) */
-
 .mba-checkbox:hover:not(:has(input:disabled)) .mba-checkbox__control::after {
   transform: translate(-50%, -50%) scale(1);
   width: 10px;
@@ -1982,7 +2158,6 @@ a:hover {
 }
 
 /* Selected state */
-
 .mba-checkbox input:checked + .mba-checkbox__control::after {
   transform: translate(-50%, -50%) scale(1);
   width: 12px;
@@ -1990,13 +2165,11 @@ a:hover {
 }
 
 /* Focus state */
-
 .mba-checkbox input:focus + .mba-checkbox__control {
   box-shadow: var(--mba-focus-ring);
 }
 
 /* Disabled state */
-
 .mba-checkbox input:disabled + .mba-checkbox__control {
   border-color: var(--mba-color-grey-300);
   background-color: var(--mba-color-grey-50);
@@ -2014,7 +2187,6 @@ a:hover {
 /* ===========================================
    CHECKBOX - Partenaire (PrimaryPro)
    =========================================== */
-
 .mba-checkbox--pro .mba-checkbox__control {
   border-color: var(--mba-color-primary-pro-800);
 }
@@ -2026,7 +2198,6 @@ a:hover {
 /* ===========================================
    WITH LABEL
    =========================================== */
-
 .mba-radio-label,
 .mba-checkbox-label {
   display: inline-flex;
@@ -2044,6 +2215,10 @@ a:hover {
   color: var(--mba-color-grey-400);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Pagination
  *
@@ -2051,11 +2226,12 @@ a:hover {
  * Source: Design System Figma
  */
 
+@layer components {
+
 /* ===========================================
    PAGINATION CONTAINER
    height: hug (32px), gap: 16px (SM)
    =========================================== */
-
 .mba-pagination {
   display: inline-flex;
   align-items: center;
@@ -2069,7 +2245,6 @@ a:hover {
    PAGINATION ITEM
    width: 32px, height: 32px
    =========================================== */
-
 .mba-pagination-item {
   display: inline-flex;
   width: 32px;
@@ -2078,15 +2253,14 @@ a:hover {
   justify-content: center;
   align-items: center;
   font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xs);
+  font-size: var(--mba-font-size-sm);
   font-weight: var(--mba-font-weight-semibold);
-  font-size: 18px;
   line-height: var(--mba-leading-snug);
   text-decoration: none;
   border: none;
   border-radius: var(--mba-radius-xs);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   background-color: var(--mba-color-white);
   color: var(--mba-color-black);
@@ -2103,7 +2277,6 @@ a:hover {
 }
 
 /* Active state */
-
 .mba-pagination-item.is-active {
   background-color: var(--mba-color-secondary-500);
   border-radius: 50%;
@@ -2112,7 +2285,6 @@ a:hover {
 }
 
 /* Disabled state */
-
 .mba-pagination-item:disabled,
 .mba-pagination-item.is-disabled {
   background-color: var(--mba-color-white);
@@ -2124,7 +2296,6 @@ a:hover {
 /* ===========================================
    PAGINATION ELLIPSIS
    =========================================== */
-
 .mba-pagination-ellipsis {
   display: inline-flex;
   width: 32px;
@@ -2145,7 +2316,6 @@ a:hover {
    PAGINATION ARROW BUTTON
    width: 32px, height: 32px
    =========================================== */
-
 .mba-pagination-arrow {
   display: inline-flex;
   width: 32px;
@@ -2156,7 +2326,7 @@ a:hover {
   border: none;
   border-radius: var(--mba-radius-xs);
   cursor: pointer;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--mba-transition-base);
   user-select: none;
   background-color: var(--mba-color-white);
   color: var(--mba-color-black);
@@ -2186,6 +2356,48 @@ a:hover {
   pointer-events: none;
 }
 
+/* ===========================================
+   DOTS PAGINATION (Carrousel)
+   Indicateurs de slide sous forme de points
+   =========================================== */
+.mba-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.mba-dot {
+  width: 40px;
+  height: 8px;
+  border-radius: var(--mba-radius-full);
+  background-color: var(--mba-color-grey-300);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color var(--mba-transition-base);
+}
+
+.mba-dot:hover:not(.is-active) {
+  background-color: var(--mba-color-grey-400);
+}
+
+.mba-dot:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+.mba-dot.is-active {
+  background-color: var(--mba-color-primary-500);
+  cursor: default;
+}
+
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Inputs
  *
@@ -2193,10 +2405,11 @@ a:hover {
  * Source: Design System Figma
  */
 
+@layer components {
+
 /* ===========================================
    LABEL
    =========================================== */
-
 .mba-label {
   display: flex;
   align-items: center;
@@ -2209,14 +2422,12 @@ a:hover {
 }
 
 /* Asterisque required */
-
 .mba-label__required {
   color: var(--mba-color-error-500);
   font-size: var(--mba-font-size-xxs);
 }
 
 /* Icone info */
-
 .mba-label__icon {
   font-size: 16px;
   color: var(--mba-color-grey-400);
@@ -2225,7 +2436,6 @@ a:hover {
 /* ===========================================
    TEXTAREA - Base
    =========================================== */
-
 .mba-textarea {
   display: block;
   width: 100%;
@@ -2238,17 +2448,15 @@ a:hover {
   font-weight: var(--mba-font-weight-regular);
   color: var(--mba-color-black);
   resize: vertical;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color var(--mba-transition-base), box-shadow var(--mba-transition-base);
 }
 
 /* Placeholder */
-
 .mba-textarea::placeholder {
   color: var(--mba-color-grey-400);
 }
 
 /* Focus state */
-
 .mba-textarea:focus {
   outline: none;
   border-color: var(--mba-color-info-400);
@@ -2256,13 +2464,11 @@ a:hover {
 }
 
 /* Active state (typing) - placeholder devient noir si visible */
-
 .mba-textarea:focus::placeholder {
   color: var(--mba-color-black);
 }
 
 /* Disabled state */
-
 .mba-textarea:disabled {
   background-color: var(--mba-color-grey-50);
   border-color: var(--mba-color-grey-100);
@@ -2274,14 +2480,12 @@ a:hover {
 }
 
 /* Hover state */
-
 .mba-textarea:hover:not(:focus):not(:disabled):not(.mba-textarea--error):not(.mba-textarea--valid) {
   border-color: var(--mba-color-info-400);
   box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
 }
 
 /* Error state */
-
 .mba-textarea--error {
   border-color: var(--mba-color-error-500);
   box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
@@ -2293,7 +2497,6 @@ a:hover {
 }
 
 /* Valid state */
-
 .mba-textarea--valid {
   border-color: var(--mba-color-success-500);
   box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
@@ -2307,7 +2510,6 @@ a:hover {
 /* ===========================================
    INPUT - Base
    =========================================== */
-
 .mba-input {
   display: block;
   width: 100%;
@@ -2319,24 +2521,21 @@ a:hover {
   font-size: var(--mba-font-size-xxs);
   font-weight: var(--mba-font-weight-regular);
   color: var(--mba-color-black);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color var(--mba-transition-base), box-shadow var(--mba-transition-base);
 }
 
 /* Placeholder */
-
 .mba-input::placeholder {
   color: var(--mba-color-grey-400);
 }
 
 /* Hover state */
-
 .mba-input:hover:not(:focus):not(:disabled):not(.mba-input--error):not(.mba-input--valid) {
   border-color: var(--mba-color-info-400);
   box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
 }
 
 /* Focus state */
-
 .mba-input:focus {
   outline: none;
   border-color: var(--mba-color-info-400);
@@ -2344,7 +2543,6 @@ a:hover {
 }
 
 /* Disabled state */
-
 .mba-input:disabled {
   background-color: var(--mba-color-grey-50);
   border-color: var(--mba-color-grey-100);
@@ -2358,7 +2556,6 @@ a:hover {
 /* ===========================================
    INPUT - Error state
    =========================================== */
-
 .mba-input--error {
   border-color: var(--mba-color-error-500);
   box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
@@ -2372,7 +2569,6 @@ a:hover {
 /* ===========================================
    INPUT - Validate state
    =========================================== */
-
 .mba-input--valid {
   border-color: var(--mba-color-success-500);
   box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
@@ -2386,10 +2582,9 @@ a:hover {
 /* ===========================================
    FEEDBACK MESSAGE (error / success)
    =========================================== */
-
 .mba-feedback {
   font-family: var(--mba-font-family-text);
-  font-size: 12px;
+  font-size: var(--mba-font-size-xxxs);
   font-weight: var(--mba-font-weight-regular);
 }
 
@@ -2404,7 +2599,6 @@ a:hover {
 /* ===========================================
    DROPDOWN
    =========================================== */
-
 .mba-dropdown {
   position: relative;
   display: inline-block;
@@ -2412,7 +2606,6 @@ a:hover {
 }
 
 /* Trigger (select-like button) */
-
 .mba-dropdown__trigger {
   display: flex;
   align-items: center;
@@ -2427,7 +2620,7 @@ a:hover {
   font-weight: var(--mba-font-weight-regular);
   color: var(--mba-color-black);
   cursor: pointer;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color var(--mba-transition-base), box-shadow var(--mba-transition-base);
 }
 
 .mba-dropdown__trigger--placeholder {
@@ -2453,11 +2646,10 @@ a:hover {
 }
 
 /* Chevron icon */
-
 .mba-dropdown__chevron {
   font-size: 20px;
   color: var(--mba-color-grey-400);
-  transition: transform 0.2s ease;
+  transition: transform var(--mba-transition-base);
 }
 
 .mba-dropdown--open .mba-dropdown__chevron {
@@ -2465,7 +2657,6 @@ a:hover {
 }
 
 /* Error state */
-
 .mba-dropdown--error .mba-dropdown__trigger {
   border-color: var(--mba-color-error-500);
   box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
@@ -2477,7 +2668,6 @@ a:hover {
 }
 
 /* Valid state */
-
 .mba-dropdown--valid .mba-dropdown__trigger {
   border-color: var(--mba-color-success-500);
   box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
@@ -2489,7 +2679,6 @@ a:hover {
 }
 
 /* Panel */
-
 .mba-dropdown__panel {
   position: absolute;
   top: calc(100% + 4px);
@@ -2512,7 +2701,6 @@ a:hover {
 }
 
 /* Custom scrollbar */
-
 .mba-dropdown__panel::-webkit-scrollbar {
   width: 6px;
 }
@@ -2527,7 +2715,6 @@ a:hover {
 }
 
 /* Option */
-
 .mba-dropdown__option {
   padding: var(--mba-space-xs);
   border-radius: var(--mba-radius-xs);
@@ -2536,7 +2723,7 @@ a:hover {
   font-weight: var(--mba-font-weight-regular);
   color: var(--mba-color-black);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--mba-transition-fast);
 }
 
 .mba-dropdown__option:hover {
@@ -2549,7 +2736,6 @@ a:hover {
 }
 
 /* Option selected - Pro variant */
-
 .mba-dropdown--pro .mba-dropdown__option--selected {
   border-color: var(--mba-color-primary-pro-400);
 }
@@ -2558,7 +2744,6 @@ a:hover {
    TOGGLE SWITCH
    width: 42px, height: 24px, cercle: 20px
    =========================================== */
-
 .mba-toggle {
   position: relative;
   display: inline-block;
@@ -2580,7 +2765,7 @@ a:hover {
   right: 0;
   bottom: 0;
   background-color: var(--mba-color-grey-300);
-  transition: all 0.3s ease;
+  transition: all var(--mba-transition-slow);
   border-radius: 32px;
 }
 
@@ -2592,7 +2777,7 @@ a:hover {
   left: 2px;
   top: 2px;
   background-color: var(--mba-color-white);
-  transition: all 0.3s ease;
+  transition: all var(--mba-transition-slow);
   border-radius: 50%;
 }
 
@@ -2616,7 +2801,6 @@ a:hover {
 /* ===========================================
    INPUT WITH ICON
    =========================================== */
-
 .mba-input-icon {
   display: flex;
   align-items: center;
@@ -2625,7 +2809,7 @@ a:hover {
   border-radius: var(--mba-radius-xs);
   border: 1px solid var(--mba-color-grey-100);
   background-color: var(--mba-color-white);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color var(--mba-transition-base), box-shadow var(--mba-transition-base);
 }
 
 .mba-input-icon input {
@@ -2650,13 +2834,12 @@ a:hover {
 }
 
 /* Icon clickable (button) */
-
 button.mba-input-icon__icon {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
-  transition: color 0.2s ease;
+  transition: color var(--mba-transition-base);
 }
 
 button.mba-input-icon__icon:hover {
@@ -2664,21 +2847,18 @@ button.mba-input-icon__icon:hover {
 }
 
 /* Hover state */
-
 .mba-input-icon:hover:not(:focus-within):not(.mba-input-icon--disabled):not(.mba-input-icon--error) {
   border-color: var(--mba-color-info-400);
   box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
 }
 
 /* Focus state */
-
 .mba-input-icon:focus-within {
   border-color: var(--mba-color-info-400);
   box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
 }
 
 /* Disabled state */
-
 .mba-input-icon--disabled {
   background-color: var(--mba-color-grey-50);
   cursor: not-allowed;
@@ -2690,7 +2870,6 @@ button.mba-input-icon__icon:hover {
 }
 
 /* Error state */
-
 .mba-input-icon--error {
   border-color: var(--mba-color-error-500);
   box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
@@ -2708,7 +2887,6 @@ button.mba-input-icon__icon:hover {
 /* ===========================================
    INPUT GROUP (input + button)
    =========================================== */
-
 .mba-input-group {
   display: flex;
   align-items: stretch;
@@ -2723,13 +2901,16 @@ button.mba-input-icon__icon:hover {
 /* ===========================================
    FORM GROUP (label + input)
    =========================================== */
-
 .mba-form-group {
   display: flex;
   flex-direction: column;
   gap: var(--mba-space-xxs);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Wave
  *
@@ -2749,6 +2930,8 @@ button.mba-input-icon__icon:hover {
  * <div class="mba-wave mba-wave--sm mba-wave--lavender mba-wave--top"></div>
  */
 
+@layer components {
+
 .mba-wave {
   display: block;
   width: 100%;
@@ -2763,7 +2946,6 @@ button.mba-input-icon__icon:hover {
 }
 
 /* Position variants */
-
 .mba-wave--top {
   -webkit-mask-image: var(--mba-wave-dip-down-mask);
   mask-image: var(--mba-wave-dip-down-mask);
@@ -2775,7 +2957,6 @@ button.mba-input-icon__icon:hover {
 }
 
 /* Size variants */
-
 .mba-wave--sm {
   height: var(--mba-wave-sm-height);
   -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
@@ -2788,7 +2969,6 @@ button.mba-input-icon__icon:hover {
 }
 
 /* Color variants */
-
 .mba-wave--lavender {
   background-color: var(--mba-color-pastel-lavender);
 }
@@ -2805,6 +2985,10 @@ button.mba-input-icon__icon:hover {
   background-color: var(--mba-color-primary-50);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Section
  *
@@ -2820,6 +3004,7 @@ button.mba-input-icon__icon:hover {
  * - .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">
@@ -2832,6 +3017,8 @@ button.mba-input-icon__icon:hover {
  * </section>
  */
 
+@layer components {
+
 .mba-section {
   position: relative;
   width: 100%;
@@ -2840,15 +3027,34 @@ button.mba-input-icon__icon:hover {
 .mba-section__content {
   position: relative;
   z-index: 1;
-  max-width: 1280px;
+  max-width: var(--mba-container-width);
   margin: 0 auto;
-  padding: var(--mba-space-xl) var(--mba-space-md);
+  padding: var(--mba-space-xxl) 0;
 }
 
-@media (min-width: 768px) {
-  .mba-section__content {
-    padding: var(--mba-space-xxl) var(--mba-space-lg);
-  }
+/* ===========================================
+   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));
 }
 
 /* ===========================================
@@ -2953,6 +3159,10 @@ button.mba-input-icon__icon:hover {
   background-color: var(--mba-color-primary-50);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Footer
  *
@@ -2972,6 +3182,8 @@ button.mba-input-icon__icon:hover {
  * - .mba-footer--pro           - Version partenaire (primary-pro)
  */
 
+@layer components {
+
 /* ===========================================
    FOOTER CONTAINER
    =========================================== */
@@ -2986,7 +3198,7 @@ button.mba-input-icon__icon:hover {
    =========================================== */
 
 .mba-footer__main {
-  max-width: 1120px;
+  max-width: var(--mba-container-width);
   margin: 0 auto;
   padding: var(--mba-space-xl) var(--mba-space-sm) var(--mba-space-sm);
   display: flex;
@@ -3043,7 +3255,7 @@ button.mba-input-icon__icon:hover {
 .mba-footer__mission {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xxs);
-  line-height: var(--mba-line-height-relaxed);
+  line-height: var(--mba-leading-relaxed);
   color: var(--mba-color-text);
   margin: 0;
   max-width: 300px;
@@ -3080,6 +3292,7 @@ button.mba-input-icon__icon:hover {
   }
 }
 
+
 .mba-footer__nav-group {
   display: flex;
   flex-direction: column;
@@ -3188,6 +3401,7 @@ button.mba-input-icon__icon:hover {
   align-items: center;
 }
 
+
 .mba-footer__social-link {
   display: flex;
   align-items: center;
@@ -3216,8 +3430,9 @@ button.mba-input-icon__icon:hover {
   background-color: var(--mba-color-pastel-lavender);
 }
 
+
 .mba-footer__legal {
-  max-width: 1120px;
+  max-width: var(--mba-container-width);
   margin: 0 auto;
   padding: var(--mba-space-md) var(--mba-space-sm);
   display: flex;
@@ -3325,6 +3540,10 @@ button.mba-input-icon__icon:hover {
   border-top-color: var(--mba-color-primary-pro-400);
 }
 
+}
+
+/* end @layer components */
+
 /* @import "./_forms.css"; */
 
 /* @import "./_alerts.css"; */