@maboussoleaidant/design-system 0.1.13 → 0.1.15

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 */
@@ -347,6 +348,11 @@
      =========================================== */
   --mba-space-0: 0;
   --mba-space-px: 1px;
+
+  /* ===========================================
+     CONTAINER
+     =========================================== */
+  --mba-container-width: 70rem;   /* 1120px */
 }
 
 /**
@@ -1015,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;
@@ -1035,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;
 
@@ -1068,7 +1075,6 @@ a:hover {
    SECONDARY BUTTON (Large/Default)
    height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
-
 .mba-btn-secondary {
   display: inline-flex;
   height: 38px;
@@ -1083,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;
 
@@ -1116,7 +1122,6 @@ a:hover {
    TERTIARY BUTTON (Large/Default)
    height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
-
 .mba-btn-tertiary {
   display: inline-flex;
   height: 38px;
@@ -1132,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;
 
@@ -1162,7 +1167,6 @@ a:hover {
    INLINE BUTTON
    height: 24px, padding: 8px 16px, gap: 4px
    =========================================== */
-
 .mba-btn-inline {
   display: inline-flex;
   height: 24px;
@@ -1178,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;
 
@@ -1207,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);
@@ -1218,7 +1221,6 @@ a:hover {
    LIGHT BUTTON (Large/Default)
    height: 30px, padding: 4px 12px, gap: 4px
    =========================================== */
-
 .mba-btn-light {
   display: inline-flex;
   height: 30px;
@@ -1234,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;
 
@@ -1267,7 +1269,6 @@ a:hover {
    ANNUAIRE BUTTON (Large/Default)
    height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
-
 .mba-btn-annuaire {
   display: inline-flex;
   height: 38px;
@@ -1283,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;
 
@@ -1315,7 +1316,6 @@ a:hover {
    PIN BUTTON
    width: 40px, height: 40px, icon: 20px
    =========================================== */
-
 .mba-btn-pin {
   display: inline-flex;
   width: 40px;
@@ -1326,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);
@@ -1345,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);
@@ -1353,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);
@@ -1375,7 +1373,6 @@ a:hover {
    ICON BUTTON
    width: 24px, height: 24px, icon: 16px
    =========================================== */
-
 .mba-btn-icon-only {
   display: inline-flex;
   width: 24px;
@@ -1385,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);
@@ -1409,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);
@@ -1422,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);
@@ -1433,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);
@@ -1449,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);
@@ -1460,7 +1453,6 @@ a:hover {
 /* ===========================================
    ICON ALIGNMENT
    =========================================== */
-
 .mba-btn-icon-only i,
 .mba-btn-icon-only svg,
 .mba-btn i,
@@ -1471,7 +1463,6 @@ a:hover {
 }
 
 /* Arrow forward icon alignment */
-
 .mba-btn .arrow-forward,
 .mba-btn-secondary .arrow-forward {
   vertical-align: middle;
@@ -1482,7 +1473,6 @@ a:hover {
    =========================================== */
 
 /* Full width */
-
 .mba-btn-block {
   display: block;
   width: 100%;
@@ -1492,7 +1482,6 @@ a:hover {
 /* ===========================================
    RESPONSIVE (full width on mobile)
    =========================================== */
-
 @media (max-width: 767px) {
   .mba-btn,
   .mba-btn-secondary {
@@ -1502,6 +1491,10 @@ a:hover {
   }
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Links
  *
@@ -1518,6 +1511,8 @@ a:hover {
  * </a>
  */
 
+@layer components {
+
 .mba-link {
   display: inline-flex;
   align-items: center;
@@ -1527,7 +1522,7 @@ a:hover {
   font-weight: var(--mba-font-weight-semibold);
   color: var(--mba-color-primary-500);
   text-decoration: none;
-  transition: color 0.2s ease;
+  transition: color var(--mba-transition-base);
 }
 
 .mba-link:hover {
@@ -1535,10 +1530,9 @@ a:hover {
 }
 
 /* Underline uniquement sur le texte, pas l'icône */
-
 .mba-link__text {
   text-decoration: none;
-  transition: text-decoration 0.2s ease;
+  transition: text-decoration var(--mba-transition-base);
 }
 
 .mba-link:hover .mba-link__text {
@@ -1546,20 +1540,22 @@ a:hover {
 }
 
 /* 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
  *
@@ -1567,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;
@@ -1579,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;
 }
 
@@ -1590,7 +1587,6 @@ a:hover {
 /* ===========================================
    SMALL CARD
    =========================================== */
-
 .mba-card--sm {
   padding: var(--mba-space-sm);
 }
@@ -1598,7 +1594,6 @@ a:hover {
 /* ===========================================
    CARD PARTS
    =========================================== */
-
 .mba-card__header {
   display: flex;
   justify-content: space-between;
@@ -1631,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 {
@@ -1646,7 +1641,6 @@ a:hover {
 /* ===========================================
    CARD GRID
    =========================================== */
-
 .mba-card-grid {
   display: grid;
   gap: var(--mba-space-md);
@@ -1671,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;
 }
@@ -1690,7 +1682,6 @@ a:hover {
    CAROUSEL CARD (Testimonial)
    Bordure gradient sunset
    =========================================== */
-
 .mba-carousel-card {
   position: relative;
   display: flex;
@@ -1754,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 {
@@ -1813,7 +1803,6 @@ a:hover {
 /* ===========================================
    STATS GRID
    =========================================== */
-
 .mba-stats-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -1837,7 +1826,6 @@ a:hover {
    ARTICLE CARD (avec image)
    Image en haut, tag, titre, texte, lien
    =========================================== */
-
 .mba-article-card {
   display: flex;
   flex-direction: column;
@@ -1845,7 +1833,7 @@ a:hover {
   border-radius: var(--mba-radius-sm);
   overflow: hidden;
   box-shadow: var(--mba-shadow-xs);
-  transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
+  transition: box-shadow var(--mba-transition-base), transform var(--mba-transition-base);
 }
 
 .mba-article-card:hover {
@@ -1854,7 +1842,6 @@ a:hover {
 }
 
 /* Image container (pour positionner le tag) */
-
 .mba-article-card__image-wrapper {
   position: relative;
 }
@@ -1868,7 +1855,6 @@ a:hover {
 }
 
 /* Tag/badge sur l'image */
-
 .mba-article-card__tag {
   position: absolute;
   bottom: 0;
@@ -1908,7 +1894,6 @@ a:hover {
 }
 
 /* Footer avec lien */
-
 .mba-article-card__footer {
   display: flex;
   justify-content: flex-end;
@@ -1925,7 +1910,7 @@ a:hover {
   font-weight: var(--mba-font-weight-semibold);
   color: var(--mba-color-primary-500);
   text-decoration: none;
-  transition: color 0.2s ease;
+  transition: color var(--mba-transition-base);
 }
 
 .mba-article-card__link:hover {
@@ -1941,7 +1926,6 @@ a:hover {
 }
 
 /* Grid pour article cards */
-
 .mba-article-card-grid {
   display: grid;
   gap: var(--mba-space-md);
@@ -1961,6 +1945,10 @@ a:hover {
   }
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Arrow Buttons
  *
@@ -1973,6 +1961,8 @@ a:hover {
  * - disabled: Grey-300
  */
 
+@layer components {
+
 .mba-arrow {
   display: inline-flex;
   align-items: center;
@@ -1983,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 {
@@ -1996,7 +1986,6 @@ a:hover {
 }
 
 /* Disabled state */
-
 .mba-arrow:disabled,
 .mba-arrow.is-disabled {
   background-color: var(--mba-color-grey-300);
@@ -2009,11 +1998,14 @@ a:hover {
 }
 
 /* Icon sizing */
-
 .mba-arrow .material-symbols-rounded {
   font-size: 24px;
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Radio & Checkbox
  *
@@ -2021,10 +2013,11 @@ a:hover {
  * Source: Design System Figma
  */
 
+@layer components {
+
 /* ===========================================
    RADIO BUTTON - Aidants (Primary)
    =========================================== */
-
 .mba-radio {
   position: relative;
   display: inline-flex;
@@ -2051,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 {
@@ -2064,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;
@@ -2076,7 +2068,6 @@ a:hover {
 }
 
 /* Selected state */
-
 .mba-radio input:checked + .mba-radio__control::after {
   transform: translate(-50%, -50%) scale(1);
   width: 12px;
@@ -2084,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);
@@ -2108,7 +2097,6 @@ a:hover {
 /* ===========================================
    RADIO BUTTON - Partenaire (PrimaryPro)
    =========================================== */
-
 .mba-radio--pro .mba-radio__control {
   border-color: var(--mba-color-primary-pro-800);
 }
@@ -2120,7 +2108,6 @@ a:hover {
 /* ===========================================
    CHECKBOX - Aidants (Primary)
    =========================================== */
-
 .mba-checkbox {
   position: relative;
   display: inline-flex;
@@ -2147,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 {
@@ -2160,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;
@@ -2172,7 +2158,6 @@ a:hover {
 }
 
 /* Selected state */
-
 .mba-checkbox input:checked + .mba-checkbox__control::after {
   transform: translate(-50%, -50%) scale(1);
   width: 12px;
@@ -2180,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);
@@ -2204,7 +2187,6 @@ a:hover {
 /* ===========================================
    CHECKBOX - Partenaire (PrimaryPro)
    =========================================== */
-
 .mba-checkbox--pro .mba-checkbox__control {
   border-color: var(--mba-color-primary-pro-800);
 }
@@ -2216,7 +2198,6 @@ a:hover {
 /* ===========================================
    WITH LABEL
    =========================================== */
-
 .mba-radio-label,
 .mba-checkbox-label {
   display: inline-flex;
@@ -2234,6 +2215,10 @@ a:hover {
   color: var(--mba-color-grey-400);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Pagination
  *
@@ -2241,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;
@@ -2259,7 +2245,6 @@ a:hover {
    PAGINATION ITEM
    width: 32px, height: 32px
    =========================================== */
-
 .mba-pagination-item {
   display: inline-flex;
   width: 32px;
@@ -2268,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);
@@ -2293,7 +2277,6 @@ a:hover {
 }
 
 /* Active state */
-
 .mba-pagination-item.is-active {
   background-color: var(--mba-color-secondary-500);
   border-radius: 50%;
@@ -2302,7 +2285,6 @@ a:hover {
 }
 
 /* Disabled state */
-
 .mba-pagination-item:disabled,
 .mba-pagination-item.is-disabled {
   background-color: var(--mba-color-white);
@@ -2314,7 +2296,6 @@ a:hover {
 /* ===========================================
    PAGINATION ELLIPSIS
    =========================================== */
-
 .mba-pagination-ellipsis {
   display: inline-flex;
   width: 32px;
@@ -2335,7 +2316,6 @@ a:hover {
    PAGINATION ARROW BUTTON
    width: 32px, height: 32px
    =========================================== */
-
 .mba-pagination-arrow {
   display: inline-flex;
   width: 32px;
@@ -2346,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);
@@ -2380,7 +2360,6 @@ a:hover {
    DOTS PAGINATION (Carrousel)
    Indicateurs de slide sous forme de points
    =========================================== */
-
 .mba-dots {
   display: inline-flex;
   align-items: center;
@@ -2398,7 +2377,7 @@ a:hover {
   border: none;
   padding: 0;
   cursor: pointer;
-  transition: background-color 0.25s ease-in-out;
+  transition: background-color var(--mba-transition-base);
 }
 
 .mba-dot:hover:not(.is-active) {
@@ -2415,6 +2394,10 @@ a:hover {
   cursor: default;
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Inputs
  *
@@ -2422,10 +2405,11 @@ a:hover {
  * Source: Design System Figma
  */
 
+@layer components {
+
 /* ===========================================
    LABEL
    =========================================== */
-
 .mba-label {
   display: flex;
   align-items: center;
@@ -2438,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);
@@ -2454,7 +2436,6 @@ a:hover {
 /* ===========================================
    TEXTAREA - Base
    =========================================== */
-
 .mba-textarea {
   display: block;
   width: 100%;
@@ -2467,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);
@@ -2485,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);
@@ -2503,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);
@@ -2522,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);
@@ -2536,7 +2510,6 @@ a:hover {
 /* ===========================================
    INPUT - Base
    =========================================== */
-
 .mba-input {
   display: block;
   width: 100%;
@@ -2548,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);
@@ -2573,7 +2543,6 @@ a:hover {
 }
 
 /* Disabled state */
-
 .mba-input:disabled {
   background-color: var(--mba-color-grey-50);
   border-color: var(--mba-color-grey-100);
@@ -2587,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);
@@ -2601,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);
@@ -2615,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);
 }
 
@@ -2633,7 +2599,6 @@ a:hover {
 /* ===========================================
    DROPDOWN
    =========================================== */
-
 .mba-dropdown {
   position: relative;
   display: inline-block;
@@ -2641,7 +2606,6 @@ a:hover {
 }
 
 /* Trigger (select-like button) */
-
 .mba-dropdown__trigger {
   display: flex;
   align-items: center;
@@ -2656,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 {
@@ -2682,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 {
@@ -2694,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);
@@ -2706,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);
@@ -2718,7 +2679,6 @@ a:hover {
 }
 
 /* Panel */
-
 .mba-dropdown__panel {
   position: absolute;
   top: calc(100% + 4px);
@@ -2741,7 +2701,6 @@ a:hover {
 }
 
 /* Custom scrollbar */
-
 .mba-dropdown__panel::-webkit-scrollbar {
   width: 6px;
 }
@@ -2756,7 +2715,6 @@ a:hover {
 }
 
 /* Option */
-
 .mba-dropdown__option {
   padding: var(--mba-space-xs);
   border-radius: var(--mba-radius-xs);
@@ -2765,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 {
@@ -2778,7 +2736,6 @@ a:hover {
 }
 
 /* Option selected - Pro variant */
-
 .mba-dropdown--pro .mba-dropdown__option--selected {
   border-color: var(--mba-color-primary-pro-400);
 }
@@ -2787,7 +2744,6 @@ a:hover {
    TOGGLE SWITCH
    width: 42px, height: 24px, cercle: 20px
    =========================================== */
-
 .mba-toggle {
   position: relative;
   display: inline-block;
@@ -2809,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;
 }
 
@@ -2821,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%;
 }
 
@@ -2845,7 +2801,6 @@ a:hover {
 /* ===========================================
    INPUT WITH ICON
    =========================================== */
-
 .mba-input-icon {
   display: flex;
   align-items: center;
@@ -2854,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 {
@@ -2879,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 {
@@ -2893,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;
@@ -2919,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);
@@ -2937,7 +2887,6 @@ button.mba-input-icon__icon:hover {
 /* ===========================================
    INPUT GROUP (input + button)
    =========================================== */
-
 .mba-input-group {
   display: flex;
   align-items: stretch;
@@ -2952,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
  *
@@ -2978,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%;
@@ -2992,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);
@@ -3004,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);
@@ -3017,7 +2969,6 @@ button.mba-input-icon__icon:hover {
 }
 
 /* Color variants */
-
 .mba-wave--lavender {
   background-color: var(--mba-color-pastel-lavender);
 }
@@ -3034,6 +2985,10 @@ button.mba-input-icon__icon:hover {
   background-color: var(--mba-color-primary-50);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Section
  *
@@ -3062,6 +3017,8 @@ button.mba-input-icon__icon:hover {
  * </section>
  */
 
+@layer components {
+
 .mba-section {
   position: relative;
   width: 100%;
@@ -3070,7 +3027,7 @@ 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-xxl) 0;
 }
@@ -3079,7 +3036,6 @@ button.mba-input-icon__icon:hover {
    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));
@@ -3091,7 +3047,6 @@ button.mba-input-icon__icon:hover {
 }
 
 /* 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));
@@ -3204,6 +3159,10 @@ button.mba-input-icon__icon:hover {
   background-color: var(--mba-color-primary-50);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Footer
  *
@@ -3223,6 +3182,8 @@ button.mba-input-icon__icon:hover {
  * - .mba-footer--pro           - Version partenaire (primary-pro)
  */
 
+@layer components {
+
 /* ===========================================
    FOOTER CONTAINER
    =========================================== */
@@ -3237,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;
@@ -3294,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;
@@ -3331,6 +3292,7 @@ button.mba-input-icon__icon:hover {
   }
 }
 
+
 .mba-footer__nav-group {
   display: flex;
   flex-direction: column;
@@ -3439,6 +3401,7 @@ button.mba-input-icon__icon:hover {
   align-items: center;
 }
 
+
 .mba-footer__social-link {
   display: flex;
   align-items: center;
@@ -3467,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;
@@ -3576,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"; */
@@ -3614,6 +3582,29 @@ button.mba-input-icon__icon:hover {
    ACCESSIBILITY UTILITIES
    =========================================== */
 
+/* Reduced motion - Respect user preference for reduced animations
+   Triggered when user enables "Reduce motion" in system settings
+   (macOS, Windows, iOS, Android)
+
+   Benefits:
+   - Users with vestibular disorders
+   - Users with epilepsy or seizure disorders
+   - Users with migraines or motion sensitivity
+
+   WCAG 2.1 Success Criterion 2.3.3 (AAA)
+*/
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* Visually hidden (accessible) */
 
 .mba-sr-only {