@maboussoleaidant/design-system 0.1.11 → 0.1.13

package/dist/mba-design-system.css

@@ -214,10 +214,12 @@
 
 /* ===========================================
    HEADING PRESETS (Congenial)
+   Wrappé dans @layer components pour être overridable par utilities
    =========================================== */
 
-/* XXL - 48px Bold */
+@layer components {
 
+/* XXL - 48px Bold */
 .mba-heading-xxl {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-xxl);
@@ -226,7 +228,6 @@
 }
 
 /* XL - 32px Bold */
-
 .mba-heading-xl {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-xl);
@@ -235,7 +236,6 @@
 }
 
 /* MD - 24px Bold (Figma: extra-bold, mais Congenial ExtraBold non dispo) */
-
 .mba-heading-md {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-md);
@@ -244,7 +244,6 @@
 }
 
 /* SM - 18px Bold */
-
 .mba-heading-sm {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-sm);
@@ -253,7 +252,6 @@
 }
 
 /* XS - 16px Bold */
-
 .mba-heading-xs {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-xs);
@@ -262,7 +260,6 @@
 }
 
 /* XXS - 14px Bold */
-
 .mba-heading-xxs {
   font-family: var(--mba-font-family-heading);
   font-size: var(--mba-font-size-xxs);
@@ -275,7 +272,6 @@
    =========================================== */
 
 /* XXL - 48px */
-
 .mba-text-xxl {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xxl);
@@ -284,7 +280,6 @@
 }
 
 /* XL - 32px */
-
 .mba-text-xl {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xl);
@@ -293,7 +288,6 @@
 }
 
 /* MD - 24px */
-
 .mba-text-md {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-md);
@@ -302,7 +296,6 @@
 }
 
 /* SM - 18px */
-
 .mba-text-sm {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-sm);
@@ -311,7 +304,6 @@
 }
 
 /* XS - 16px (Base) */
-
 .mba-text-xs {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xs);
@@ -320,7 +312,6 @@
 }
 
 /* XXS - 14px */
-
 .mba-text-xxs {
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xxs);
@@ -328,6 +319,10 @@
   line-height: var(--mba-leading-normal);
 }
 
+}
+
+/* end @layer components */
+
 /**
  * MBA Design System - Espacements
  *
@@ -723,8 +718,13 @@
  *
  * Reset CSS basé sur Tailwind Preflight / modern-normalize
  * https://tailwindcss.com/docs/preflight
+ *
+ * Wrappé dans @layer base pour permettre aux utilities Tailwind
+ * de l'overrider sans avoir besoin de !important
  */
 
+@layer base {
+
 *,
 ::before,
 ::after {
@@ -956,6 +956,10 @@ video {
   display: none;
 }
 
+}
+
+/* end @layer base */
+
 /**
  * MBA Design System - Base Typography
  *
@@ -1498,6 +1502,64 @@ a:hover {
   }
 }
 
+/**
+ * MBA Design System - Links
+ *
+ * Composant de lien avec icône
+ * L'underline au hover s'applique uniquement au texte, pas à l'icône
+ *
+ * Classes:
+ * - .mba-link - Lien de base avec icône
+ *
+ * Structure HTML:
+ * <a href="#" class="mba-link">
+ *   <span class="mba-link__text">En lire plus</span>
+ *   <span class="material-symbols-rounded">arrow_forward</span>
+ * </a>
+ */
+
+.mba-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.mba-link:hover {
+  color: var(--mba-color-primary-800);
+}
+
+/* Underline uniquement sur le texte, pas l'icône */
+
+.mba-link__text {
+  text-decoration: none;
+  transition: text-decoration 0.2s ease;
+}
+
+.mba-link:hover .mba-link__text {
+  text-decoration: underline;
+}
+
+/* Icône */
+
+.mba-link .material-symbols-rounded {
+  font-size: 20px;
+  text-decoration: none;
+}
+
+/* Focus state */
+
+.mba-link:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+  border-radius: var(--mba-radius-2xs);
+}
+
 /**
  * MBA Design System - Cards
  *
@@ -1771,6 +1833,134 @@ a:hover {
   }
 }
 
+/* ===========================================
+   ARTICLE CARD (avec image)
+   Image en haut, tag, titre, texte, lien
+   =========================================== */
+
+.mba-article-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-sm);
+  overflow: hidden;
+  box-shadow: var(--mba-shadow-xs);
+  transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.mba-article-card:hover {
+  box-shadow: var(--mba-shadow-sm);
+  transform: translateY(-2px);
+}
+
+/* Image container (pour positionner le tag) */
+
+.mba-article-card__image-wrapper {
+  position: relative;
+}
+
+.mba-article-card__image {
+  display: block;
+  width: 100%;
+  height: 152px;
+  object-fit: cover;
+  border-radius: var(--mba-radius-sm) var(--mba-radius-sm) 0 0;
+}
+
+/* Tag/badge sur l'image */
+
+.mba-article-card__tag {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: var(--mba-space-xxs) var(--mba-space-xs);
+  background-color: var(--mba-color-brick);
+  color: var(--mba-color-white);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  border-radius: 0 var(--mba-radius-xs) 0 0;
+}
+
+.mba-article-card__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: var(--mba-space-sm) var(--mba-space-sm) 0;
+  gap: var(--mba-space-xs);
+}
+
+.mba-article-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-800);
+  margin: 0;
+}
+
+.mba-article-card__text {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-text);
+  line-height: var(--mba-leading-normal);
+  margin: 0;
+}
+
+/* Footer avec lien */
+
+.mba-article-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 var(--mba-space-sm) var(--mba-space-sm);
+  margin-top: var(--mba-space-md);
+}
+
+.mba-article-card__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.mba-article-card__link:hover {
+  color: var(--mba-color-primary-800);
+}
+
+.mba-article-card__link:hover .mba-article-card__link-text {
+  text-decoration: underline;
+}
+
+.mba-article-card__link .material-symbols-rounded {
+  font-size: 20px;
+}
+
+/* Grid pour article cards */
+
+.mba-article-card-grid {
+  display: grid;
+  gap: var(--mba-space-md);
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .mba-article-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 900px) {
+  .mba-article-card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 /**
  * MBA Design System - Arrow Buttons
  *
@@ -2186,6 +2376,45 @@ a:hover {
   pointer-events: none;
 }
 
+/* ===========================================
+   DOTS PAGINATION (Carrousel)
+   Indicateurs de slide sous forme de points
+   =========================================== */
+
+.mba-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.mba-dot {
+  width: 40px;
+  height: 8px;
+  border-radius: var(--mba-radius-full);
+  background-color: var(--mba-color-grey-300);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.25s ease-in-out;
+}
+
+.mba-dot:hover:not(.is-active) {
+  background-color: var(--mba-color-grey-400);
+}
+
+.mba-dot:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+.mba-dot.is-active {
+  background-color: var(--mba-color-primary-500);
+  cursor: default;
+}
+
 /**
  * MBA Design System - Inputs
  *
@@ -2820,6 +3049,7 @@ button.mba-input-icon__icon:hover {
  * - .mba-section--wave-bottom       - Wave en bas
  * - .mba-section--wave-both         - Waves en haut ET en bas
  * - .mba-section--wave-sm           - Petite wave (24px au lieu de 43px)
+ * - .mba-section--wave-inset        - Padding ajusté pour que le contenu commence après la wave
  *
  * Usage:
  * <section class="mba-section mba-section--lavender mba-section--wave-both">
@@ -2842,13 +3072,34 @@ button.mba-input-icon__icon:hover {
   z-index: 1;
   max-width: 1280px;
   margin: 0 auto;
-  padding: var(--mba-space-xl) var(--mba-space-md);
+  padding: var(--mba-space-xxl) 0;
 }
 
-@media (min-width: 768px) {
-  .mba-section__content {
-    padding: var(--mba-space-xxl) var(--mba-space-lg);
-  }
+/* ===========================================
+   WAVE INSET (opt-in)
+   Ajoute du padding pour que le contenu commence après la wave
+   =========================================== */
+
+.mba-section--wave-inset.mba-section--wave-top .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-both .mba-section__content {
+  padding-top: calc(var(--mba-wave-height) + var(--mba-space-xxl));
+}
+
+.mba-section--wave-inset.mba-section--wave-bottom .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-both .mba-section__content {
+  padding-bottom: calc(var(--mba-wave-height) + var(--mba-space-xxl));
+}
+
+/* Wave inset pour petites waves */
+
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-top .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
+  padding-top: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
+}
+
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-bottom .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
+  padding-bottom: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
 }
 
 /* ===========================================