@maboussoleaidant/design-system 0.1.6 → 0.1.9

package/dist/mba-design-system.css

@@ -486,6 +486,28 @@
   @media (min-width: 1536px) { ... }  2xl
 */
 
+/**
+ * MBA Design System - Decorations
+ *
+ * Variables pour éléments décoratifs (waves, shapes, etc.)
+ *
+ * Naming convention:
+ * - 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;
+  --mba-wave-dip-up-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 42' preserveAspectRatio='none'%3E%3Cpath d='M1280 42H0V27.6706C95.612 27.6706 246.789 0 360.422 0C499.085 0 780.915 27.6706 914.071 27.6706C1068.75 27.6706 1190.9 0 1280 0V42Z' fill='black'/%3E%3C/svg%3E");
+  --mba-wave-dip-down-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V14.3294C1184.39 14.3294 1033.21 42 919.578 42C780.915 42 499.085 14.3294 365.929 14.3294C211.248 14.3294 89.1044 42 0 42V0Z' fill='black'/%3E%3C/svg%3E");
+
+  /* Wave Small (24px) */
+  --mba-wave-sm-height: 24px;
+  --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
  *
@@ -2708,6 +2730,601 @@ button.mba-input-icon__icon:hover {
   gap: var(--mba-space-xxs);
 }
 
+/**
+ * MBA Design System - Wave
+ *
+ * Élément décoratif ondulé réutilisable pour les transitions de sections.
+ *
+ * Classes:
+ * - .mba-wave           - Wave de base (43px)
+ * - .mba-wave--sm       - Petite wave (24px)
+ * - .mba-wave--top      - Inversée (pour haut de section)
+ * - .mba-wave--bottom   - Normale (défaut)
+ * - .mba-wave--lavender - Couleur lavender
+ * - .mba-wave--white    - Couleur blanche
+ * - .mba-wave--beige    - Couleur beige
+ *
+ * Usage:
+ * <div class="mba-wave mba-wave--lavender"></div>
+ * <div class="mba-wave mba-wave--sm mba-wave--lavender mba-wave--top"></div>
+ */
+
+.mba-wave {
+  display: block;
+  width: 100%;
+  height: var(--mba-wave-height);
+  background-color: var(--mba-color-pastel-lavender);
+  -webkit-mask-image: var(--mba-wave-dip-up-mask);
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--mba-wave-dip-up-mask);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+}
+
+/* Position variants */
+
+.mba-wave--top {
+  -webkit-mask-image: var(--mba-wave-dip-down-mask);
+  mask-image: var(--mba-wave-dip-down-mask);
+}
+
+.mba-wave--bottom {
+  -webkit-mask-image: var(--mba-wave-dip-up-mask);
+  mask-image: var(--mba-wave-dip-up-mask);
+}
+
+/* Size variants */
+
+.mba-wave--sm {
+  height: var(--mba-wave-sm-height);
+  -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
+  mask-image: var(--mba-wave-sm-dip-up-mask);
+}
+
+.mba-wave--sm.mba-wave--top {
+  -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
+  mask-image: var(--mba-wave-sm-dip-down-mask);
+}
+
+/* Color variants */
+
+.mba-wave--lavender {
+  background-color: var(--mba-color-pastel-lavender);
+}
+
+.mba-wave--white {
+  background-color: var(--mba-color-white);
+}
+
+.mba-wave--beige {
+  background-color: var(--mba-color-beige);
+}
+
+.mba-wave--primary-50 {
+  background-color: var(--mba-color-primary-50);
+}
+
+/**
+ * MBA Design System - Section
+ *
+ * Section avec fond coloré et waves optionnelles en haut/bas.
+ * Les waves sont générées via pseudo-éléments, pas besoin de HTML supplémentaire.
+ *
+ * Classes:
+ * - .mba-section                    - Container de base
+ * - .mba-section--lavender          - Fond lavender
+ * - .mba-section--beige             - Fond beige
+ * - .mba-section--primary-50        - Fond primary-50
+ * - .mba-section--wave-top          - Wave en haut
+ * - .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)
+ *
+ * Usage:
+ * <section class="mba-section mba-section--lavender mba-section--wave-both">
+ *   <div class="mba-section__content">...</div>
+ * </section>
+ *
+ * Petite wave:
+ * <section class="mba-section mba-section--lavender mba-section--wave-both mba-section--wave-sm">
+ *   ...
+ * </section>
+ */
+
+.mba-section {
+  position: relative;
+  width: 100%;
+}
+
+.mba-section__content {
+  position: relative;
+  z-index: 1;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--mba-space-xl) var(--mba-space-md);
+}
+
+@media (min-width: 768px) {
+  .mba-section__content {
+    padding: var(--mba-space-xxl) var(--mba-space-lg);
+  }
+}
+
+/* ===========================================
+   BACKGROUND COLORS
+   =========================================== */
+
+.mba-section--lavender {
+  background-color: var(--mba-color-pastel-lavender);
+}
+
+.mba-section--beige {
+  background-color: var(--mba-color-beige);
+}
+
+.mba-section--primary-50 {
+  background-color: var(--mba-color-primary-50);
+}
+
+.mba-section--white {
+  background-color: var(--mba-color-white);
+}
+
+/* ===========================================
+   WAVE TOP (::before)
+   =========================================== */
+
+.mba-section--wave-top::before,
+.mba-section--wave-both::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--mba-wave-height);
+  background-color: var(--mba-color-white);
+  -webkit-mask-image: var(--mba-wave-dip-down-mask);
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--mba-wave-dip-down-mask);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  pointer-events: none;
+}
+
+/* ===========================================
+   WAVE BOTTOM (::after)
+   =========================================== */
+
+.mba-section--wave-bottom::after,
+.mba-section--wave-both::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--mba-wave-height);
+  background-color: var(--mba-color-white);
+  -webkit-mask-image: var(--mba-wave-dip-up-mask);
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--mba-wave-dip-up-mask);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  pointer-events: none;
+}
+
+/* ===========================================
+   WAVE SIZE: SMALL (24px)
+   =========================================== */
+
+.mba-section--wave-sm.mba-section--wave-top::before,
+.mba-section--wave-sm.mba-section--wave-both::before {
+  height: var(--mba-wave-sm-height);
+  -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
+  mask-image: var(--mba-wave-sm-dip-down-mask);
+}
+
+.mba-section--wave-sm.mba-section--wave-bottom::after,
+.mba-section--wave-sm.mba-section--wave-both::after {
+  height: var(--mba-wave-sm-height);
+  -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
+  mask-image: var(--mba-wave-sm-dip-up-mask);
+}
+
+/* ===========================================
+   CUSTOM WAVE COLOR (pour sections sur fond non-blanc)
+   Ajouter la classe --wave-[color] pour changer la couleur de la wave
+   =========================================== */
+
+.mba-section--wave-lavender::before,
+.mba-section--wave-lavender::after {
+  background-color: var(--mba-color-pastel-lavender);
+}
+
+.mba-section--wave-beige::before,
+.mba-section--wave-beige::after {
+  background-color: var(--mba-color-beige);
+}
+
+.mba-section--wave-primary-50::before,
+.mba-section--wave-primary-50::after {
+  background-color: var(--mba-color-primary-50);
+}
+
+/**
+ * MBA Design System - Footer
+ *
+ * Footer principal avec logo, navigation, réseaux sociaux et mentions légales.
+ *
+ * Structure:
+ * .mba-footer
+ *   .mba-footer__main          - Section principale (flex, space-between)
+ *     .mba-footer__brand       - Logo + mission + contact (gauche)
+ *     .mba-footer__right       - Wrapper nav + social (droite)
+ *       .mba-footer__nav       - Colonnes de navigation
+ *       .mba-footer__social    - Icônes réseaux sociaux
+ *   .mba-footer__bottom        - Barre inférieure (lavender)
+ *     .mba-footer__legal       - Copyright + liens légaux
+ *
+ * Modificateurs:
+ * - .mba-footer--pro           - Version partenaire (primary-pro)
+ */
+
+/* ===========================================
+   FOOTER CONTAINER
+   =========================================== */
+
+.mba-footer {
+  width: 100%;
+  background-color: var(--mba-color-white);
+}
+
+/* ===========================================
+   MAIN SECTION
+   =========================================== */
+
+.mba-footer__main {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: var(--mba-space-xl) var(--mba-space-sm) var(--mba-space-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-lg);
+}
+
+@media (min-width: 768px) {
+  .mba-footer__main {
+    padding: var(--mba-space-xl) 0;
+  }
+}
+
+@media (min-width: 1024px) {
+  .mba-footer__main {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+}
+
+/* ===========================================
+   BRAND (Logo + Mission + Contact)
+   =========================================== */
+
+.mba-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-sm);
+}
+
+/* ===========================================
+   RIGHT SECTION (Nav + Social)
+   =========================================== */
+
+.mba-footer__right {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-lg);
+}
+
+@media (min-width: 1024px) {
+  .mba-footer__right {
+    align-items: flex-end;
+  }
+}
+
+.mba-footer__logo {
+  height: auto;
+  max-height: 32px;
+}
+
+.mba-footer__mission {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  line-height: var(--mba-line-height-relaxed);
+  color: var(--mba-color-text);
+  margin: 0;
+  max-width: 300px;
+}
+
+.mba-footer__contact {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 600;
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color var(--mba-transition-fast);
+}
+
+.mba-footer__contact:hover {
+  color: var(--mba-color-primary-800);
+  text-decoration: underline;
+}
+
+/* ===========================================
+   NAVIGATION
+   =========================================== */
+
+.mba-footer__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-lg);
+}
+
+@media (min-width: 768px) {
+  .mba-footer__nav {
+    flex-direction: row;
+    gap: var(--mba-space-xxl);
+  }
+}
+
+.mba-footer__nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-sm);
+}
+
+.mba-footer__nav-title {
+  display: none;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 700;
+  color: var(--mba-color-primary-900);
+  margin: 0;
+  margin-bottom: var(--mba-space-xs);
+  text-decoration: underline;
+  text-decoration-color: var(--mba-color-primary-100);
+  text-decoration-thickness: 2px;
+  text-underline-offset: var(--mba-space-xs);
+}
+
+.mba-footer__nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mba-space-sm);
+}
+
+.mba-footer__nav-link {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 600;
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color var(--mba-transition-fast);
+}
+
+.mba-footer__nav-link:hover {
+  color: var(--mba-color-primary-800);
+  text-decoration: underline;
+}
+
+/* ===========================================
+   ACCORDION (Mobile)
+   =========================================== */
+
+.mba-footer__nav-toggle {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  padding-bottom: var(--mba-space-xs);
+  /* margin-bottom: var(--mba-space-xs); */
+  border: none;
+  border-bottom: 2px solid var(--mba-color-primary-100);
+  background: none;
+  cursor: pointer;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 700;
+  color: var(--mba-color-text);
+}
+
+.mba-footer__nav-toggle-icon {
+  font-size: 20px;
+  transition: transform var(--mba-transition-fast);
+}
+
+.mba-footer__nav-toggle[aria-expanded="true"] .mba-footer__nav-toggle-icon {
+  transform: rotate(180deg);
+}
+
+.mba-footer__nav-content {
+  display: none;
+}
+
+.mba-footer__nav-content[data-expanded="true"] {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .mba-footer__nav-toggle {
+    display: none;
+  }
+
+  .mba-footer__nav-title {
+    display: block;
+  }
+
+  .mba-footer__nav-content {
+    display: block;
+    padding-top: 0;
+  }
+}
+
+/* ===========================================
+   SOCIAL ICONS
+   =========================================== */
+
+.mba-footer__social {
+  display: flex;
+  gap: var(--mba-space-sm);
+  align-items: center;
+}
+
+.mba-footer__social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--mba-color-primary-900);
+  transition: color var(--mba-transition-fast);
+}
+
+.mba-footer__social-link:hover {
+  color: var(--mba-color-primary-500);
+}
+
+.mba-footer__social-icon {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* ===========================================
+   BOTTOM BAR
+   =========================================== */
+
+.mba-footer__bottom {
+  background-color: var(--mba-color-pastel-lavender);
+}
+
+.mba-footer__legal {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: var(--mba-space-md) var(--mba-space-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-sm);
+}
+
+@media (min-width: 768px) {
+  .mba-footer__legal {
+    padding: var(--mba-space-md) 0;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.mba-footer__copyright {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  color: var(--mba-color-primary-900);
+  margin: 0;
+  padding-top: var(--mba-space-sm);
+  border-top: 1px solid var(--mba-color-primary-400);
+  order: 2;
+}
+
+@media (min-width: 768px) {
+  .mba-footer__copyright {
+    padding-top: 0;
+    border-top: none;
+    order: 0;
+  }
+}
+
+.mba-footer__legal-links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mba-space-sm);
+  order: 1;
+}
+
+@media (min-width: 768px) {
+  .mba-footer__legal-links {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--mba-space-sm);
+    order: 0;
+  }
+}
+
+.mba-footer__legal-link {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 600;
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color var(--mba-transition-fast);
+}
+
+.mba-footer__legal-link:hover {
+  color: var(--mba-color-primary-800);
+  text-decoration: underline;
+}
+
+/* ===========================================
+   PRO VARIANT
+   =========================================== */
+
+.mba-footer--pro .mba-footer__contact,
+.mba-footer--pro .mba-footer__nav-link,
+.mba-footer--pro .mba-footer__legal-link {
+  color: var(--mba-color-primary-pro-500);
+}
+
+.mba-footer--pro .mba-footer__contact:hover,
+.mba-footer--pro .mba-footer__nav-link:hover,
+.mba-footer--pro .mba-footer__legal-link:hover {
+  color: var(--mba-color-primary-pro-800);
+}
+
+.mba-footer--pro .mba-footer__nav-title {
+  color: var(--mba-color-primary-pro-800);
+  text-decoration-color: var(--mba-color-primary-pro-100);
+}
+
+.mba-footer--pro .mba-footer__nav-toggle {
+  border-bottom-color: var(--mba-color-primary-pro-100);
+}
+
+.mba-footer--pro .mba-footer__social-link {
+  color: var(--mba-color-primary-pro-800);
+}
+
+.mba-footer--pro .mba-footer__social-link:hover {
+  color: var(--mba-color-primary-pro-500);
+}
+
+.mba-footer--pro .mba-footer__bottom {
+  background-color: var(--mba-color-pastel-bleuet);
+}
+
+.mba-footer--pro .mba-footer__copyright {
+  color: var(--mba-color-primary-pro-800);
+  border-top-color: var(--mba-color-primary-pro-400);
+}
+
 /* @import "./_forms.css"; */
 
 /* @import "./_alerts.css"; */