@maboussoleaidant/design-system 0.1.17 → 0.1.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -45,6 +45,7 @@
45
45
  --mba-color-info-800: #1F4076;
46
46
  --mba-color-brick-light: #FCF4F0;
47
47
  --mba-color-brick: #AC5118;
48
+ --mba-color-infobox: #fef7e6;
48
49
  --mba-color-forest-light: #DEF8EF;
49
50
  --mba-color-forest: #16654C;
50
51
  --mba-color-rose-light: #FAEFF4;
@@ -80,6 +81,7 @@
80
81
  --mba-font-size-xl: 2rem;
81
82
  --mba-font-size-xxl: 3rem;
82
83
  --mba-font-weight-regular: 400;
84
+ --mba-font-weight-medium: 500;
83
85
  --mba-font-weight-semibold: 600;
84
86
  --mba-font-weight-bold: 700;
85
87
  --mba-font-weight-extrabold: 800;
@@ -180,6 +182,7 @@
180
182
  --mba-space-xxl: 4rem;
181
183
  --mba-space-0: 0;
182
184
  --mba-space-px: 1px;
185
+ --mba-space-gap-10: 10px;
183
186
  --mba-container-width: 70rem;
184
187
  }
185
188
  :root {
@@ -248,127 +251,143 @@
248
251
  font-style: normal;
249
252
  font-weight: 400;
250
253
  font-display: swap;
251
- src: url("../assets/fonts/OpenSans-Regular.woff2") format("woff2");
254
+ src: url("/assets/fonts/OpenSans-Regular.woff2") format("woff2");
252
255
  }
253
256
  @font-face {
254
257
  font-family: "Open Sans";
255
258
  font-style: normal;
256
259
  font-weight: 600;
257
260
  font-display: swap;
258
- src: url("../assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
261
+ src: url("/assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
259
262
  }
260
263
  @font-face {
261
264
  font-family: "Open Sans";
262
265
  font-style: normal;
263
266
  font-weight: 700;
264
267
  font-display: swap;
265
- src: url("../assets/fonts/OpenSans-Bold.woff2") format("woff2");
268
+ src: url("/assets/fonts/OpenSans-Bold.woff2") format("woff2");
266
269
  }
267
270
  @font-face {
268
271
  font-family: "Open Sans";
269
272
  font-style: normal;
270
273
  font-weight: 800;
271
274
  font-display: swap;
272
- src: url("../assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
275
+ src: url("/assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
273
276
  }
274
277
  @font-face {
275
278
  font-family: "Congenial";
276
279
  font-style: normal;
277
280
  font-weight: 400;
278
281
  font-display: swap;
279
- src: url("../assets/fonts/Congenial.woff2") format("woff2");
282
+ src: url("/assets/fonts/Congenial.woff2") format("woff2");
280
283
  }
281
284
  @font-face {
282
285
  font-family: "Congenial";
283
286
  font-style: normal;
284
287
  font-weight: 500;
285
288
  font-display: swap;
286
- src: url("../assets/fonts/Congenial-Medium.woff2") format("woff2");
289
+ src: url("/assets/fonts/Congenial-Medium.woff2") format("woff2");
287
290
  }
288
291
  @font-face {
289
292
  font-family: "Congenial";
290
293
  font-style: normal;
291
294
  font-weight: 700;
292
295
  font-display: swap;
293
- src: url("../assets/fonts/Congenial-Bold.woff2") format("woff2");
296
+ src: url("/assets/fonts/Congenial-Bold.woff2") format("woff2");
294
297
  }
295
298
  @font-face {
296
299
  font-family: 'Material Symbols Rounded';
297
300
  font-style: normal;
298
301
  font-weight: 100 700;
299
302
  font-display: block;
300
- src: url('../assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
303
+ src: url('/assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
301
304
  }
302
- .material-symbols-rounded {
303
- font-family: 'Material Symbols Rounded';
304
- font-weight: normal;
305
- font-style: normal;
306
- font-size: 24px;
307
- line-height: 1;
308
- letter-spacing: normal;
309
- text-transform: none;
310
- display: inline-block;
311
- white-space: nowrap;
312
- word-wrap: normal;
313
- direction: ltr;
314
- -webkit-font-feature-settings: 'liga';
315
- font-feature-settings: 'liga';
316
- -webkit-font-smoothing: antialiased;
317
- -moz-osx-font-smoothing: grayscale;
318
- text-rendering: optimizeLegibility;
319
- font-variation-settings: 'FILL' 0,
305
+ @layer base {
306
+ .material-symbols-rounded {
307
+ font-family: 'Material Symbols Rounded';
308
+ font-weight: normal;
309
+ font-style: normal;
310
+ font-size: 24px;
311
+ line-height: 1;
312
+ letter-spacing: normal;
313
+ text-transform: none;
314
+ display: inline-block;
315
+ white-space: nowrap;
316
+ word-wrap: normal;
317
+ direction: ltr;
318
+ -webkit-font-feature-settings: 'liga';
319
+ font-feature-settings: 'liga';
320
+ -webkit-font-smoothing: antialiased;
321
+ -moz-osx-font-smoothing: grayscale;
322
+ text-rendering: optimizeLegibility;
323
+ font-variation-settings: 'FILL' 0,
320
324
  'wght' 400,
321
325
  'GRAD' 0,
322
326
  'opsz' 24;
323
- }
324
- .mba-icon {
325
- font-size: 24px;
326
- width: 24px;
327
- height: 24px;
328
- font-variation-settings: 'FILL' 0,
327
+ }
328
+ .mba-icon {
329
+ font-size: 24px;
330
+ width: 24px;
331
+ height: 24px;
332
+ font-variation-settings: 'FILL' 0,
329
333
  'wght' 400,
330
334
  'GRAD' 0,
331
335
  'opsz' 24;
332
- }
333
- .mba-icon--sm {
334
- font-size: 16px;
335
- width: 16px;
336
- height: 16px;
337
- font-variation-settings: 'FILL' 0,
336
+ }
337
+ .mba-icon--sm {
338
+ font-size: 16px;
339
+ width: 16px;
340
+ height: 16px;
341
+ font-variation-settings: 'FILL' 0,
338
342
  'wght' 400,
339
343
  'GRAD' 0,
340
344
  'opsz' 20;
341
- }
342
- .mba-icon--fill,
345
+ }
346
+ .mba-icon--xs {
347
+ font-size: 12px;
348
+ width: 12px;
349
+ height: 12px;
350
+ font-variation-settings: 'FILL' 0,
351
+ 'wght' 400,
352
+ 'GRAD' 0,
353
+ 'opsz' 20;
354
+ }
355
+ .mba-accordion__item-icon.material-symbols-rounded {
356
+ display: inline-flex;
357
+ align-items: center;
358
+ justify-content: center;
359
+ }
360
+ .mba-icon--fill,
343
361
  .material-symbols-rounded.mba-icon--fill {
344
- font-variation-settings: 'FILL' 1,
362
+ font-variation-settings: 'FILL' 1,
345
363
  'wght' 400,
346
364
  'GRAD' 0,
347
365
  'opsz' 24;
348
- }
349
- .mba-icon--sm.mba-icon--fill {
350
- font-variation-settings: 'FILL' 1,
366
+ }
367
+ .mba-icon--sm.mba-icon--fill {
368
+ font-variation-settings: 'FILL' 1,
351
369
  'wght' 400,
352
370
  'GRAD' 0,
353
371
  'opsz' 20;
354
- }
355
- .mba-icon--primary {
356
- color: var(--mba-color-primary-500);
357
- }
358
- .mba-icon--success {
359
- color: var(--mba-color-success-500);
360
- }
361
- .mba-icon--warning {
362
- color: var(--mba-color-warning-500);
363
- }
364
- .mba-icon--error {
365
- color: var(--mba-color-error-500);
366
- }
367
- .mba-icon--info {
368
- color: var(--mba-color-info-500);
369
- }
370
- .mba-icon--muted {
371
- color: var(--mba-color-text-muted);
372
+ }
373
+ .mba-icon--primary {
374
+ color: var(--mba-color-primary-500);
375
+ }
376
+ .mba-icon--success {
377
+ color: var(--mba-color-success-500);
378
+ }
379
+ .mba-icon--warning {
380
+ color: var(--mba-color-warning-500);
381
+ }
382
+ .mba-icon--error {
383
+ color: var(--mba-color-error-500);
384
+ }
385
+ .mba-icon--info {
386
+ color: var(--mba-color-info-500);
387
+ }
388
+ .mba-icon--muted {
389
+ color: var(--mba-color-text-muted);
390
+ }
372
391
  }
373
392
  @layer base {
374
393
  *,
@@ -580,6 +599,12 @@ video {
580
599
  color: var(--mba-color-link);
581
600
  transition: color var(--mba-transition-fast);
582
601
  }
602
+ .mba-header--partenaire a {
603
+ color: var(--mba-color-primary-pro-500);
604
+ }
605
+ .mba-header--partenaire a:hover {
606
+ color: var(--mba-color-primary-pro-500);
607
+ }
583
608
  a:hover {
584
609
  color: var(--mba-color-link-hover);
585
610
  }
@@ -850,9 +875,10 @@ video {
850
875
  box-shadow: var(--mba-focus-ring);
851
876
  }
852
877
  .mba-btn-pin.is-deja-vu {
853
- border-color: var(--mba-color-grey-300);
854
- background-color: var(--mba-color-grey-50);
855
- color: var(--mba-color-grey-300);
878
+ box-shadow: var(--mba-shadow-xs);
879
+ border-color: var(--mba-color-white);
880
+ background-color: var(--mba-color-white);
881
+ color: var(--mba-color-grey-400);
856
882
  }
857
883
  .mba-btn-pin.is-activated {
858
884
  border-color: var(--mba-color-primary-500);
@@ -1029,8 +1055,11 @@ video {
1029
1055
  }
1030
1056
  .mba-card__icon {
1031
1057
  flex-shrink: 0;
1058
+ display: flex;
1059
+ align-items: center;
1060
+ justify-content: center;
1032
1061
  color: var(--mba-color-primary-500);
1033
- font-size: 24px;
1062
+ font-size: var(--mba-font-size-md);
1034
1063
  transition: transform var(--mba-transition-base);
1035
1064
  }
1036
1065
  .mba-card__icon svg {
@@ -1076,19 +1105,6 @@ video {
1076
1105
  height: 278px;
1077
1106
  box-sizing: border-box;
1078
1107
  }
1079
- .mba-carousel-card::before {
1080
- content: "";
1081
- position: absolute;
1082
- inset: 0;
1083
- padding: 1px;
1084
- background: var(--mba-gradient-sunset);
1085
- border-radius: 24px 24px 8px 24px;
1086
- mask: linear-gradient(#fff 0 0) content-box,
1087
- linear-gradient(#fff 0 0);
1088
- mask-composite: exclude;
1089
- -webkit-mask-composite: xor;
1090
- pointer-events: none;
1091
- }
1092
1108
  .mba-carousel-card__title {
1093
1109
  font-family: var(--mba-font-family-text);
1094
1110
  font-size: var(--mba-font-size-sm);
@@ -1125,19 +1141,6 @@ video {
1125
1141
  box-shadow: var(--mba-shadow-xs);
1126
1142
  transition: transform var(--mba-transition-slow), box-shadow var(--mba-transition-slow);
1127
1143
  }
1128
- .mba-stats-card::before {
1129
- content: "";
1130
- position: absolute;
1131
- inset: 0;
1132
- padding: 1px;
1133
- background: var(--mba-gradient-sunset);
1134
- border-radius: var(--mba-radius-md);
1135
- mask: linear-gradient(#fff 0 0) content-box,
1136
- linear-gradient(#fff 0 0);
1137
- mask-composite: exclude;
1138
- -webkit-mask-composite: xor;
1139
- pointer-events: none;
1140
- }
1141
1144
  .mba-stats-card:hover {
1142
1145
  transform: translateY(-4px);
1143
1146
  box-shadow: var(--mba-shadow-sm);
@@ -1262,7 +1265,7 @@ video {
1262
1265
  text-decoration: underline;
1263
1266
  }
1264
1267
  .mba-article-card__link .material-symbols-rounded {
1265
- font-size: 20px;
1268
+ font-size: var(--mba-font-size-xs);
1266
1269
  }
1267
1270
  .mba-article-card-grid {
1268
1271
  display: grid;
@@ -1613,7 +1616,7 @@ video {
1613
1616
  font-size: var(--mba-font-size-xxs);
1614
1617
  }
1615
1618
  .mba-label__icon {
1616
- font-size: 16px;
1619
+ font-size: var(--mba-font-size-xs);
1617
1620
  color: var(--mba-color-grey-400);
1618
1621
  }
1619
1622
  .mba-textarea {
@@ -1799,7 +1802,7 @@ video {
1799
1802
  right: 0;
1800
1803
  display: none;
1801
1804
  flex-direction: column;
1802
- gap: 10px;
1805
+ gap: var(--mba-space-gap-10);
1803
1806
  padding: var(--mba-space-xs);
1804
1807
  border-radius: var(--mba-radius-2xs);
1805
1808
  background-color: var(--mba-color-white);
@@ -1846,6 +1849,8 @@ video {
1846
1849
  display: inline-block;
1847
1850
  width: 42px;
1848
1851
  height: 24px;
1852
+ box-shadow: var(--mba-shadow-xxs);
1853
+ border-radius: 32px;
1849
1854
  }
1850
1855
  .mba-toggle input {
1851
1856
  opacity: 0;
@@ -1871,6 +1876,7 @@ video {
1871
1876
  left: 2px;
1872
1877
  top: 2px;
1873
1878
  background-color: var(--mba-color-white);
1879
+ box-shadow: var(--mba-shadow-xxs);
1874
1880
  transition: all var(--mba-transition-slow);
1875
1881
  border-radius: 50%;
1876
1882
  }
@@ -1911,7 +1917,7 @@ video {
1911
1917
  color: var(--mba-color-grey-400);
1912
1918
  }
1913
1919
  .mba-input-icon__icon {
1914
- font-size: 16px;
1920
+ font-size: var(--mba-font-size-xs);
1915
1921
  color: var(--mba-color-grey-400);
1916
1922
  margin-left: var(--mba-space-xs);
1917
1923
  }
@@ -1968,137 +1974,650 @@ video {
1968
1974
  }
1969
1975
  }
1970
1976
  @layer components {
1971
- .mba-wave {
1972
- display: block;
1977
+ .mba-header {
1978
+ background-color: var(--mba-color-white);
1979
+ border-radius: 0 0 var(--mba-radius-md) var(--mba-radius-md);
1980
+ box-shadow: var(--mba-shadow-xs);
1981
+ position: relative;
1973
1982
  width: 100%;
1974
- height: var(--mba-wave-height);
1975
- background-color: var(--mba-color-pastel-lavender);
1976
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
1977
- -webkit-mask-size: 100% 100%;
1978
- -webkit-mask-repeat: no-repeat;
1979
- mask-image: var(--mba-wave-dip-up-mask);
1980
- mask-size: 100% 100%;
1981
- mask-repeat: no-repeat;
1982
- }
1983
- .mba-wave--top {
1984
- -webkit-mask-image: var(--mba-wave-dip-down-mask);
1985
- mask-image: var(--mba-wave-dip-down-mask);
1986
- }
1987
- .mba-wave--bottom {
1988
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
1989
- mask-image: var(--mba-wave-dip-up-mask);
1990
- }
1991
- .mba-wave--sm {
1992
- height: var(--mba-wave-sm-height);
1993
- -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
1994
- mask-image: var(--mba-wave-sm-dip-up-mask);
1995
- }
1996
- .mba-wave--sm.mba-wave--top {
1997
- -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
1998
- mask-image: var(--mba-wave-sm-dip-down-mask);
1999
- }
2000
- .mba-wave--lavender {
2001
- background-color: var(--mba-color-pastel-lavender);
1983
+ box-sizing: border-box;
2002
1984
  }
2003
- .mba-wave--white {
2004
- background-color: var(--mba-color-white);
1985
+ .mba-header__container {
1986
+ display: flex;
1987
+ align-items: center;
1988
+ justify-content: space-between;
1989
+ padding: var(--mba-space-md) var(--mba-space-xl);
1990
+ max-width: var(--mba-container-width);
1991
+ margin: 0 auto;
2005
1992
  }
2006
- .mba-wave--beige {
2007
- background-color: var(--mba-color-beige);
1993
+ .mba-header__logo {
1994
+ display: flex;
1995
+ align-items: center;
1996
+ gap: var(--mba-space-xs);
1997
+ text-decoration: none;
2008
1998
  }
2009
- .mba-wave--primary-50 {
2010
- background-color: var(--mba-color-primary-50);
1999
+ .mba-header__logo-img {
2000
+ max-width: 227.92px;
2001
+ height: 32px;
2002
+ display: block;
2011
2003
  }
2012
- }
2013
- @layer components {
2014
- .mba-section {
2015
- position: relative;
2016
- width: 100%;
2004
+ .mba-header__nav {
2005
+ display: flex;
2006
+ align-items: center;
2007
+ gap: var(--mba-space-md);
2008
+ list-style: none;
2009
+ margin: 0;
2010
+ padding: 0;
2011
+ margin-left: var(
2012
+ --mba-space-lg
2013
+ );
2017
2014
  }
2018
- .mba-section__content {
2015
+ .mba-header__nav-item {
2019
2016
  position: relative;
2020
- z-index: 1;
2021
- max-width: var(--mba-container-width);
2022
- margin: 0 auto;
2023
- padding: var(--mba-space-xxl) 0;
2024
2017
  }
2025
- .mba-section--wave-inset.mba-section--wave-top .mba-section__content,
2026
- .mba-section--wave-inset.mba-section--wave-both .mba-section__content {
2027
- padding-top: calc(var(--mba-wave-height) + var(--mba-space-xxl));
2018
+ .mba-header__nav-link {
2019
+ display: flex;
2020
+ align-items: center;
2021
+ gap: var(--mba-space-xxs);
2022
+ padding: var(--mba-space-xxs) var(--mba-space-xs);
2023
+ font-family: var(--mba-font-family-text);
2024
+ font-size: var(--mba-font-size-xs);
2025
+ font-weight: var(--mba-font-weight-regular);
2026
+ color: var(--mba-color-primary-900);
2027
+ text-decoration: none;
2028
+ border-radius: var(--mba-radius-sm);
2029
+ transition: background-color var(--mba-transition-base),
2030
+ color var(--mba-transition-base);
2031
+ cursor: pointer;
2032
+ background: none;
2033
+ border: none;
2034
+ white-space: nowrap;
2028
2035
  }
2029
- .mba-section--wave-inset.mba-section--wave-bottom .mba-section__content,
2030
- .mba-section--wave-inset.mba-section--wave-both .mba-section__content {
2031
- padding-bottom: calc(var(--mba-wave-height) + var(--mba-space-xxl));
2036
+ .mba-header__nav-link:hover {
2037
+ background-color: var(--mba-color-pastel-lavender);
2038
+ color: var(--mba-color-primary-900);
2032
2039
  }
2033
- .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-top .mba-section__content,
2034
- .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
2035
- padding-top: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
2040
+ .mba-header--partenaire .mba-header__nav-link:hover {
2041
+ color: var(--mba-color-primary-pro-500);
2042
+ background-color: var(--mba-color-pastel-bleuet);
2036
2043
  }
2037
- .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-bottom .mba-section__content,
2038
- .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
2039
- padding-bottom: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
2044
+ .mba-header--partenaire .mba-header__nav-link {
2045
+ color: var(--mba-color-primary-pro-500);
2040
2046
  }
2041
- .mba-section--lavender {
2047
+ .mba-header__nav-link--active {
2042
2048
  background-color: var(--mba-color-pastel-lavender);
2049
+ border-radius: var(--mba-radius-sm);
2050
+ color: var(--mba-color-primary-900);
2043
2051
  }
2044
- .mba-section--beige {
2045
- background-color: var(--mba-color-beige);
2052
+ .mba-header__nav-link .mba-icon,
2053
+ .mba-header__mobile-nav-link .mba-icon {
2054
+ display: inline-flex;
2055
+ align-items: center;
2056
+ justify-content: center;
2057
+ margin-left: var(--mba-space-xxs);
2058
+ color: var(--mba-color-primary-900);
2046
2059
  }
2047
- .mba-section--primary-50 {
2048
- background-color: var(--mba-color-primary-50);
2060
+ .mba-header--partenaire .mba-header__nav-link .mba-icon,
2061
+ .mba-header--partenaire .mba-header__mobile-nav-link .mba-icon {
2062
+ color: var(--mba-color-primary-pro-500);
2049
2063
  }
2050
- .mba-section--white {
2051
- background-color: var(--mba-color-white);
2064
+ .mba-header__nav-link--open {
2065
+ background-color: var(--mba-color-pastel-lavender);
2066
+ border-radius: var(--mba-radius-sm);
2067
+ color: var(--mba-color-primary-900);
2052
2068
  }
2053
- .mba-section--wave-top::before,
2054
- .mba-section--wave-both::before {
2055
- content: "";
2056
- position: absolute;
2057
- left: 0;
2058
- right: 0;
2059
- top: 0;
2060
- height: var(--mba-wave-height);
2061
- background-color: var(--mba-color-white);
2062
- -webkit-mask-image: var(--mba-wave-dip-down-mask);
2063
- -webkit-mask-size: 100% 100%;
2064
- -webkit-mask-repeat: no-repeat;
2065
- mask-image: var(--mba-wave-dip-down-mask);
2066
- mask-size: 100% 100%;
2067
- mask-repeat: no-repeat;
2068
- pointer-events: none;
2069
+ .mba-header--partenaire .mba-header__nav-link--open {
2070
+ background-color: var(--mba-color-pastel-bleuet);
2071
+ color: var(--mba-color-primary-pro-500);
2069
2072
  }
2070
- .mba-section--wave-bottom::after,
2071
- .mba-section--wave-both::after {
2072
- content: "";
2073
+ .mba-header__dropdown {
2073
2074
  position: absolute;
2075
+ top: calc(100% + var(--mba-space-lg));
2074
2076
  left: 0;
2075
- right: 0;
2076
- bottom: 0;
2077
- height: var(--mba-wave-height);
2077
+ width: 739px;
2078
2078
  background-color: var(--mba-color-white);
2079
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
2080
- -webkit-mask-size: 100% 100%;
2081
- -webkit-mask-repeat: no-repeat;
2082
- mask-image: var(--mba-wave-dip-up-mask);
2083
- mask-size: 100% 100%;
2084
- mask-repeat: no-repeat;
2085
- pointer-events: none;
2079
+ color: var(--mba-color-primary-500);
2080
+ border-radius: var(--mba-radius-sm);
2081
+ box-shadow: var(--mba-shadow-sm);
2082
+ padding: var(--mba-space-sm);
2083
+ display: none;
2084
+ z-index: 1000;
2085
+ animation: dropdownFadeIn var(--mba-transition-base);
2086
2086
  }
2087
- .mba-section--wave-sm.mba-section--wave-top::before,
2088
- .mba-section--wave-sm.mba-section--wave-both::before {
2089
- height: var(--mba-wave-sm-height);
2090
- -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
2091
- mask-image: var(--mba-wave-sm-dip-down-mask);
2087
+ .mba-header__dropdown--open {
2088
+ display: block;
2089
+ box-shadow: var(--mba-shadow-xs);
2092
2090
  }
2093
- .mba-section--wave-sm.mba-section--wave-bottom::after,
2094
- .mba-section--wave-sm.mba-section--wave-both::after {
2095
- height: var(--mba-wave-sm-height);
2096
- -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
2097
- mask-image: var(--mba-wave-sm-dip-up-mask);
2091
+ @keyframes dropdownFadeIn {
2092
+ from {
2093
+ opacity: 0;
2094
+ transform: translateY(calc(-1 * var(--mba-space-xs)));
2095
+ }
2096
+ to {
2097
+ opacity: 1;
2098
+ transform: translateY(0);
2099
+ }
2098
2100
  }
2099
- .mba-section--wave-lavender::before,
2100
- .mba-section--wave-lavender::after {
2101
- background-color: var(--mba-color-pastel-lavender);
2101
+ .mba-header__dropdown-title {
2102
+ font-family: var(--mba-font-family-text);
2103
+ font-size: var(--mba-font-size-xs);
2104
+ font-weight: var(--mba-font-weight-semibold);
2105
+ color: var(--mba-color-text);
2106
+ margin: 0 0 var(--mba-space-xs) 0;
2107
+ padding-bottom: var(--mba-space-sm);
2108
+ border-bottom: 1px solid var(--mba-color-grey-50);
2109
+ }
2110
+ .mba-header--partenaire .mba-header__dropdown-title,
2111
+ .mba-header--partenaire .mba-header__dropdown-title:hover {
2112
+ color: var(--mba-color-primary-pro-800);
2113
+ }
2114
+ .mba-header__dropdown-list {
2115
+ list-style: none;
2116
+ margin: 0;
2117
+ padding: 0;
2118
+ display: flex;
2119
+ flex-direction: column;
2120
+ gap: var(--mba-space-xxs);
2121
+ }
2122
+ .mba-header__dropdown-item {
2123
+ display: flex;
2124
+ align-items: flex-start;
2125
+ text-decoration: none;
2126
+ cursor: pointer;
2127
+ position: relative;
2128
+ border-radius: var(--mba-radius-sm);
2129
+ border: 1px solid transparent;
2130
+ gap: var(--mba-space-sm);
2131
+ padding: var(--mba-space-xs);
2132
+ transition: background-color var(--mba-transition-base);
2133
+ }
2134
+ .mba-header__dropdown-icon {
2135
+ margin-top: var(--mba-space-xs);
2136
+ padding: var(--mba-space-sm);
2137
+ gap: var(--mba-space-gap-10);
2138
+ flex-shrink: 0;
2139
+ width: 56px;
2140
+ height: 56px;
2141
+ display: flex;
2142
+ align-items: center;
2143
+ justify-content: center;
2144
+ background-color: var(--mba-color-pastel-lavender);
2145
+ border-radius: var(--mba-radius-sm);
2146
+ color: var(--mba-color-primary-500);
2147
+ }
2148
+ .mba-header__dropdown-icon .mba-icon {
2149
+ font-size: var(--mba-font-size-md);
2150
+ width: 1.25rem;
2151
+ height: 1.25rem;
2152
+ margin-bottom: var(--mba-space-xxs);
2153
+ }
2154
+ .mba-header--partenaire .mba-header__dropdown-icon {
2155
+ background-color: var(--mba-color-pastel-bleuet);
2156
+ color: var(--mba-color-primary-pro-500);
2157
+ }
2158
+ .mba-header__dropdown-content {
2159
+ flex: 1;
2160
+ gap: var(--mba-space-xxs);
2161
+ }
2162
+ .mba-header__dropdown-label {
2163
+ font-family: var(--mba-font-family-text);
2164
+ font-size: var(--mba-font-size-xs);
2165
+ font-weight: var(--mba-font-weight-bold);
2166
+ color: var(--mba-color-primary-900);
2167
+ margin: 0 0 var(--mba-space-xxs) 0;
2168
+ display: block;
2169
+ }
2170
+ .mba-header--partenaire .mba-header__dropdown-label {
2171
+ color: var(--mba-color-primary-pro-800);
2172
+ }
2173
+ .mba-header--partenaire .mba-header__dropdown-description {
2174
+ color: var(--mba-color-primary-pro-800);
2175
+ }
2176
+ .mba-header__dropdown-description {
2177
+ font-family: var(--mba-font-family-text);
2178
+ font-size: var(--mba-font-size-xs);
2179
+ font-weight: var(--mba-font-weight-regular);
2180
+ color: var(--mba-color-primary-900);
2181
+ margin: 0;
2182
+ line-height: var(--mba-leading-normal);
2183
+ }
2184
+ .mba-header__dropdown-content-wrapper {
2185
+ display: flex;
2186
+ gap: var(--mba-space-md);
2187
+ align-items: stretch;
2188
+ margin-top: var(--mba-space-xs);
2189
+ }
2190
+ .mba-header__dropdown-main {
2191
+ flex: 1;
2192
+ width: 437px;
2193
+ gap: var(--mba-space-sm);
2194
+ }
2195
+ .mba-header__dropdown-infobox {
2196
+ flex: 0 0 246px;
2197
+ background-color: var(--mba-color-pastel-narcisse);
2198
+ border-radius: var(--mba-radius-sm);
2199
+ padding: var(--mba-space-sm);
2200
+ display: flex;
2201
+ flex-direction: column;
2202
+ gap: var(--mba-space-gap-10);
2203
+ }
2204
+ .mba-header__dropdown-infobox-title {
2205
+ font-family: var(--mba-font-family-text);
2206
+ font-size: var(--mba-font-size-xxs);
2207
+ font-weight: var(--mba-font-weight-semibold);
2208
+ color: var(--mba-color-primary-900);
2209
+ margin: 0 0 var(--mba-space-xxs) 0;
2210
+ }
2211
+ .mba-header__dropdown-infobox-description {
2212
+ font-family: var(--mba-font-family-text);
2213
+ font-size: var(--mba-font-size-xs);
2214
+ font-weight: var(--mba-font-weight-regular);
2215
+ color: var(--mba-color-primary-900);
2216
+ margin: 0;
2217
+ line-height: var(--mba-leading-normal);
2218
+ }
2219
+ .mba-header--partenaire .mba-header__dropdown-infobox-title,
2220
+ .mba-header--partenaire .mba-header__dropdown-infobox-description {
2221
+ color: var(--mba-color-primary-pro-800);
2222
+ }
2223
+ .mba-header__burger {
2224
+ display: none;
2225
+ color: var(--mba-color-primary-500);
2226
+ flex-direction: column;
2227
+ gap: var(--mba-space-xxs);
2228
+ background: none;
2229
+ border: none;
2230
+ padding: var(--mba-space-xs);
2231
+ cursor: pointer;
2232
+ border-radius: var(--mba-radius-2xs);
2233
+ transition: background-color var(--mba-transition-base);
2234
+ position: relative;
2235
+ width: 40px;
2236
+ height: 40px;
2237
+ align-items: center;
2238
+ justify-content: center;
2239
+ }
2240
+ .mba-header__burger:hover {
2241
+ background-color: var(--mba-color-grey-50);
2242
+ }
2243
+ .mba-header__burger-line {
2244
+ width: 24px;
2245
+ height: 2px;
2246
+ background-color: var(--mba-color-primary-500);
2247
+ border-radius: var(--mba-radius-2xs);
2248
+ transition: opacity var(--mba-transition-base);
2249
+ }
2250
+ .mba-header__burger--open .mba-header__burger-line {
2251
+ opacity: 0;
2252
+ }
2253
+ .mba-header__burger--open::before,
2254
+ .mba-header__burger--open::after {
2255
+ content: "";
2256
+ position: absolute;
2257
+ width: 24px;
2258
+ height: 2px;
2259
+ background-color: var(--mba-color-primary-500);
2260
+ top: 50%;
2261
+ left: 50%;
2262
+ }
2263
+ .mba-header__burger--open::before {
2264
+ transform: translate(-50%, -50%) rotate(45deg);
2265
+ }
2266
+ .mba-header__burger--open::after {
2267
+ transform: translate(-50%, -50%) rotate(-45deg);
2268
+ }
2269
+ .mba-header--partenaire .mba-header__burger-line {
2270
+ background-color: var(--mba-color-primary-pro-500);
2271
+ }
2272
+ .mba-header--partenaire .mba-header__burger--open::before,
2273
+ .mba-header--partenaire .mba-header__burger--open::after {
2274
+ background-color: var(--mba-color-primary-pro-500);
2275
+ }
2276
+ .mba-header__mobile-menu {
2277
+ position: absolute;
2278
+ top: calc(100% + var(--mba-space-xs));
2279
+ left: 0;
2280
+ right: 0;
2281
+ background-color: var(--mba-color-white);
2282
+ border-radius: var(--mba-radius-xs);
2283
+ padding: var(--mba-space-md);
2284
+ display: none;
2285
+ z-index: 999;
2286
+ animation: mobileMenuSlideIn var(--mba-transition-slow);
2287
+ }
2288
+ .mba-header__mobile-menu--open {
2289
+ display: block;
2290
+ }
2291
+ @keyframes mobileMenuSlideIn {
2292
+ from {
2293
+ opacity: 0;
2294
+ transform: translateY(calc(-1 * var(--mba-space-sm)));
2295
+ }
2296
+ to {
2297
+ opacity: 1;
2298
+ transform: translateY(0);
2299
+ }
2300
+ }
2301
+ .mba-header__mobile-nav {
2302
+ list-style: none;
2303
+ margin: 0;
2304
+ padding: 0;
2305
+ display: flex;
2306
+ flex-direction: column;
2307
+ gap: var(--mba-space-xxs);
2308
+ }
2309
+ .mba-header__mobile-nav-item {
2310
+ width: 100%;
2311
+ padding-bottom: var(--mba-space-sm);
2312
+ }
2313
+ .mba-header__mobile-nav-link {
2314
+ display: flex;
2315
+ align-items: center;
2316
+ justify-content: space-between;
2317
+ padding: var(--mba-space-xxs) var(--mba-space-xs);
2318
+ gap: var(--mba-space-sm);
2319
+ font-family: var(--mba-font-family-text);
2320
+ font-size: var(--mba-font-size-xs);
2321
+ font-weight: var(--mba-font-weight-semibold);
2322
+ color: var(--mba-color-primary-900);
2323
+ text-decoration: none;
2324
+ border-radius: var(--mba-radius-2xs);
2325
+ transition: background-color var(--mba-transition-base);
2326
+ cursor: pointer;
2327
+ background: none;
2328
+ border: none;
2329
+ width: 100%;
2330
+ text-align: left;
2331
+ position: relative;
2332
+ }
2333
+ .mba-header__mobile-nav-link::after {
2334
+ content: "";
2335
+ position: absolute;
2336
+ left: var(--mba-space-xs);
2337
+ right: var(--mba-space-xs);
2338
+ bottom: 0;
2339
+ height: 2px;
2340
+ border-radius: var(--mba-radius-2xs);
2341
+ background-color: var(--mba-color-primary-100);
2342
+ }
2343
+ .mba-header--partenaire .mba-header__mobile-nav-link::after {
2344
+ background-color: var(--mba-color-primary-pro-100);
2345
+ }
2346
+ .mba-header--partenaire .mba-header__mobile-nav-link {
2347
+ color: var(--mba-color-primary-pro-800);
2348
+ }
2349
+ .mba-header__mobile-nav-link .mba-icon {
2350
+ color: var(--mba-color-primary-500);
2351
+ }
2352
+ .mba-header--partenaire .mba-header__mobile-nav-link .mba-icon {
2353
+ color: var(--mba-color-primary-pro-500);
2354
+ }
2355
+ .mba-header__mobile-nav-link--active {
2356
+ color: var(--mba-color-primary-500);
2357
+ background-color: var(--mba-color-primary-50);
2358
+ }
2359
+ .mba-header__mobile-submenu {
2360
+ display: none;
2361
+ margin-top: var(--mba-space-xs);
2362
+ padding: 0;
2363
+ background-color: transparent;
2364
+ border-radius: 0;
2365
+ }
2366
+ .mba-header__mobile-submenu--open {
2367
+ display: block;
2368
+ }
2369
+ .mba-header__mobile-submenu .mba-header__dropdown-list {
2370
+ list-style: none;
2371
+ margin: 0;
2372
+ padding: 0;
2373
+ display: flex;
2374
+ flex-direction: column;
2375
+ gap: var(--mba-space-xs);
2376
+ margin-bottom: var(--mba-space-xs);
2377
+ }
2378
+ .mba-header__mobile-submenu .mba-header__dropdown-item {
2379
+ gap: var(--mba-space-xs);
2380
+ border-radius: 0;
2381
+ transition: color var(--mba-transition-base);
2382
+ background-color: transparent;
2383
+ }
2384
+ .mba-header__mobile-submenu .mba-header__dropdown-item::before {
2385
+ opacity: 0;
2386
+ }
2387
+ .mba-header__mobile-submenu .mba-header__dropdown-item:active::before {
2388
+ opacity: 1;
2389
+ }
2390
+ .mba-header__mobile-submenu .mba-header__dropdown-item:hover {
2391
+ background-color: transparent;
2392
+ }
2393
+ .mba-header__mobile-submenu .mba-header__dropdown-icon {
2394
+ flex-shrink: 0;
2395
+ width: 40px;
2396
+ height: 40px;
2397
+ display: flex;
2398
+ align-items: center;
2399
+ justify-content: center;
2400
+ background-color: var(--mba-color-pastel-lavender);
2401
+ border-radius: var(--mba-radius-xs);
2402
+ color: var(--mba-color-primary-500);
2403
+ }
2404
+ .mba-header__mobile-submenu .mba-header__dropdown-icon .mba-icon {
2405
+ font-size: var(--mba-font-size-md);
2406
+ }
2407
+ .mba-header--partenaire .mba-header__mobile-submenu .mba-header__dropdown-icon {
2408
+ background-color: var(--mba-color-pastel-bleuet);
2409
+ color: var(--mba-color-primary-pro-500);
2410
+ }
2411
+ .mba-header__mobile-submenu .mba-header__dropdown-content {
2412
+ flex: 1;
2413
+ gap: var(--mba-space-2xs);
2414
+ }
2415
+ .mba-header__mobile-submenu .mba-header__dropdown-label {
2416
+ font-family: var(--mba-font-family-text);
2417
+ font-size: var(--mba-font-size-xxs);
2418
+ font-weight: var(--mba-font-weight-semibold);
2419
+ color: var(--mba-color-primary-900);
2420
+ margin: 0 0 var(--mba-space-xxs) 0;
2421
+ display: block;
2422
+ }
2423
+ .mba-header__mobile-submenu .mba-header__dropdown-description {
2424
+ font-family: var(--mba-font-family-text);
2425
+ font-size: var(--mba-font-size-xxs);
2426
+ font-weight: var(--mba-font-weight-regular);
2427
+ color: var(--mba-color-primary-900);
2428
+ margin: 0;
2429
+ line-height: var(--mba-leading-normal);
2430
+ }
2431
+ .mba-header__mobile-submenu .mba-header__dropdown-infobox {
2432
+ margin-top: var(--mba-space-sm);
2433
+ flex: 1;
2434
+ background-color: var(--mba-color-pastel-narcisse);
2435
+ border-radius: var(--mba-radius-2xs);
2436
+ padding: var(--mba-space-sm);
2437
+ }
2438
+ .mba-header__mobile-submenu .mba-header__dropdown-infobox-title {
2439
+ font-family: var(--mba-font-family-text);
2440
+ font-size: var(--mba-font-size-sm);
2441
+ font-weight: var(--mba-font-weight-semibold);
2442
+ color: var(--mba-color-text);
2443
+ margin: 0 0 var(--mba-space-xxs) 0;
2444
+ }
2445
+ .mba-header__mobile-submenu .mba-header__dropdown-infobox-description {
2446
+ font-family: var(--mba-font-family-text);
2447
+ font-size: var(--mba-font-size-xs);
2448
+ font-weight: var(--mba-font-weight-regular);
2449
+ color: var(--mba-color-text);
2450
+ margin: 0;
2451
+ line-height: var(--mba-leading-normal);
2452
+ }
2453
+ @media (max-width: 768px) {
2454
+ .mba-header {
2455
+ box-shadow: none;
2456
+ }
2457
+ .mba-header__container {
2458
+ padding: var(--mba-space-sm) var(--mba-space-md);
2459
+ justify-content: space-between;
2460
+ }
2461
+ .mba-header__mobile-menu {
2462
+ padding: var(--mba-space-sm) var(--mba-space-xs);
2463
+ }
2464
+ .mba-header__nav {
2465
+ display: none;
2466
+ }
2467
+ .mba-header__burger {
2468
+ display: flex;
2469
+ }
2470
+ .mba-header__logo-img {
2471
+ height: 24px;
2472
+ }
2473
+ .mba-icon {
2474
+ margin-top: var(--mba-space-xxs);
2475
+ }
2476
+ }
2477
+ @media (min-width: 769px) {
2478
+ .mba-header__mobile-menu {
2479
+ display: none !important;
2480
+ }
2481
+ .mba-header--partenaire .mba-header__dropdown--open[data-dropdown="1"] {
2482
+ min-height: 271px;
2483
+ box-sizing: border-box;
2484
+ }
2485
+ .mba-header--partenaire
2486
+ .mba-header__dropdown--open[data-dropdown="1"]
2487
+ .mba-header__dropdown-infobox {
2488
+ height: calc(271px - 2 * var(--mba-space-sm));
2489
+ }
2490
+ }
2491
+ }
2492
+ @layer components {
2493
+ .mba-wave {
2494
+ display: block;
2495
+ width: 100%;
2496
+ height: var(--mba-wave-height);
2497
+ background-color: var(--mba-color-pastel-lavender);
2498
+ -webkit-mask-image: var(--mba-wave-dip-up-mask);
2499
+ -webkit-mask-size: 100% 100%;
2500
+ -webkit-mask-repeat: no-repeat;
2501
+ mask-image: var(--mba-wave-dip-up-mask);
2502
+ mask-size: 100% 100%;
2503
+ mask-repeat: no-repeat;
2504
+ }
2505
+ .mba-wave--top {
2506
+ -webkit-mask-image: var(--mba-wave-dip-down-mask);
2507
+ mask-image: var(--mba-wave-dip-down-mask);
2508
+ }
2509
+ .mba-wave--bottom {
2510
+ -webkit-mask-image: var(--mba-wave-dip-up-mask);
2511
+ mask-image: var(--mba-wave-dip-up-mask);
2512
+ }
2513
+ .mba-wave--sm {
2514
+ height: var(--mba-wave-sm-height);
2515
+ -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
2516
+ mask-image: var(--mba-wave-sm-dip-up-mask);
2517
+ }
2518
+ .mba-wave--sm.mba-wave--top {
2519
+ -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
2520
+ mask-image: var(--mba-wave-sm-dip-down-mask);
2521
+ }
2522
+ .mba-wave--lavender {
2523
+ background-color: var(--mba-color-pastel-lavender);
2524
+ }
2525
+ .mba-wave--white {
2526
+ background-color: var(--mba-color-white);
2527
+ }
2528
+ .mba-wave--beige {
2529
+ background-color: var(--mba-color-beige);
2530
+ }
2531
+ }
2532
+ @layer components {
2533
+ .mba-section {
2534
+ position: relative;
2535
+ width: 100%;
2536
+ }
2537
+ .mba-section__content {
2538
+ position: relative;
2539
+ z-index: 1;
2540
+ max-width: var(--mba-container-width);
2541
+ margin: 0 auto;
2542
+ padding: var(--mba-space-xxl) 0;
2543
+ }
2544
+ .mba-section--wave-inset.mba-section--wave-top .mba-section__content,
2545
+ .mba-section--wave-inset.mba-section--wave-both .mba-section__content {
2546
+ padding-top: calc(var(--mba-wave-height) + var(--mba-space-xxl));
2547
+ }
2548
+ .mba-section--wave-inset.mba-section--wave-bottom .mba-section__content,
2549
+ .mba-section--wave-inset.mba-section--wave-both .mba-section__content {
2550
+ padding-bottom: calc(var(--mba-wave-height) + var(--mba-space-xxl));
2551
+ }
2552
+ .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-top .mba-section__content,
2553
+ .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
2554
+ padding-top: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
2555
+ }
2556
+ .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-bottom .mba-section__content,
2557
+ .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
2558
+ padding-bottom: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
2559
+ }
2560
+ .mba-section--lavender {
2561
+ background-color: var(--mba-color-pastel-lavender);
2562
+ }
2563
+ .mba-section--beige {
2564
+ background-color: var(--mba-color-beige);
2565
+ }
2566
+ .mba-section--primary-50 {
2567
+ background-color: var(--mba-color-primary-50);
2568
+ }
2569
+ .mba-section--white {
2570
+ background-color: var(--mba-color-white);
2571
+ }
2572
+ .mba-section--wave-top::before,
2573
+ .mba-section--wave-both::before {
2574
+ content: "";
2575
+ position: absolute;
2576
+ left: 0;
2577
+ right: 0;
2578
+ top: 0;
2579
+ height: var(--mba-wave-height);
2580
+ background-color: var(--mba-color-white);
2581
+ -webkit-mask-image: var(--mba-wave-dip-down-mask);
2582
+ -webkit-mask-size: 100% 100%;
2583
+ -webkit-mask-repeat: no-repeat;
2584
+ mask-image: var(--mba-wave-dip-down-mask);
2585
+ mask-size: 100% 100%;
2586
+ mask-repeat: no-repeat;
2587
+ pointer-events: none;
2588
+ }
2589
+ .mba-section--wave-bottom::after,
2590
+ .mba-section--wave-both::after {
2591
+ content: "";
2592
+ position: absolute;
2593
+ left: 0;
2594
+ right: 0;
2595
+ bottom: 0;
2596
+ height: var(--mba-wave-height);
2597
+ background-color: var(--mba-color-white);
2598
+ -webkit-mask-image: var(--mba-wave-dip-up-mask);
2599
+ -webkit-mask-size: 100% 100%;
2600
+ -webkit-mask-repeat: no-repeat;
2601
+ mask-image: var(--mba-wave-dip-up-mask);
2602
+ mask-size: 100% 100%;
2603
+ mask-repeat: no-repeat;
2604
+ pointer-events: none;
2605
+ }
2606
+ .mba-section--wave-sm.mba-section--wave-top::before,
2607
+ .mba-section--wave-sm.mba-section--wave-both::before {
2608
+ height: var(--mba-wave-sm-height);
2609
+ -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
2610
+ mask-image: var(--mba-wave-sm-dip-down-mask);
2611
+ }
2612
+ .mba-section--wave-sm.mba-section--wave-bottom::after,
2613
+ .mba-section--wave-sm.mba-section--wave-both::after {
2614
+ height: var(--mba-wave-sm-height);
2615
+ -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
2616
+ mask-image: var(--mba-wave-sm-dip-up-mask);
2617
+ }
2618
+ .mba-section--wave-lavender::before,
2619
+ .mba-section--wave-lavender::after {
2620
+ background-color: var(--mba-color-pastel-lavender);
2102
2621
  }
2103
2622
  .mba-section--wave-beige::before,
2104
2623
  .mba-section--wave-beige::after {
@@ -2380,6 +2899,195 @@ video {
2380
2899
  border-top-color: var(--mba-color-primary-pro-400);
2381
2900
  }
2382
2901
  }
2902
+ @layer components {
2903
+ .mba-accordion-group {
2904
+ display: flex;
2905
+ flex-direction: column;
2906
+ gap: var(--mba-space-xs);
2907
+ }
2908
+ .mba-accordion {
2909
+ width: 100%;
2910
+ max-width: 220px;
2911
+ border-radius: var(--mba-radius-xs);
2912
+ background-color: var(--mba-color-white);
2913
+ border: 1px solid var(--mba-color-grey-100);
2914
+ overflow: hidden;
2915
+ }
2916
+ .mba-accordion--full-width {
2917
+ max-width: 100%;
2918
+ }
2919
+ .mba-accordion--line {
2920
+ border: none;
2921
+ border-radius: 0;
2922
+ background: transparent;
2923
+ }
2924
+ .mba-accordion__header {
2925
+ display: flex;
2926
+ align-items: center;
2927
+ justify-content: space-between;
2928
+ gap: var(--mba-space-sm);
2929
+ padding: var(--mba-space-xs) var(--mba-space-sm);
2930
+ cursor: pointer;
2931
+ background-color: var(--mba-color-white);
2932
+ border: none;
2933
+ width: 100%;
2934
+ box-sizing: border-box;
2935
+ min-height: 43px;
2936
+ font-family: var(--mba-font-family-text);
2937
+ font-size: var(--mba-font-size-xs);
2938
+ font-weight: var(--mba-font-weight-regular);
2939
+ color: var(--mba-color-primary-900);
2940
+ text-align: left;
2941
+ }
2942
+ .mba-accordion--line .mba-accordion__header {
2943
+ padding-left: var(--mba-space-xs);
2944
+ padding-right: var(--mba-space-xs);
2945
+ background-color: transparent;
2946
+ border-bottom: 1.8px solid var(--mba-color-primary-400);
2947
+ }
2948
+ .mba-accordion-group
2949
+ .mba-accordion--line
2950
+ + .mba-accordion--line
2951
+ .mba-accordion__header {
2952
+ border-bottom-style: dashed;
2953
+ }
2954
+ .mba-accordion--line:not(.mba-accordion--partenaire) .mba-accordion__header:hover {
2955
+ background-color: var(--mba-color-grey-50);
2956
+ border-radius: var(--mba-radius-xs) var(--mba-radius-xs) 0 0;
2957
+ }
2958
+ .mba-accordion--line.mba-accordion--partenaire .mba-accordion__header {
2959
+ border-bottom-color: var(--mba-color-primary-pro-400);
2960
+ background-color: transparent;
2961
+ }
2962
+ .mba-accordion--line.mba-accordion--partenaire .mba-accordion__header:hover {
2963
+ background-color: transparent;
2964
+ }
2965
+ .mba-accordion__title-wrapper {
2966
+ display: flex;
2967
+ align-items: center;
2968
+ gap: var(--mba-space-xs);
2969
+ min-width: 0;
2970
+ }
2971
+ .mba-accordion__title {
2972
+ white-space: nowrap;
2973
+ text-overflow: ellipsis;
2974
+ overflow: hidden;
2975
+ font-size: var(--mba-font-size-xs);
2976
+ color: var(--mba-color-primary-900);
2977
+ font-weight: var(--mba-font-weight-semibold);
2978
+ }
2979
+ .mba-accordion--partenaire .mba-accordion__title {
2980
+ color: var(--mba-color-primary-pro-900);
2981
+ }
2982
+ .mba-accordion__badge {
2983
+ display: inline-flex;
2984
+ align-items: center;
2985
+ justify-content: center;
2986
+ min-width: var(--mba-space-md);
2987
+ height: var(--mba-space-md);
2988
+ padding: var(--mba-space-xxs);
2989
+ border-radius: var(--mba-radius-full);
2990
+ background-color: var(--mba-color-pastel-oranger);
2991
+ color: var(--mba-color-primary-900);
2992
+ font-family: var(--mba-font-family-text);
2993
+ font-size: var(--mba-font-size-xxs);
2994
+ font-weight: var(--mba-font-weight-semibold);
2995
+ flex-shrink: 0;
2996
+ }
2997
+ .mba-accordion--line .mba-accordion__badge {
2998
+ background-color: var(--mba-color-secondary-500);
2999
+ }
3000
+ .mba-accordion--partenaire .mba-accordion__badge {
3001
+ background-color: var(--mba-color-pastel-narcisse);
3002
+ }
3003
+ .mba-accordion__icon {
3004
+ display: inline-flex;
3005
+ align-items: center;
3006
+ justify-content: center;
3007
+ margin-left: var(--mba-space-xs);
3008
+ color: var(--mba-color-primary-900);
3009
+ transition: transform var(--mba-transition-base);
3010
+ }
3011
+ .mba-accordion--open .mba-accordion__icon {
3012
+ transform: rotate(180deg);
3013
+ }
3014
+ .mba-accordion__panel {
3015
+ display: none;
3016
+ background-color: var(--mba-color-white);
3017
+ }
3018
+ .mba-accordion--open .mba-accordion__panel {
3019
+ display: block;
3020
+ }
3021
+ .mba-accordion__panel-inner {
3022
+ padding: var(--mba-space-xs) var(--mba-space-sm);
3023
+ }
3024
+ .mba-accordion--line .mba-accordion__panel-inner {
3025
+ padding-left: var(--mba-space-xs);
3026
+ padding-right: var(--mba-space-xs);
3027
+ }
3028
+ .mba-accordion__panel-inner--scrollable {
3029
+ max-height: 9.5rem;
3030
+ overflow-y: auto;
3031
+ scrollbar-width: thin;
3032
+ scrollbar-color: var(--mba-color-primary-400) transparent;
3033
+ }
3034
+ .mba-accordion__panel-inner--scrollable::-webkit-scrollbar {
3035
+ width: var(--mba-space-xxs);
3036
+ }
3037
+ .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-thumb {
3038
+ background-color: var(--mba-color-primary-400);
3039
+ border-radius: var(--mba-radius-2xs);
3040
+ }
3041
+ .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-track {
3042
+ background-color: transparent;
3043
+ }
3044
+ .mba-accordion--partenaire .mba-accordion__panel-inner--scrollable {
3045
+ scrollbar-color: var(--mba-color-primary-pro-400) transparent;
3046
+ }
3047
+ .mba-accordion--partenaire
3048
+ .mba-accordion__panel-inner--scrollable::-webkit-scrollbar-thumb {
3049
+ background-color: var(--mba-color-primary-pro-400);
3050
+ }
3051
+ .mba-accordion__list {
3052
+ list-style: none;
3053
+ margin: 0;
3054
+ padding: 0;
3055
+ display: flex;
3056
+ flex-direction: column;
3057
+ gap: var(--mba-space-xxs);
3058
+ }
3059
+ .mba-accordion__item {
3060
+ display: flex;
3061
+ align-items: center;
3062
+ gap: var(--mba-space-xs);
3063
+ padding: var(--mba-space-xs);
3064
+ font-family: var(--mba-font-family-text);
3065
+ font-size: var(--mba-font-size-xs);
3066
+ color: var(--mba-color-primary-900);
3067
+ }
3068
+ .mba-accordion__item-icon {
3069
+ display: inline-flex;
3070
+ align-items: center;
3071
+ justify-content: center;
3072
+ flex-shrink: 0;
3073
+ padding: 2px;
3074
+ line-height: 1;
3075
+ vertical-align: middle;
3076
+ color: inherit;
3077
+ }
3078
+ .mba-accordion__item-label {
3079
+ white-space: nowrap;
3080
+ overflow: hidden;
3081
+ text-overflow: ellipsis;
3082
+ }
3083
+ .mba-accordion__item:hover {
3084
+ background-color: var(--mba-color-grey-50);
3085
+ border-radius: var(--mba-radius-xs);
3086
+ }
3087
+ .mba-accordion__item--selected {
3088
+ font-weight: var(--mba-font-weight-semibold);
3089
+ }
3090
+ }
2383
3091
  .text-xxs {
2384
3092
  font-size: var(--mba-font-size-xxs);
2385
3093
  }
@@ -2432,6 +3140,28 @@ video {
2432
3140
  .bg-gradient-sunset {
2433
3141
  background: var(--mba-gradient-sunset);
2434
3142
  }
3143
+ .mba-border-gradient {
3144
+ position: relative;
3145
+ }
3146
+ .mba-border-gradient::before {
3147
+ content: "";
3148
+ position: absolute;
3149
+ inset: 0;
3150
+ padding: 1px;
3151
+ background: var(--mba-gradient-sunset);
3152
+ border-radius: inherit;
3153
+ mask: linear-gradient(#fff 0 0) content-box,
3154
+ linear-gradient(#fff 0 0);
3155
+ mask-composite: exclude;
3156
+ -webkit-mask-composite: xor;
3157
+ pointer-events: none;
3158
+ opacity: 0;
3159
+ transition: opacity var(--mba-transition-base);
3160
+ }
3161
+ .mba-border-gradient:hover::before,
3162
+ .mba-border-gradient--visible::before {
3163
+ opacity: 1;
3164
+ }
2435
3165
  @layer theme {
2436
3166
  :root, :host {
2437
3167
  --font-sans: var(--mba-font-family-text);
@@ -2505,6 +3235,8 @@ video {
2505
3235
  --spacing-md: var(--mba-space-md);
2506
3236
  --spacing-lg: var(--mba-space-lg);
2507
3237
  --spacing-xl: var(--mba-space-xl);
3238
+ --spacing-xxl: var(--mba-space-xxl);
3239
+ --spacing-2: 0.5rem;
2508
3240
  --spacing-4: 1rem;
2509
3241
  --spacing-6: 1.5rem;
2510
3242
  --spacing-8: 2rem;
@@ -2519,12 +3251,14 @@ video {
2519
3251
  --spacing-36: 9rem;
2520
3252
  --spacing-40: 10rem;
2521
3253
  --spacing-48: 12rem;
3254
+ --spacing-96: 24rem;
2522
3255
  --max-width-xs: 20rem;
2523
3256
  --max-width-sm: 24rem;
2524
3257
  --max-width-md: 28rem;
2525
3258
  --max-width-lg: 32rem;
2526
3259
  --max-width-xl: 36rem;
2527
3260
  --max-width-2xl: 42rem;
3261
+ --max-width-3xl: 48rem;
2528
3262
  --max-width-4xl: 56rem;
2529
3263
  --max-width-6xl: 72rem;
2530
3264
  --radius-none: var(--mba-radius-none);
@@ -2876,6 +3610,9 @@ video {
2876
3610
  .h-32 {
2877
3611
  height: var(--spacing-32);
2878
3612
  }
3613
+ .h-96 {
3614
+ height: var(--spacing-96);
3615
+ }
2879
3616
  .h-screen {
2880
3617
  height: 100vh;
2881
3618
  }
@@ -2915,6 +3652,9 @@ video {
2915
3652
  .max-w-2xl {
2916
3653
  max-width: var(--max-width-2xl);
2917
3654
  }
3655
+ .max-w-3xl {
3656
+ max-width: var(--max-width-3xl);
3657
+ }
2918
3658
  .max-w-4xl {
2919
3659
  max-width: var(--max-width-4xl);
2920
3660
  }
@@ -2977,6 +3717,9 @@ video {
2977
3717
  .cursor-pointer {
2978
3718
  cursor: pointer;
2979
3719
  }
3720
+ .resize {
3721
+ resize: both;
3722
+ }
2980
3723
  .grid-cols-1 {
2981
3724
  grid-template-columns: repeat(1, minmax(0, 1fr));
2982
3725
  }
@@ -3010,9 +3753,6 @@ video {
3010
3753
  .items-end {
3011
3754
  align-items: flex-end;
3012
3755
  }
3013
- .items-start {
3014
- align-items: flex-start;
3015
- }
3016
3756
  .justify-between {
3017
3757
  justify-content: space-between;
3018
3758
  }
@@ -3224,12 +3964,18 @@ video {
3224
3964
  .px-sm {
3225
3965
  padding-inline: var(--spacing-sm);
3226
3966
  }
3967
+ .px-xl {
3968
+ padding-inline: var(--spacing-xl);
3969
+ }
3227
3970
  .px-xs {
3228
3971
  padding-inline: var(--spacing-xs);
3229
3972
  }
3230
3973
  .px-xxs {
3231
3974
  padding-inline: var(--spacing-xxs);
3232
3975
  }
3976
+ .py-2 {
3977
+ padding-block: var(--spacing-2);
3978
+ }
3233
3979
  .py-sm {
3234
3980
  padding-block: var(--spacing-sm);
3235
3981
  }
@@ -3239,6 +3985,9 @@ video {
3239
3985
  .py-xs {
3240
3986
  padding-block: var(--spacing-xs);
3241
3987
  }
3988
+ .py-xxl {
3989
+ padding-block: var(--spacing-xxl);
3990
+ }
3242
3991
  .py-xxs {
3243
3992
  padding-block: var(--spacing-xxs);
3244
3993
  }
@@ -3260,6 +4009,9 @@ video {
3260
4009
  .font-mono {
3261
4010
  font-family: var(--font-mono);
3262
4011
  }
4012
+ .font-sans {
4013
+ font-family: var(--font-sans);
4014
+ }
3263
4015
  .text-2xl {
3264
4016
  font-size: var(--text-2xl);
3265
4017
  line-height: var(--tw-leading, var(--text-2xl--line-height));