@maboussoleaidant/design-system 0.1.39 → 0.1.41

package/dist/mba-design-system.css

@@ -1,23 +1,33 @@
+
+@layer theme, base, components, utilities;
 /**
  * MBA Design System
  *
  * Point d'entrée principal (sans Tailwind utilities)
  * Inclut: tokens + base + composants
  */
-
+/**
+ * Ordre des cascade layers — DOIT rester la 1re règle du CSS compilé.
+ *
+ * Sans cette déclaration, les layers étaient ordonnés par ordre d'apparition
+ * (`components` puis `base`), ce qui faisait gagner le reset `base`
+ * (ex. `button { background-color: transparent }`, `a { … }`) sur les
+ * composants `.mba-*` de `@layer components` — y compris à l'intérieur d'un
+ * Shadow DOM qui importe ce fichier. En figeant l'ordre priorité croissante
+ * `theme < base < components < utilities`, les composants gagnent enfin sur
+ * le reset, comme attendu.
+ */
 /**
  * MBA Design System - Tokens
  *
  * Point d'entrée pour tous les design tokens
  */
-
 /**
  * MBA Design System - Couleurs
  *
  * Palette de couleurs extraite du Design System Figma
  * Préfixe: --mba-color-
  */
-
 :root {
   /* ===========================================
      BASICS
@@ -173,14 +183,12 @@
   /* Focus ring (accessibilité) */
   --mba-focus-ring: 0 0 0 3px rgba(112, 57, 115, 0.25);
 }
-
 /**
  * MBA Design System - Typographie
  *
  * Polices: Open Sans (textes) + Congenial (titres)
  * Source: Design System Figma
  */
-
 :root {
   /* ===========================================
      FAMILLES DE POLICES
@@ -229,12 +237,10 @@
   --mba-tracking-wider: 0.05em;
   --mba-tracking-widest: 0.1em;
 }
-
 /* ===========================================
    HEADING PRESETS (Congenial)
    Wrappé dans @layer components pour être overridable par utilities
    =========================================== */
-
 @layer components {
 
 /* XXL - 48px Bold */
@@ -338,16 +344,13 @@
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Espacements
  *
  * Échelle d'espacements extraite du Design System Figma
  * Préfixe: --mba-space-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA
@@ -371,15 +374,25 @@
      CONTAINER
      =========================================== */
   --mba-container-width: 70rem;   /* 1120px */
-}
 
+  /* Gouttière latérale du conteneur de page.
+     Partagée par le header et le footer : leurs contenus
+     (logo en tête) restent alignés à toutes les largeurs
+     et ne se collent jamais au bord du viewport.
+     Valeur mobile par défaut, élargie à partir de md. */
+  --mba-container-gutter: 1rem;   /* 16px */
+}
+@media (min-width: 768px) {
+  :root {
+    --mba-container-gutter: 5rem; /* 80px */
+  }
+}
 /**
  * MBA Design System - Border Radius
  *
  * Échelle de rayons de bordure extraite du Design System Figma
  * Préfixe: --mba-radius-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA
@@ -398,7 +411,6 @@
   --mba-radius-none: 0;
   --mba-radius-full: 9999px;
 }
-
 /**
  * MBA Design System - Ombres (Elevation)
  *
@@ -406,7 +418,6 @@
  * Couleur de base: Grey 400 (#71717A / rgba(113, 113, 122))
  * Préfixe: --mba-shadow-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA (Elevation)
@@ -433,6 +444,22 @@
     0 2px 24px 0 rgba(113, 113, 122, 0.04),
     1px 2px 24px 0 rgba(113, 113, 122, 0.08);
 
+  /* ===========================================
+     OMBRES SÉMANTIQUES (teintées marque)
+     Hors échelle d'élévation : couleur de marque
+     et non Grey 400, une seule couche.
+     =========================================== */
+
+  /* Footer — style Figma « Footer aidant »
+     0 -4px 8px 8px, Primary 500 (#703973) à 4 %
+     Offset Y négatif : le footer est ancré en bas
+     de page, son ombre remonte sur le contenu. */
+  --mba-shadow-footer: 0 -4px 8px 8px rgba(112, 57, 115, 0.04);
+
+  /* Footer variante Pro — même géométrie,
+     Primary Pro 500 (#395172) à 4 %. */
+  --mba-shadow-footer-pro: 0 -4px 8px 8px rgba(57, 81, 114, 0.04);
+
   /* ===========================================
      VALEURS UTILITAIRES
      =========================================== */
@@ -450,13 +477,11 @@
   --mba-input-ring-success: 0 0 0 1.5px var(--mba-color-success-100);
   --mba-input-ring-success-focus: 0 0 0 1.5px var(--mba-color-success-300);
 }
-
 /**
  * MBA Design System - Transitions
  *
  * Durées et easings pour les animations
  */
-
 :root {
   /* ===========================================
      DUREES
@@ -485,7 +510,6 @@
   --mba-transition-base: var(--mba-duration-200) var(--mba-ease-in-out);
   --mba-transition-slow: var(--mba-duration-300) var(--mba-ease-in-out);
 }
-
 /**
  * MBA Design System - Breakpoints
  *
@@ -496,7 +520,6 @@
  * Utiliser les classes Tailwind (sm:, md:, lg:, xl:, 2xl:)
  * ou les @media queries directement.
  */
-
 :root {
   /* Breakpoints pour référence (usage JS) */
   --mba-breakpoint-sm: 640px;
@@ -505,7 +528,6 @@
   --mba-breakpoint-xl: 1280px;
   --mba-breakpoint-2xl: 1536px;
 }
-
 /*
   Usage en CSS pur (les @media ne supportent pas les custom properties) :
 
@@ -515,7 +537,6 @@
   @media (min-width: 1280px) { ... }  xl
   @media (min-width: 1536px) { ... }  2xl
 */
-
 /**
  * MBA Design System - Decorations
  *
@@ -525,7 +546,6 @@
  * - dip-up   = creux vers le haut ↑ (utilisé en position bottom)
  * - dip-down = creux vers le bas ↓ (utilisé en position top)
  */
-
 :root {
   /* Wave Default (42px) */
   --mba-wave-height: 42px;
@@ -537,23 +557,19 @@
   --mba-wave-sm-dip-up-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M1280 24H0V15.8118C95.612 15.8118 246.789 0 360.422 0C499.085 0 780.915 15.8118 914.071 15.8118C1068.75 15.8118 1190.9 0 1280 0V24Z' fill='black'/%3E%3C/svg%3E");
   --mba-wave-sm-dip-down-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V8.18824C1184.39 8.18824 1033.21 24 919.578 24C780.915 24 499.085 8.18824 365.929 8.18824C211.248 8.18824 89.1044 24 0 24V0Z' fill='black'/%3E%3C/svg%3E");
 }
-
 /**
  * MBA Design System - Base
  *
  * Reset et styles de base
  */
-
 /**
  * MBA Design System - Fonts
  *
  * @font-face declarations pour Open Sans et Congenial
  */
-
 /* ===========================================
    OPEN SANS (Textes)
    =========================================== */
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -561,7 +577,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-Regular.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -569,7 +584,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -577,7 +591,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-Bold.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -585,12 +598,10 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
 }
-
 /* ===========================================
    CONGENIAL (Titres)
    Note: ExtraBold non disponible, on utilise Bold pour les titres
    =========================================== */
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -598,7 +609,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -606,7 +616,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial-Medium.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -614,7 +623,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial-Bold.woff2") format("woff2");
 }
-
 /**
  * MBA Design System - Icons
  *
@@ -626,11 +634,9 @@
  *   1. Éditer src/icons/icons.list.txt
  *   2. Lancer: npm run icons:build
  */
-
 /* ===========================================
    FONT FACE - Material Symbols Rounded
    =========================================== */
-
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
@@ -638,12 +644,10 @@
   font-display: block;
   src: url('../assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
 }
-
 /* ===========================================
    BASE ICON CLASS
    Wrappé dans @layer base pour permettre aux @layer components de l'overrider
    =========================================== */
-
 @layer base {
 
 .material-symbols-rounded {
@@ -766,9 +770,7 @@
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Preflight
  *
@@ -778,7 +780,6 @@
  * Wrappé dans @layer base pour permettre aux utilities Tailwind
  * de l'overrider sans avoir besoin de !important
  */
-
 @layer base {
 
 *,
@@ -1013,15 +1014,12 @@ video {
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Base Typography
  *
  * Styles de base pour le texte
  */
-
 @layer base {
 
 body {
@@ -1065,15 +1063,12 @@ a:hover {
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Composants
  *
  * Classes de composants prêtes à l'emploi
  */
-
 /**
  * MBA Design System - Boutons
  *
@@ -1081,7 +1076,6 @@ a:hover {
  * Couleur: Primary (Violet #703973)
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -1606,9 +1600,7 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Links
  *
@@ -1624,7 +1616,6 @@ a:hover {
  *   <span class="material-symbols-rounded">arrow_forward</span>
  * </a>
  */
-
 @layer components {
 
 .mba-link {
@@ -1667,16 +1658,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Cards
  *
  * Classes: .mba-card, .mba-card--sm, .mba-card-grid
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -2288,9 +2276,7 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Arrow Buttons
  *
@@ -2302,7 +2288,6 @@ a:hover {
  * - background: Primary-500
  * - disabled: Grey-300
  */
-
 @layer components {
 
 .mba-arrow {
@@ -2345,16 +2330,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Radio & Checkbox
  *
  * Classes: .mba-radio, .mba-radio--pro, .mba-checkbox, .mba-checkbox--pro
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -2558,16 +2540,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Pagination
  *
  * Composant de pagination pour la navigation entre pages
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -2763,16 +2742,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Inputs
  *
  * Classes: .mba-textarea, .mba-input, .mba-label
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -3287,9 +3263,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Tabs
  *
@@ -3298,7 +3272,6 @@ button.mba-input-icon__icon:hover {
  * Couleurs: Primary 500 (MBA), Primary 900 (Partenaires)
  * Source: Design System Figma (Tabs - Lina-7347)
  */
-
 @layer components {
 
 /* ===========================================
@@ -3387,9 +3360,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* @layer components */
-
 /**
  * MBA Design System - Tags (Badges)
  *
@@ -3415,7 +3386,6 @@ button.mba-input-icon__icon:hover {
  * Note: fonds plus foncés que les pastels de base pour l'accessibilité.
  * Source: Design System Figma.
  */
-
 @layer components {
 
 .mba-tag {
@@ -3509,16 +3479,13 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Header
  *
  * Navigation principale avec dropdown et version mobile
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -3556,9 +3523,13 @@ button.mba-input-icon__icon:hover {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--mba-space-md) 5rem; /* vertical: md (24px), horizontal: 80px */
-  max-width: 80rem; /* 1280px = 1120px de contenu + 2 x 80px de padding */
+  /* content-box : --mba-container-width borne le CONTENU, la gouttière
+     s'ajoute autour. Sans cela, le border-box global du preflight
+     rognerait le contenu à 1120px - 2 x gouttière. */
+  box-sizing: content-box;
+  max-width: var(--mba-container-width); /* 1120px de contenu */
   margin: 0 auto;
+  padding: var(--mba-space-md) var(--mba-container-gutter);
 }
 
 /* ===========================================
@@ -4143,21 +4114,23 @@ button.mba-input-icon__icon:hover {
 
 /* ===========================================
    RESPONSIVE
-   =========================================== */
-@media (max-width: 768px) {
-  .mba-header {
-    box-shadow: none; /* pas de shadow en mobile */
-  }
 
-  .mba-header__container {
-    padding: var(--mba-space-sm) var(--mba-space-md); /* 12px 16px */
-    justify-content: space-between;
-  }
+   Deux seuils distincts, volontairement découplés :
 
-  .mba-header__mobile-menu {
-    padding: var(--mba-space-sm) var(--mba-space-xs); /* top/bottom SM, left/right XS */
-  }
+   - 1130px — bascule nav horizontale → menu burger.
+     En dessous, la nav complète ne tient plus sur la ligne
+     du logo et le dernier item débordait du conteneur.
+
+   - 768px — traitement téléphone (logo réduit, ombre
+     retirée, rythme vertical resserré). Ces choix sont
+     propres au petit écran : les appliquer dès 1130px
+     rapetisserait le logo sur un portable.
+   =========================================== */
 
+/* -------------------------------------------
+   Bascule nav → burger
+   ------------------------------------------- */
+@media (max-width: 1130px) {
   .mba-header__nav {
     display: none;
   }
@@ -4166,16 +4139,12 @@ button.mba-input-icon__icon:hover {
     display: flex;
   }
 
-  .mba-header__logo-img {
-    height: 24px;
-  }
-
-  .mba-icon {
-    margin-top: var(--mba-space-xxs);
+  .mba-header__mobile-menu {
+    padding: var(--mba-space-sm) var(--mba-space-xs); /* top/bottom SM, left/right XS */
   }
 }
 
-@media (min-width: 769px) {
+@media (min-width: 1131px) {
   .mba-header__mobile-menu {
     display: none !important;
   }
@@ -4193,10 +4162,32 @@ button.mba-input-icon__icon:hover {
   }
 }
 
+/* -------------------------------------------
+   Traitement téléphone
+   ------------------------------------------- */
+@media (max-width: 768px) {
+  .mba-header {
+    box-shadow: none; /* pas de shadow en mobile */
+  }
+
+  .mba-header__container {
+    /* Gouttière héritée du token (16px sous md), seul le rythme
+       vertical est resserré en mobile. */
+    padding: var(--mba-space-sm) var(--mba-container-gutter);
+    justify-content: space-between;
+  }
+
+  .mba-header__logo-img {
+    height: 24px;
+  }
+
+  .mba-icon {
+    margin-top: var(--mba-space-xxs);
+  }
 }
 
+}
 /* end @layer components */
-
 /**
  * MBA Design System - Wave
  *
@@ -4218,7 +4209,6 @@ button.mba-input-icon__icon:hover {
  * <div class="mba-wave mba-wave--lavender"></div>
  * <div class="mba-wave mba-wave--sm mba-wave--lavender mba-wave--top"></div>
  */
-
 @layer components {
 
 .mba-wave {
@@ -4284,9 +4274,7 @@ button.mba-input-icon__icon:hover {
 
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Section
  *
@@ -4314,7 +4302,6 @@ button.mba-input-icon__icon:hover {
  *   ...
  * </section>
  */
-
 @layer components {
 
 .mba-section {
@@ -4489,14 +4476,16 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Footer
  *
  * Footer principal avec logo, navigation, réseaux sociaux et mentions légales.
  *
+ * Coins hauts arrondis (--mba-radius-sm), en miroir du .mba-header qui
+ * arrondit ses coins bas avec la même valeur, et ombre projetée vers le haut
+ * (--mba-shadow-footer, style Figma « Footer aidant »).
+ *
  * Structure:
  * .mba-footer
  *   .mba-footer__main          - Section principale (flex, space-between)
@@ -4510,7 +4499,6 @@ button.mba-input-icon__icon:hover {
  * Modificateurs:
  * - .mba-footer--pro           - Version partenaire (primary-pro)
  */
-
 @layer components {
 
 /* ===========================================
@@ -4520,6 +4508,8 @@ button.mba-input-icon__icon:hover {
 .mba-footer {
   width: 100%;
   background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-sm) var(--mba-radius-sm) 0 0;
+  box-shadow: var(--mba-shadow-footer);
 }
 
 /* ===========================================
@@ -4527,9 +4517,12 @@ button.mba-input-icon__icon:hover {
    =========================================== */
 
 .mba-footer__main {
+  /* Conteneur commun avec .mba-header__container : même largeur de
+     contenu, même gouttière, donc logos alignés à toutes les largeurs. */
+  box-sizing: content-box;
   max-width: var(--mba-container-width);
   margin: 0 auto;
-  padding: var(--mba-space-xl) var(--mba-space-sm) var(--mba-space-sm);
+  padding: var(--mba-space-xl) var(--mba-container-gutter) var(--mba-space-sm);
   display: flex;
   flex-direction: column;
   gap: var(--mba-space-lg);
@@ -4537,7 +4530,7 @@ button.mba-input-icon__icon:hover {
 
 @media (min-width: 768px) {
   .mba-footer__main {
-    padding: var(--mba-space-xl) 0;
+    padding: var(--mba-space-xl) var(--mba-container-gutter);
   }
 }
 
@@ -4789,9 +4782,10 @@ button.mba-input-icon__icon:hover {
 
 
 .mba-footer__legal {
+  box-sizing: content-box;
   max-width: var(--mba-container-width);
   margin: 0 auto;
-  padding: var(--mba-space-md) var(--mba-space-sm);
+  padding: var(--mba-space-md) var(--mba-container-gutter);
   display: flex;
   flex-direction: column;
   gap: var(--mba-space-sm);
@@ -4799,7 +4793,6 @@ button.mba-input-icon__icon:hover {
 
 @media (min-width: 768px) {
   .mba-footer__legal {
-    padding: var(--mba-space-md) 0;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
@@ -4859,6 +4852,10 @@ button.mba-input-icon__icon:hover {
    PRO VARIANT
    =========================================== */
 
+.mba-footer--pro {
+  box-shadow: var(--mba-shadow-footer-pro);
+}
+
 .mba-footer--pro .mba-footer__contact,
 .mba-footer--pro .mba-footer__nav-link,
 .mba-footer--pro .mba-footer__legal-link {
@@ -4898,11 +4895,8 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /* @import "./_forms.css"; */
-
 /**
  * MBA Design System - Alerts
  *
@@ -4930,7 +4924,6 @@ button.mba-input-icon__icon:hover {
  *
  * Source: Design System Figma (node 4660-18800).
  */
-
 @layer components {
 
   /* ===========================================
@@ -5066,7 +5059,6 @@ button.mba-input-icon__icon:hover {
   }
 
 }
-
 /**
  * MBA Design System - Accordion
  *
@@ -5075,7 +5067,6 @@ button.mba-input-icon__icon:hover {
  * - À partir de 5 items (ou si le contenu est trop long),
  *   utiliser la variante scrollable pour afficher une scrollbar.
  */
-
 @layer components {
 
   /* ===========================================
@@ -5342,7 +5333,6 @@ button.mba-input-icon__icon:hover {
   }
 
 }
-
 /**
  * MBA Design System - Carousel
  *
@@ -5368,7 +5358,6 @@ button.mba-input-icon__icon:hover {
  *
  * Source: Design System Figma (nodes 4660-19043 / 4660-19016).
  */
-
 @layer components {
 
   .mba-carousel {
@@ -5462,7 +5451,6 @@ button.mba-input-icon__icon:hover {
   }
 
 }
-
 /**
  * MBA Design System - Navigation
  *
@@ -5479,7 +5467,6 @@ button.mba-input-icon__icon:hover {
  *
  * Source: Design System Figma (Breadcrumbs - Ma vie d'aidant, node 4660-18352).
  */
-
 @layer components {
 
   /* ===========================================
@@ -5619,35 +5606,28 @@ button.mba-input-icon__icon:hover {
   }
 
 }
-
 /**
  * MBA Design System - Utilities
  *
  * Classes utilitaires complémentaires à Tailwind
  */
-
 /* ===========================================
    FONT SIZE UTILITIES (MBA custom scale)
    Tailwind génère xs, sm, base, lg, xl, 2xl...
    On ajoute nos tailles custom : xxs, md, xxl
    =========================================== */
-
 .text-xxs {
   font-size: var(--mba-font-size-xxs);
 }
-
 .text-md {
   font-size: var(--mba-font-size-md);
 }
-
 .text-xxl {
   font-size: var(--mba-font-size-xxl);
 }
-
 /* ===========================================
    ACCESSIBILITY UTILITIES
    =========================================== */
-
 /* Reduced motion - Respect user preference for reduced animations
    Triggered when user enables "Reduce motion" in system settings
    (macOS, Windows, iOS, Android)
@@ -5659,7 +5639,6 @@ button.mba-input-icon__icon:hover {
 
    WCAG 2.1 Success Criterion 2.3.3 (AAA)
 */
-
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -5670,9 +5649,7 @@ button.mba-input-icon__icon:hover {
     scroll-behavior: auto !important;
   }
 }
-
 /* Visually hidden (accessible) */
-
 .mba-sr-only {
   position: absolute;
   width: 1px;
@@ -5684,9 +5661,7 @@ button.mba-input-icon__icon:hover {
   white-space: nowrap;
   border-width: 0;
 }
-
 /* Not visually hidden */
-
 .mba-not-sr-only {
   position: static;
   width: auto;
@@ -5697,43 +5672,32 @@ button.mba-input-icon__icon:hover {
   clip: auto;
   white-space: normal;
 }
-
 /* ===========================================
    VISIBILITY UTILITIES
    Override pour garantir le masquage même avec
    les composants MBA (display: inline-flex, etc.)
    =========================================== */
-
 /* Hidden - force display: none sur tous les composants */
-
 .hidden {
   display: none !important;
 }
-
 /* Visible utilities */
-
 .visible {
   visibility: visible;
 }
-
 .invisible {
   visibility: hidden;
 }
-
 /* ===========================================
    GRADIENT UTILITIES
    =========================================== */
-
 .bg-gradient-sunset {
   background: var(--mba-gradient-sunset);
 }
-
 /* Border gradient (hover reveal) — applique un contour gradient sunset via ::before */
-
 .mba-border-gradient {
   position: relative;
 }
-
 .mba-border-gradient::before {
   content: "";
   position: absolute;
@@ -5750,7 +5714,6 @@ button.mba-input-icon__icon:hover {
   opacity: 0;
   transition: opacity var(--mba-transition-base);
 }
-
 .mba-border-gradient:hover::before,
 .mba-border-gradient--visible::before {
   opacity: 1;