@maboussoleaidant/design-system 0.1.0

package/dist/mba-design-system.css

@@ -0,0 +1,1538 @@
+/**
+ * MBA Design System
+ *
+ * Point d'entrée principal (sans Tailwind utilities)
+ * Inclut: tokens + base + composants
+ */
+
+/**
+ * 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
+     =========================================== */
+  --mba-color-white: #FFFFFF;
+  --mba-color-black: #1C1C1D;
+
+  /* ===========================================
+     GREY (Neutral)
+     =========================================== */
+  --mba-color-grey-50: #F2F2F3;
+  --mba-color-grey-100: #D7D7DB;
+  --mba-color-grey-300: #B6B6BC;
+  --mba-color-grey-400: #71717A;
+  --mba-color-grey-800: #303034;
+
+  /* ===========================================
+     PRIMARY (Violet)
+     Couleur principale de la marque
+     =========================================== */
+  --mba-color-primary-50: #FFF6FF;
+  --mba-color-primary-100: #EDD7EF;
+  --mba-color-primary-400: #C097C3;
+  --mba-color-primary-500: #703973;  /* Couleur déposée */
+  --mba-color-primary-800: #461C52;
+  --mba-color-primary-900: #2C1133;
+
+  /* ===========================================
+     SECONDARY
+     =========================================== */
+  --mba-color-secondary-500: #FDC785;
+
+  /* ===========================================
+     PRIMARY PRO (Blue)
+     Couleur pour l'offre Pro/Entreprise
+     =========================================== */
+  --mba-color-primary-pro-50: #F7FAFD;
+  --mba-color-primary-pro-100: #DFEDF7;
+  --mba-color-primary-pro-400: #6A88AA;
+  --mba-color-primary-pro-500: #395172;
+  --mba-color-primary-pro-800: #122042;
+
+  /* ===========================================
+     ALERT - ERROR / REQUIRED (Rouge)
+     =========================================== */
+  --mba-color-error-100: #FFDED1;
+  --mba-color-error-300: #F8B09E;
+  --mba-color-error-400: #D9514E;
+  --mba-color-error-500: #C1121F;
+  --mba-color-error-800: #6F052A;
+
+  /* ===========================================
+     ALERT - SUCCESS / VALIDATION (Vert)
+     =========================================== */
+  --mba-color-success-100: #E6FADE;
+  --mba-color-success-300: #B7E7AC;
+  --mba-color-success-400: #74C474;
+  --mba-color-success-500: #489E50;
+  --mba-color-success-800: #165B30;
+
+  /* ===========================================
+     ALERT - WARNING / IN PROGRESS (Jaune)
+     =========================================== */
+  --mba-color-warning-50: #FEFAEC;
+  --mba-color-warning-100: #FBF2CB;
+  --mba-color-warning-300: #F8E199;
+  --mba-color-warning-400: #D6A73D;
+  --mba-color-warning-500: #BC7F09;
+  --mba-color-warning-800: #6D3D02;
+
+  /* ===========================================
+     ALERT - INFO / NEUTRAL (Bleu)
+     =========================================== */
+  --mba-color-info-50: #F1FBFE;
+  --mba-color-info-100: #E2F6FC;
+  --mba-color-info-300: #C6EAF9;
+  --mba-color-info-400: #8ABDE0;
+  --mba-color-info-500: #649CCC;
+  --mba-color-info-800: #1F4076;
+
+  /* ===========================================
+     CUSTOM PALETTE - Brick
+     (Ultra light et dark - pour tags, articles, backgrounds)
+     =========================================== */
+  --mba-color-brick-light: #FCF4F0;
+  --mba-color-brick: #AC5118;
+
+  /* ===========================================
+     CUSTOM PALETTE - Forest
+     =========================================== */
+  --mba-color-forest-light: #DEF8EF;
+  --mba-color-forest: #16654C;
+
+  /* ===========================================
+     CUSTOM PALETTE - Rose
+     =========================================== */
+  --mba-color-rose-light: #FAEFF4;
+  --mba-color-rose: #B83C75;
+
+  /* ===========================================
+     CUSTOM PALETTE - Pastels (Nouveau)
+     Note: Non accessibles pour texte/titre
+     =========================================== */
+  --mba-color-pastel-bleuet: #EBF2FF;
+  --mba-color-pastel-lavender: #EEEDFF;
+  --mba-color-pastel-narcisse: #FFF6E4;
+  --mba-color-pastel-oranger: #FFF2EB;
+
+  /* ===========================================
+     CUSTOM - Beige (Background cards)
+     =========================================== */
+  --mba-color-beige: #F9F5F0;
+
+  /* ===========================================
+     GRADIENT
+     =========================================== */
+  --mba-gradient-sunset: linear-gradient(117deg, #C7E5FA 4.74%, #E9CDF3 49.92%, #FBE4C1 95.1%);
+
+  /* ===========================================
+     SEMANTIC COLORS
+     (Utilise uniquement les tokens Figma existants)
+     =========================================== */
+  --mba-color-background: var(--mba-color-white);
+  --mba-color-surface: var(--mba-color-grey-50);
+  --mba-color-surface-raised: var(--mba-color-white);
+  --mba-color-border: var(--mba-color-grey-100);
+  --mba-color-border-strong: var(--mba-color-grey-300);
+
+  --mba-color-text: var(--mba-color-black);
+  --mba-color-text-muted: var(--mba-color-grey-400);
+  --mba-color-text-subtle: var(--mba-color-grey-300);
+  --mba-color-text-inverse: var(--mba-color-white);
+
+  --mba-color-link: var(--mba-color-primary-500);
+  --mba-color-link-hover: var(--mba-color-primary-800);
+
+  /* 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
+     =========================================== */
+  --mba-font-family-text: "Open Sans", ui-sans-serif, system-ui, sans-serif;
+  --mba-font-family-heading: "Congenial", ui-sans-serif, system-ui, sans-serif;
+  --mba-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+  /* ===========================================
+     TAILLES DE POLICE (Figma Scale)
+     =========================================== */
+  --mba-font-size-xxs: 0.875rem;   /* 14px */
+  --mba-font-size-xs: 1rem;        /* 16px */
+  --mba-font-size-sm: 1.125rem;    /* 18px */
+  --mba-font-size-md: 1.5rem;      /* 24px */
+  --mba-font-size-xl: 2rem;        /* 32px */
+  --mba-font-size-xxl: 3rem;       /* 48px */
+
+  /* ===========================================
+     FONT WEIGHTS
+     =========================================== */
+  --mba-font-weight-regular: 400;
+  --mba-font-weight-semibold: 600;
+  --mba-font-weight-bold: 700;
+  --mba-font-weight-extrabold: 800;
+
+  /* ===========================================
+     LINE HEIGHTS
+     =========================================== */
+  --mba-leading-none: 1;
+  --mba-leading-tight: 1.25;
+  --mba-leading-snug: 1.375;
+  --mba-leading-normal: 1.5;
+  --mba-leading-relaxed: 1.625;
+  --mba-leading-loose: 2;
+
+  /* ===========================================
+     LETTER SPACING
+     =========================================== */
+  --mba-tracking-tighter: -0.05em;
+  --mba-tracking-tight: -0.025em;
+  --mba-tracking-normal: 0em;
+  --mba-tracking-wide: 0.025em;
+  --mba-tracking-wider: 0.05em;
+  --mba-tracking-widest: 0.1em;
+}
+
+/* ===========================================
+   HEADING PRESETS (Congenial)
+   =========================================== */
+
+/* XXL - 48px Bold */
+
+.mba-heading-xxl {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-tight);
+}
+
+/* XL - 32px Bold */
+
+.mba-heading-xl {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xl);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-tight);
+}
+
+/* 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);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-snug);
+}
+
+/* SM - 18px Bold */
+
+.mba-heading-sm {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XS - 16px Bold */
+
+.mba-heading-xs {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XXS - 14px Bold */
+
+.mba-heading-xxs {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+
+/* ===========================================
+   TEXT PRESETS (Open Sans)
+   =========================================== */
+
+/* XXL - 48px */
+
+.mba-text-xxl {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XL - 32px */
+
+.mba-text-xl {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xl);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* MD - 24px */
+
+.mba-text-md {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-md);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* SM - 18px */
+
+.mba-text-sm {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XS - 16px (Base) */
+
+.mba-text-xs {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XXS - 14px */
+
+.mba-text-xxs {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/**
+ * MBA Design System - Espacements
+ *
+ * Échelle d'espacements extraite du Design System Figma
+ * Préfixe: --mba-space-
+ */
+
+:root {
+  /* ===========================================
+     ÉCHELLE FIGMA
+     =========================================== */
+  --mba-space-xxs: 0.25rem;   /* 4px */
+  --mba-space-xs: 0.5rem;     /* 8px */
+  --mba-space-sm: 1rem;       /* 16px */
+  --mba-space-md: 1.5rem;     /* 24px */
+  --mba-space-lg: 2rem;       /* 32px */
+  --mba-space-xl: 3rem;       /* 48px */
+  --mba-space-xxl: 4rem;      /* 64px */
+
+  /* ===========================================
+     VALEURS UTILITAIRES
+     =========================================== */
+  --mba-space-0: 0;
+  --mba-space-px: 1px;
+}
+
+/**
+ * MBA Design System - Border Radius
+ *
+ * Échelle de rayons de bordure extraite du Design System Figma
+ * Préfixe: --mba-radius-
+ */
+
+:root {
+  /* ===========================================
+     ÉCHELLE FIGMA
+     =========================================== */
+  --mba-radius-2xs: 0.25rem;    /* 4px */
+  --mba-radius-xs: 0.5rem;      /* 8px */
+  --mba-radius-sm: 1rem;        /* 16px */
+  --mba-radius-md: 1.5rem;      /* 24px */
+  --mba-radius-lg: 2rem;        /* 32px */
+  --mba-radius-xl: 3rem;        /* 48px */
+  --mba-radius-xxl: 4rem;       /* 64px */
+
+  /* ===========================================
+     VALEURS UTILITAIRES
+     =========================================== */
+  --mba-radius-none: 0;
+  --mba-radius-full: 9999px;
+}
+
+/**
+ * MBA Design System - Ombres (Elevation)
+ *
+ * Échelle d'élévation extraite du Design System Figma
+ * Couleur de base: Grey 400 (#71717A / rgba(113, 113, 122))
+ * Préfixe: --mba-shadow-
+ */
+
+:root {
+  /* ===========================================
+     ÉCHELLE FIGMA (Elevation)
+     Double couche: 4% + 8% opacité
+     =========================================== */
+
+  /* XXS - blur 4px */
+  --mba-shadow-xxs:
+    0 2px 4px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 4px 0 rgba(113, 113, 122, 0.08);
+
+  /* XS - blur 8px */
+  --mba-shadow-xs:
+    0 2px 8px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 8px 0 rgba(113, 113, 122, 0.08);
+
+  /* SM - blur 16px */
+  --mba-shadow-sm:
+    0 2px 16px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 16px 0 rgba(113, 113, 122, 0.08);
+
+  /* MD - blur 24px */
+  --mba-shadow-md:
+    0 2px 24px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 24px 0 rgba(113, 113, 122, 0.08);
+
+  /* ===========================================
+     VALEURS UTILITAIRES
+     =========================================== */
+  --mba-shadow-none: 0 0 #0000;
+  --mba-shadow-inner: inset 0 2px 4px 0 rgba(113, 113, 122, 0.08);
+}
+
+/**
+ * MBA Design System - Transitions
+ *
+ * Durées et easings pour les animations
+ */
+
+:root {
+  /* ===========================================
+     DUREES
+     =========================================== */
+  --mba-duration-75: 75ms;
+  --mba-duration-100: 100ms;
+  --mba-duration-150: 150ms;
+  --mba-duration-200: 200ms;
+  --mba-duration-300: 300ms;
+  --mba-duration-500: 500ms;
+  --mba-duration-700: 700ms;
+  --mba-duration-1000: 1000ms;
+
+  /* ===========================================
+     EASINGS
+     =========================================== */
+  --mba-ease-linear: linear;
+  --mba-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --mba-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --mba-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ===========================================
+     TRANSITIONS PRECONSTRUITES
+     =========================================== */
+  --mba-transition-fast: var(--mba-duration-150) var(--mba-ease-in-out);
+  --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
+ *
+ * Points de rupture responsive
+ * Note: Les custom properties ne fonctionnent pas dans @media queries,
+ * ces valeurs sont documentées ici pour référence et usage JS.
+ *
+ * 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;
+  --mba-breakpoint-md: 768px;
+  --mba-breakpoint-lg: 1024px;
+  --mba-breakpoint-xl: 1280px;
+  --mba-breakpoint-2xl: 1536px;
+}
+
+/*
+  Usage en CSS pur (les @media ne supportent pas les custom properties) :
+
+  @media (min-width: 640px) { ... }   sm
+  @media (min-width: 768px) { ... }   md
+  @media (min-width: 1024px) { ... }  lg
+  @media (min-width: 1280px) { ... }  xl
+  @media (min-width: 1536px) { ... }  2xl
+*/
+
+/**
+ * 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;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/OpenSans-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/OpenSans-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 800;
+  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;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/Congenial.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Congenial";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/Congenial-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Congenial";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/Congenial-Bold.woff2") format("woff2");
+}
+
+/**
+ * MBA Design System - Icons
+ *
+ * Material Symbols Rounded (self-hosted, optimized subset)
+ * Style: Rounded, Weight: 400, Fill: 0/1, Optical size: 20-48
+ *
+ * Subset: ~50 KB (vs 5 MB full font)
+ * Pour ajouter des icônes:
+ *   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;
+  font-weight: 100 700;
+  font-display: block;
+  src: url('/fonts/MaterialSymbolsRounded.woff2') format('woff2');
+}
+
+/* ===========================================
+   BASE ICON CLASS
+   =========================================== */
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+
+  /* Default: Outline */
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+/* ===========================================
+   MBA ICON UTILITIES
+   =========================================== */
+
+/* Base icon (24px) */
+
+.mba-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+/* Small icon (16px) */
+
+.mba-icon--sm {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 20;
+}
+
+/* Fill variant */
+
+.mba-icon--fill,
+.material-symbols-rounded.mba-icon--fill {
+  font-variation-settings:
+    'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+/* Fill + Small */
+
+.mba-icon--sm.mba-icon--fill {
+  font-variation-settings:
+    'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 20;
+}
+
+/* ===========================================
+   COLOR UTILITIES
+   =========================================== */
+
+.mba-icon--primary {
+  color: var(--mba-color-primary-500);
+}
+
+.mba-icon--success {
+  color: var(--mba-color-success-500);
+}
+
+.mba-icon--warning {
+  color: var(--mba-color-warning-500);
+}
+
+.mba-icon--error {
+  color: var(--mba-color-error-500);
+}
+
+.mba-icon--info {
+  color: var(--mba-color-info-500);
+}
+
+.mba-icon--muted {
+  color: var(--mba-color-text-muted);
+}
+
+/**
+ * MBA Design System - Preflight
+ *
+ * Reset CSS basé sur Tailwind Preflight / modern-normalize
+ * https://tailwindcss.com/docs/preflight
+ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--mba-color-border);
+}
+
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-family: var(--mba-font-family-text);
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--mba-font-family-mono);
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+dialog {
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: var(--mba-color-text-subtle);
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden] {
+  display: none;
+}
+
+/**
+ * MBA Design System - Base Typography
+ *
+ * Styles de base pour le texte
+ */
+
+body {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  line-height: var(--mba-leading-normal);
+  color: var(--mba-color-text);
+  background-color: var(--mba-color-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Liens */
+
+a {
+  color: var(--mba-color-link);
+  transition: color var(--mba-transition-fast);
+}
+
+a:hover {
+  color: var(--mba-color-link-hover);
+}
+
+/* Focus visible pour accessibilité */
+
+:focus-visible {
+  outline: 2px solid var(--mba-color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Selection */
+
+::selection {
+  background-color: var(--mba-color-primary-100);
+  color: var(--mba-color-primary-900);
+}
+
+/**
+ * MBA Design System - Composants
+ *
+ * Classes de composants prêtes à l'emploi
+ */
+
+/**
+ * MBA Design System - Boutons
+ *
+ * Classes: .mba-btn, .mba-btn-secondary, .mba-btn-sm
+ * Couleur: Primary (Violet #703973)
+ * Source: Design System Figma
+ */
+
+/* ===========================================
+   BASE BUTTON (Primary - Large/Default)
+   height: 38px, padding: 8px 16px, gap: 8px
+   =========================================== */
+
+.mba-btn {
+  display: inline-flex;
+  height: 38px;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  justify-content: center;
+  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);
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+
+  /* Primary (Violet) */
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+}
+
+.mba-btn:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-800);
+  border: 1px solid var(--mba-color-primary-800);
+}
+
+.mba-btn:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+.mba-btn:disabled,
+.mba-btn.is-disabled {
+  background-color: var(--mba-color-grey-100);
+  color: var(--mba-color-grey-400);
+  border-color: transparent;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ===========================================
+   SECONDARY BUTTON (Large/Default)
+   =========================================== */
+
+.mba-btn-secondary {
+  display: inline-flex;
+  height: 38px;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  justify-content: center;
+  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);
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-800);
+  border: 1px solid var(--mba-color-primary-800);
+}
+
+.mba-btn-secondary:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+  border-color: var(--mba-color-primary-500);
+}
+
+.mba-btn-secondary:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+.mba-btn-secondary:disabled,
+.mba-btn-secondary.is-disabled {
+  background-color: var(--mba-color-grey-100);
+  color: var(--mba-color-grey-400);
+  border-color: var(--mba-color-grey-100);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ===========================================
+   SMALL BUTTON
+   padding: 4px 8px, gap: 8px
+   =========================================== */
+
+.mba-btn-sm {
+  height: auto;
+  padding: var(--mba-space-xxs) var(--mba-space-xs);
+  gap: var(--mba-space-xs);
+  font-size: var(--mba-font-size-xxs);
+}
+
+/* ===========================================
+   ICON BUTTON
+   =========================================== */
+
+.mba-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mba-btn-icon i,
+.mba-btn-icon svg {
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Arrow forward icon alignment */
+
+.mba-btn .arrow-forward,
+.mba-btn-secondary .arrow-forward {
+  vertical-align: middle;
+}
+
+/* ===========================================
+   MODIFIERS
+   =========================================== */
+
+/* Full width */
+
+.mba-btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+/* ===========================================
+   RESPONSIVE (full width on mobile)
+   =========================================== */
+
+@media (max-width: 767px) {
+  .mba-btn,
+  .mba-btn-secondary {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+/**
+ * MBA Design System - Cards
+ *
+ * Classes: .mba-card, .mba-card--sm, .mba-card-grid
+ * Source: Design System Figma
+ */
+
+/* ===========================================
+   BASE CARD (Large / Default)
+   padding: 24px (MD), border-radius: 16px (SM)
+   =========================================== */
+
+.mba-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--mba-space-md);
+  border-radius: var(--mba-radius-sm);
+  background-color: var(--mba-color-beige);
+  border: 2px solid transparent;
+  transition: border-color 0.25s ease-in-out;
+  cursor: pointer;
+}
+
+.mba-card:hover {
+  border-color: var(--mba-color-primary-500);
+}
+
+/* ===========================================
+   SMALL CARD
+   =========================================== */
+
+.mba-card--sm {
+  padding: var(--mba-space-sm);
+}
+
+/* ===========================================
+   CARD PARTS
+   =========================================== */
+
+.mba-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--mba-space-sm);
+}
+
+.mba-card__content {
+  flex: 1;
+}
+
+.mba-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 0 var(--mba-space-xs);
+}
+
+.mba-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-snug);
+  margin: 0;
+}
+
+.mba-card__icon {
+  flex-shrink: 0;
+  color: var(--mba-color-primary-500);
+  font-size: 24px;
+  transition: transform 0.2s ease;
+}
+
+.mba-card__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.mba-card:hover .mba-card__icon {
+  transform: translateX(4px);
+}
+
+/* ===========================================
+   CARD GRID
+   =========================================== */
+
+.mba-card-grid {
+  display: grid;
+  gap: var(--mba-space-md);
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .mba-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 900px) {
+  .mba-card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* ===========================================
+   CARD VARIANTS
+   =========================================== */
+
+/* White background */
+
+.mba-card--white {
+  background-color: var(--mba-color-white);
+}
+
+/* Non-interactive (no hover) */
+
+.mba-card--static {
+  cursor: default;
+}
+
+.mba-card--static:hover {
+  border-color: transparent;
+}
+
+/* ===========================================
+   CAROUSEL CARD (Testimonial)
+   Bordure gradient sunset
+   =========================================== */
+
+.mba-carousel-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: var(--mba-space-md);
+  background-color: var(--mba-color-white);
+  border-radius: 24px 24px 8px 24px;
+  width: 453px;
+  height: 278px;
+  box-sizing: border-box;
+}
+
+.mba-carousel-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: var(--mba-gradient-sunset);
+  border-radius: 24px 24px 8px 24px;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.mba-carousel-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-carousel-card__quote {
+  flex: 1;
+  margin-top: var(--mba-space-sm);
+  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-primary-800);
+}
+
+.mba-carousel-card__author {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-500);
+  margin: 0;
+}
+
+@media (max-width: 767px) {
+  .mba-carousel-card {
+    width: 286px;
+    height: 360px;
+  }
+}
+
+/* ===========================================
+   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;
+}
+
+.mba-stats-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: var(--mba-gradient-sunset);
+  border-radius: var(--mba-radius-md);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.mba-stats-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--mba-shadow-sm);
+}
+
+.mba-stats-card__value {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-extrabold);
+  color: var(--mba-color-primary-500);
+  line-height: 1;
+  margin: 0;
+}
+
+.mba-stats-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-bold);
+  margin-top: var(--mba-space-sm);
+  margin-bottom: 0;
+  color: var(--mba-color-text);
+}
+
+.mba-stats-card__description {
+  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);
+  margin: 0;
+}
+
+/* ===========================================
+   STATS GRID
+   =========================================== */
+
+.mba-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--mba-space-lg);
+  width: 100%;
+}
+
+@media (max-width: 900px) {
+  .mba-stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .mba-stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/**
+ * MBA Design System - Arrow Buttons
+ *
+ * Boutons circulaires de navigation (carousels, sliders)
+ *
+ * Specs Figma:
+ * - padding: 4px (XXS)
+ * - border-radius: 64px (XXL) → cercle
+ * - background: Primary-500
+ * - disabled: Grey-300
+ */
+
+.mba-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mba-space-xxs);
+  border-radius: var(--mba-radius-xxl);
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.mba-arrow:hover {
+  background-color: var(--mba-color-primary-800);
+}
+
+.mba-arrow:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+/* Disabled state */
+
+.mba-arrow:disabled,
+.mba-arrow.is-disabled {
+  background-color: var(--mba-color-grey-300);
+  cursor: not-allowed;
+}
+
+.mba-arrow:disabled:hover,
+.mba-arrow.is-disabled:hover {
+  background-color: var(--mba-color-grey-300);
+}
+
+/* Icon sizing */
+
+.mba-arrow .material-symbols-rounded {
+  font-size: 24px;
+}
+
+/* @import "./_forms.css"; */
+
+/* @import "./_alerts.css"; */
+
+/* @import "./_accordion.css"; */
+
+/* @import "./_carousel.css"; */
+
+/* @import "./_navigation.css"; */
+
+/**
+ * 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
+   =========================================== */
+
+/* Visually hidden (accessible) */
+
+.mba-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Not visually hidden */
+
+.mba-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}