:root {
  --separator-border: rgba(128, 128, 128, 0.35);
  --sash-hover-transition-duration: 0.1s;
}

.allotment-module_splitView__L-yRc {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF > .allotment-module_sash__QA-2t {
  pointer-events: auto;
}

.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa {
  height: 100%;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
  overflow: hidden;
  position: absolute;
  white-space: initial;
}

.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
  width: 100%;
}

.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8 > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
  height: 100%;
}

.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS
  > .allotment-module_splitViewContainer__rQnVa
  > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
  background-color: var(--separator-border);
  content: " ";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 5;
}

.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_vertical__WSwwa
  > .allotment-module_splitViewContainer__rQnVa
  > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
  height: 1px;
  width: 100%;
}

.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_horizontal__7doS8
  > .allotment-module_splitViewContainer__rQnVa
  > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
  height: 100%;
  width: 1px;
}

:root {
  --focus-border: #007fd4;
  --sash-size: 8px;
  --sash-hover-size: 4px;
}

.sash-module_sash__K-9lB {
  position: absolute;
  z-index: 35;
  touch-action: none;
  pointer-events: auto;
  text-align: initial;
}

.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx {
  pointer-events: none;
}

.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_vertical__pB-rs {
  cursor: col-resize;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_minimum__-UKxp {
  cursor: e-resize;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_maximum__TCWxD {
  cursor: w-resize;
}

.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_horizontal__kFbiw {
  cursor: row-resize;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_minimum__-UKxp {
  cursor: s-resize;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_maximum__TCWxD {
  cursor: n-resize;
}

.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx {
  cursor: default !important;
  pointer-events: none !important;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs {
  cursor: ew-resize;
  top: 0;
  width: var(--sash-size);
  height: 100%;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw {
  cursor: ns-resize;
  left: 0;
  width: 100%;
  height: var(--sash-size);
}

.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2- {
  content: " ";
  height: calc(var(--sash-size) * 2);
  width: calc(var(--sash-size) * 2);
  z-index: 100;
  display: block;
  cursor: all-scroll;
  position: absolute;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk,
.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
  cursor: nwse-resize;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R,
.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
  cursor: nesw-resize;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
  left: calc(var(--sash-size) * -0.5);
  top: calc(var(--sash-size) * -1);
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
  left: calc(var(--sash-size) * -0.5);
  bottom: calc(var(--sash-size) * -1);
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
  top: calc(var(--sash-size) * -0.5);
  left: calc(var(--sash-size) * -1);
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
  top: calc(var(--sash-size) * -0.5);
  right: calc(var(--sash-size) * -1);
}

.sash-module_sash__K-9lB:before {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: background-color var(--sash-hover-transition-duration) ease-out;
  background: transparent;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs:before {
  width: var(--sash-hover-size);
  left: calc(50% - (var(--sash-hover-size) / 2));
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw:before {
  height: var(--sash-hover-size);
  top: calc(50% - (var(--sash-hover-size) / 2));
}

.sash-module_sash__K-9lB.sash-module_hover__80W6I:before,
.sash-module_sash__K-9lB.sash-module_active__bJspD:before {
  background: var(--focus-border);
}

.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.wcs-overlay{height:100vh;width:100vw;pointer-events:none;top:0;position:absolute;z-index:9999999}.tippy-box[data-theme~=dark]{--wcs-tooltip-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-tooltip-text-color:var(--wcs-semantic-color-text-inverse);--wcs-tooltip-padding:var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-base);background-color:var(--wcs-tooltip-background-color);color:var(--wcs-tooltip-text-color)}.tippy-box[data-theme~=dark][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--wcs-tooltip-background-color)}.tippy-box[data-theme~=dark][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--wcs-tooltip-background-color)}.tippy-box[data-theme~=dark][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--wcs-tooltip-background-color)}.tippy-box[data-theme~=dark][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--wcs-tooltip-background-color)}.tippy-content{overflow-wrap:break-word;padding:var(--wcs-tooltip-padding)}.tippy-box[data-theme~=light]{--wcs-tooltip-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-tooltip-text-color:var(--wcs-semantic-color-text-primary);--wcs-tooltip-padding:var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-base);--wcs-tooltip-border-color:var(--wcs-semantic-color-border-secondary);background-color:var(--wcs-tooltip-background-color);color:var(--wcs-tooltip-text-color);border:solid var(--wcs-semantic-border-width-default) var(--wcs-tooltip-border-color);border-width:var(--wcs-semantic-border-width-default)}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--wcs-tooltip-border-color)}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--wcs-tooltip-border-color)}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--wcs-tooltip-border-color)}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--wcs-tooltip-border-color)}.tippy-box[data-placement^=bottom][data-theme~=light]>.tippy-arrow::before,.tippy-box[data-placement^=bottom][data-theme~=dark]>.tippy-arrow::before{top:-8px}.tippy-box[data-placement^=top][data-theme~=light]>.tippy-arrow::before,.tippy-box[data-placement^=top][data-theme~=dark]>.tippy-arrow::before{bottom:-8px}.tippy-box[data-placement^=left][data-theme~=light]>.tippy-arrow::before,.tippy-box[data-placement^=left][data-theme~=dark]>.tippy-arrow::before{right:-8px}.tippy-box[data-placement^=right][data-theme~=light]>.tippy-arrow::before,.tippy-box[data-placement^=right][data-theme~=dark]>.tippy-arrow::before{left:-8px}:root{--wcs-font-sans-serif:Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--wcs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--wcs-phone-breakpoint-max-width:575px;--wcs-tablet-portrait-breakpoint-min-width:576px;--wcs-tablet-landscape-breakpoint-min-width:900px;--wcs-tablet-landscape-breakpoint-max-width:1199px;--wcs-desktop-breakpoint-min-width:1200px;--wcs-big-desktop-breakpoint-min-width:1800px;--wcs-com-content-max-width:1024px}body{font-weight:300;font-family:var(--wcs-font-sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,textarea,select{font:inherit}::placeholder{color:var(--wcs-semantic-color-text-tertiary);opacity:1;font-weight:normal;font-style:italic}
/**
 * Do not edit directly, this file was auto-generated.
 */

.sncf-holding {
  --wcs-primitive-size-10: 1px;
  --wcs-primitive-size-20: 2px;
  --wcs-primitive-size-40: 4px;
  --wcs-primitive-size-60: 6px;
  --wcs-primitive-size-80: 8px;
  --wcs-primitive-size-100: 10px;
  --wcs-primitive-size-120: 12px;
  --wcs-primitive-size-140: 14px;
  --wcs-primitive-size-160: 16px;
  --wcs-primitive-size-180: 18px;
  --wcs-primitive-size-200: 20px;
  --wcs-primitive-size-240: 24px;
  --wcs-primitive-size-280: 28px;
  --wcs-primitive-size-300: 30px;
  --wcs-primitive-size-320: 32px;
  --wcs-primitive-size-360: 36px;
  --wcs-primitive-size-400: 40px;
  --wcs-primitive-size-420: 42px;
  --wcs-primitive-size-480: 48px;
  --wcs-primitive-size-560: 56px;
  --wcs-primitive-size-640: 64px;
  --wcs-primitive-size-720: 72px;
  --wcs-primitive-size-800: 80px;
  --wcs-primitive-size-1200: 120px;
  --wcs-primitive-size-none: 0px;
  --wcs-primitive-size-max: 99999px;
  --wcs-primitive-spacing-0: 0px;
  --wcs-primitive-spacing-2: 2px;
  --wcs-primitive-spacing-4: 4px;
  --wcs-primitive-spacing-6: 6px;
  --wcs-primitive-spacing-8: 8px;
  --wcs-primitive-spacing-12: 12px;
  --wcs-primitive-spacing-16: 16px;
  --wcs-primitive-spacing-20: 20px;
  --wcs-primitive-spacing-24: 24px;
  --wcs-primitive-spacing-32: 32px;
  --wcs-primitive-spacing-40: 40px;
  --wcs-primitive-spacing-48: 48px;
  --wcs-primitive-spacing-56: 56px;
  --wcs-primitive-spacing-64: 64px;
  --wcs-primitive-spacing-72: 72px;
  --wcs-primitive-spacing-80: 80px;
  --wcs-primitive-spacing-88: 88px;
  --wcs-primitive-spacing-96: 96px;
  --wcs-primitive-spacing-104: 104px;
  --wcs-primitive-spacing-112: 112px;
  --wcs-primitive-spacing-120: 120px;
  --wcs-primitive-spacing-128: 128px;
  --wcs-primitive-spacing-136: 136px;
  --wcs-primitive-spacing-144: 144px;
  --wcs-primitive-color-transparent: rgba(0, 0, 0, 0);
  --wcs-primitive-color-backdrop: rgba(0, 26, 73, 0.4);
  --wcs-primitive-color-bleu-primaire-100: #e8f3f7;
  --wcs-primitive-color-bleu-primaire-200: #d1e6ef;
  --wcs-primitive-color-bleu-primaire-300: #8fc1d7;
  --wcs-primitive-color-bleu-primaire-400: #0088b3;
  --wcs-primitive-color-rouge-100: #f9ebe9;
  --wcs-primitive-color-rouge-200: #f2d7d3;
  --wcs-primitive-color-rouge-300: #de9991;
  --wcs-primitive-color-rouge-400: #d52b1e;
  --wcs-primitive-color-ambre-100: #fdfaf0;
  --wcs-primitive-color-ambre-200: #fcf5e1;
  --wcs-primitive-color-ambre-300: #f7e7b6;
  --wcs-primitive-color-ambre-400: #eed484;
  --wcs-primitive-color-ambre-500: #daaa00;
  --wcs-primitive-color-ambre-600: #8c7122;
  --wcs-primitive-color-ambre-700: #4a412a;
  --wcs-primitive-color-ambre-800: #3b3422;
  --wcs-primitive-color-orange-100: #fff7f1;
  --wcs-primitive-color-orange-200: #fff0e2;
  --wcs-primitive-color-orange-300: #ffdbb9;
  --wcs-primitive-color-orange-400: #fdbe87;
  --wcs-primitive-color-orange-500: #dc582a;
  --wcs-primitive-color-orange-600: #a02f08;
  --wcs-primitive-color-orange-700: #4f2910;
  --wcs-primitive-color-orange-800: #3f210d;
  --wcs-primitive-color-corail-100: #fff8f7;
  --wcs-primitive-color-corail-200: #fff1ef;
  --wcs-primitive-color-corail-300: #fddcd5;
  --wcs-primitive-color-corail-400: #f8c1b8;
  --wcs-primitive-color-corail-500: #f2827f;
  --wcs-primitive-color-corail-600: #d53f34;
  --wcs-primitive-color-corail-700: #612132;
  --wcs-primitive-color-corail-800: #4e1a28;
  --wcs-primitive-color-rose-100: #fef7fb;
  --wcs-primitive-color-rose-200: #fdeff8;
  --wcs-primitive-color-rose-300: #f3deef;
  --wcs-primitive-color-rose-400: #efbae1;
  --wcs-primitive-color-rose-500: #f59bbb;
  --wcs-primitive-color-rose-600: #d71f60;
  --wcs-primitive-color-rose-700: #3f2a56;
  --wcs-primitive-color-rose-800: #322245;
  --wcs-primitive-color-parme-100: #f9f7fb;
  --wcs-primitive-color-parme-200: #f3eef7;
  --wcs-primitive-color-parme-300: #e0d3ee;
  --wcs-primitive-color-parme-400: #c7b2de;
  --wcs-primitive-color-parme-500: #6558b1;
  --wcs-primitive-color-parme-600: #2f3279;
  --wcs-primitive-color-parme-700: #00205b;
  --wcs-primitive-color-parme-800: #001a49;
  --wcs-primitive-color-bleu-100: #f5f9fc;
  --wcs-primitive-color-bleu-200: #eaf2f9;
  --wcs-primitive-color-bleu-300: #c4dcec;
  --wcs-primitive-color-bleu-400: #a4c8e1;
  --wcs-primitive-color-bleu-500: #0084d4;
  --wcs-primitive-color-bleu-600: #006aaa;
  --wcs-primitive-color-bleu-700: #003865;
  --wcs-primitive-color-bleu-800: #002d51;
  --wcs-primitive-color-bleu-900: #001d33;
  --wcs-primitive-color-vert-100: #f7fbfa;
  --wcs-primitive-color-vert-200: #e8f6f2;
  --wcs-primitive-color-vert-300: #c7e8e1;
  --wcs-primitive-color-vert-400: #a1d6ca;
  --wcs-primitive-color-vert-500: #00b388;
  --wcs-primitive-color-vert-600: #008566;
  --wcs-primitive-color-vert-700: #154734;
  --wcs-primitive-color-vert-800: #11392a;
  --wcs-primitive-color-alpha-light-005: rgba(255, 255, 255, 0.05);
  --wcs-primitive-color-alpha-light-010: rgba(255, 255, 255, 0.1);
  --wcs-primitive-color-alpha-light-020: rgba(255, 255, 255, 0.2);
  --wcs-primitive-color-alpha-light-030: rgba(255, 255, 255, 0.3);
  --wcs-primitive-color-alpha-light-040: rgba(255, 255, 255, 0.4);
  --wcs-primitive-color-alpha-light-050: rgba(255, 255, 255, 0.5);
  --wcs-primitive-color-alpha-light-060: rgba(255, 255, 255, 0.6);
  --wcs-primitive-color-alpha-light-070: rgba(255, 255, 255, 0.7);
  --wcs-primitive-color-alpha-light-080: rgba(255, 255, 255, 0.8);
  --wcs-primitive-color-alpha-light-090: rgba(255, 255, 255, 0.9);
  --wcs-primitive-color-alpha-dark-005: rgba(0, 0, 0, 0.05);
  --wcs-primitive-color-alpha-dark-010: rgba(0, 0, 0, 0.1);
  --wcs-primitive-color-alpha-dark-020: rgba(0, 0, 0, 0.2);
  --wcs-primitive-color-alpha-dark-030: rgba(0, 0, 0, 0.3);
  --wcs-primitive-color-alpha-dark-040: rgba(0, 0, 0, 0.4);
  --wcs-primitive-color-alpha-dark-050: rgba(0, 0, 0, 0.5);
  --wcs-primitive-color-alpha-dark-060: rgba(0, 0, 0, 0.6);
  --wcs-primitive-color-alpha-dark-070: rgba(0, 0, 0, 0.7);
  --wcs-primitive-color-alpha-dark-080: rgba(0, 0, 0, 0.8);
  --wcs-primitive-color-alpha-dark-090: rgba(0, 0, 0, 0.9);
  --wcs-primitive-color-neutral-0: #ffffff;
  --wcs-primitive-color-neutral-100: #f4f5f6;
  --wcs-primitive-color-neutral-200: #f2f2f2;
  --wcs-primitive-color-neutral-300: #d7d7d7;
  --wcs-primitive-color-neutral-400: #b9b9b9;
  --wcs-primitive-color-neutral-500: #a0a0a0;
  --wcs-primitive-color-neutral-600: #747678;
  --wcs-primitive-color-neutral-700: #4d4f53;
  --wcs-primitive-color-neutral-800: #333333;
  --wcs-primitive-color-neutral-900: #121212;
  --wcs-primitive-color-neutral-1000: #000000;
  --wcs-primitive-color-critical-100: #fcf3f3; /* Rouge Feu 100 */
  --wcs-primitive-color-critical-200: #f9e7e7; /* Rouge Feu 200 */
  --wcs-primitive-color-critical-300: #f4cfcf; /* Rouge Feu 300 */
  --wcs-primitive-color-critical-400: #e38686; /* Rouge Feu 400 */
  --wcs-primitive-color-critical-500: #c80e0e; /* Rouge Feu 500 */
  --wcs-primitive-color-critical-600: #960b0b; /* Rouge Feu 600 */
  --wcs-primitive-color-critical-700: #640707; /* Rouge Feu 700 */
  --wcs-primitive-color-critical-800: #320404; /* Rouge Feu 800 */
  --wcs-primitive-font-size-250: 10px;
  --wcs-primitive-font-size-275: 11px;
  --wcs-primitive-font-size-300: 12px;
  --wcs-primitive-font-size-325: 13px;
  --wcs-primitive-font-size-350: 14px;
  --wcs-primitive-font-size-400: 16px;
  --wcs-primitive-font-size-450: 18px;
  --wcs-primitive-font-size-500: 20px;
  --wcs-primitive-font-size-550: 22px;
  --wcs-primitive-font-size-600: 24px;
  --wcs-primitive-font-size-700: 28px;
  --wcs-primitive-font-size-750: 30px;
  --wcs-primitive-font-size-800: 32px;
  --wcs-primitive-font-size-900: 36px;
  --wcs-primitive-font-size-1000: 40px;
  --wcs-primitive-font-size-1050: 42px;
  --wcs-primitive-font-size-1100: 44px;
  --wcs-primitive-font-size-1200: 48px;
  --wcs-primitive-font-size-1300: 52px;
  --wcs-primitive-font-size-1400: 56px;
  --wcs-primitive-font-size-1500: 60px;
  --wcs-primitive-font-size-1600: 64px;
  --wcs-primitive-font-size-1700: 68px;
  --wcs-primitive-font-size-1800: 72px;
  --wcs-primitive-font-weight-100: 100;
  --wcs-primitive-font-weight-300: 300;
  --wcs-primitive-font-weight-400: 400;
  --wcs-primitive-font-weight-500: 500;
  --wcs-primitive-font-weight-800: 800;
  --wcs-primitive-font-weight-900: 900;
  --wcs-primitive-font-line-height-100: 1;
  --wcs-primitive-font-line-height-110: 1.1;
  --wcs-primitive-font-line-height-120: 1.2;
  --wcs-primitive-font-line-height-140: 1.4;
  --wcs-primitive-duration-0: 0ms;
  --wcs-primitive-duration-50: 50ms;
  --wcs-primitive-duration-100: 100ms;
  --wcs-primitive-duration-150: 150ms;
  --wcs-primitive-duration-200: 200ms;
  --wcs-primitive-duration-300: 300ms;
  --wcs-primitive-duration-350: 350ms;
  --wcs-primitive-duration-400: 400ms;
  --wcs-primitive-duration-1000: 1000ms;
  --wcs-primitive-duration-1500: 1500ms;
  --wcs-primitive-duration-2000: 2000ms;
  --wcs-primitive-breakpoints-mobile: 320px;
  --wcs-primitive-breakpoints-tablet: 769px;
  --wcs-primitive-breakpoints-desktop: 1024px;
  --wcs-primitive-breakpoints-high-definition: 1280px;
  --wcs-primitive-breakpoints-widescreen: 1440px;
  --wcs-primitive-breakpoints-fullhd: 1920px;
  --wcs-semantic-border-radius-none: 0; /* No border-radius */
  --wcs-semantic-border-width-none: 0; /* No border */
  --wcs-semantic-border-style-focus-base: dashed; /* Focus style for base elements like button, dropdown, counter, switch... */
  --wcs-semantic-border-style-focus-control: solid; /* Focus style for control elements like input, select, textarea... */
  --wcs-semantic-color-text-inverse: #ffffff; /* Inverse color for contrast (mostly white) */
  --wcs-semantic-font-size-base: 16px; /* Base font size, equivalent to 1rem */
  --wcs-semantic-font-size-s: 15px; /* Smaller font size */
  --wcs-semantic-font-size-m: 16px; /* Medium font size, equivalent to base font-size */
  --wcs-semantic-font-size-l: 17px; /* Larger font size */
  --wcs-semantic-font-style-control-placeholder: normal; /* Placeholder font-size (previously in italic) */
  --wcs-primitive-size-base: var(--wcs-primitive-size-80);
  --wcs-primitive-color-primary: var(--wcs-primitive-color-parme-500);
  --wcs-semantic-size-base: var(--wcs-primitive-size-80); /* Base size for calculation */
  --wcs-semantic-size-xl: var(--wcs-primitive-size-560); /* Size XL for multi-size components */
  --wcs-semantic-size-l: var(--wcs-primitive-size-480); /* Size L for multi-size components */
  --wcs-semantic-size-m: var(--wcs-primitive-size-400); /* Size M for multi-size components (default) */
  --wcs-semantic-size-s: var(--wcs-primitive-size-320); /* Size S for multi-size components */
  --wcs-semantic-size-xs: var(--wcs-primitive-size-240); /* Size XS for multi-size components */
  --wcs-semantic-border-radius-base: var(--wcs-primitive-size-40); /* Base border-radius */
  --wcs-semantic-border-radius-full: var(--wcs-primitive-size-max); /* Circular, full rounded border-radius */
  --wcs-semantic-border-width-default: var(--wcs-primitive-size-10); /* Default border-width */
  --wcs-semantic-border-width-large: var(--wcs-primitive-size-20); /* Larger border-width, used for focus border especially */
  --wcs-semantic-border-width-larger: var(--wcs-primitive-size-40); /* Largest border-width */
  --wcs-semantic-color-border-primary: var(--wcs-primitive-color-neutral-600); /* Primary border color */
  --wcs-semantic-color-border-secondary: var(--wcs-primitive-color-neutral-300); /* Secondary border color */
  --wcs-semantic-color-border-disabled: var(--wcs-primitive-color-neutral-400); /* Disabled border color */
  --wcs-semantic-color-border-critical: var(--wcs-primitive-color-critical-500); /* Critical border color */
  --wcs-semantic-color-border-warning: var(--wcs-primitive-color-ambre-500); /* Warning border color */
  --wcs-semantic-color-border-information: var(--wcs-primitive-color-bleu-800); /* Information border color */
  --wcs-semantic-color-border-success: var(--wcs-primitive-color-vert-500); /* Success border color */
  --wcs-semantic-color-border-action-secondary-hover: var(--wcs-primitive-color-parme-600); /* Hover border color for secondary elements like button, dropdown... */
  --wcs-semantic-color-border-action-secondary-press: var(--wcs-primitive-color-parme-700); /* Pressed border color for secondary elements like button, dropdown... */
  --wcs-semantic-color-border-action-secondary-disabled: var(--wcs-primitive-color-neutral-300); /* Disabled border color for secondary elements like button, dropdown... */
  --wcs-semantic-color-border-focus-base: var(--wcs-primitive-color-parme-700); /* Border color on focus for base elements like button, dropdown, counter, switch... */
  --wcs-semantic-color-border-focus-base-on-secondary: var(--wcs-primitive-color-neutral-0); /* Border color on focus for base elements when placed on secondary or dark background */
  --wcs-semantic-color-border-focus-alt-on-secondary: var(--wcs-primitive-color-neutral-0); /* Alternative border color on focus for control elements when placed on secondary or dark background */
  --wcs-semantic-color-border-control-indicator-default: var(--wcs-primitive-color-neutral-600); /* Default border color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-border-control-indicator-hover: var(--wcs-primitive-color-parme-600); /* Hovered border color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-background-action-primary-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled primary background for element like a button, dropdown, switch... */
  --wcs-semantic-color-background-action-primary-hover: var(--wcs-primitive-color-parme-600); /* Can be used by primary elements which must have a hover state (button, dropdown...) */
  --wcs-semantic-color-background-action-primary-press: var(--wcs-primitive-color-parme-700); /* Can be used by primary elements which must have a press (CSS active) state (nav-item) */
  --wcs-semantic-color-background-action-primary-selected-default: var(--wcs-primitive-color-parme-700); /* Can be used by primary elements which must have a selected state (nav-item) */
  --wcs-semantic-color-background-action-primary-selected-hover: var(--wcs-primitive-color-parme-700); /* Can be used by primary elements which must have a hover state while selected (nav-item) */
  --wcs-semantic-color-background-action-primary-selected-press: var(--wcs-primitive-color-parme-700); /* Can be used by primary elements which must have a hover state while pressed (nav-item) */
  --wcs-semantic-color-background-action-secondary-default: var(--wcs-primitive-color-transparent); /* Default secondary background for elements like button, dropdown... */
  --wcs-semantic-color-background-action-secondary-disabled: var(--wcs-primitive-color-transparent); /* Disabled secondary background for element like a button, dropdown, switch... */
  --wcs-semantic-color-background-action-secondary-selected-disabled: var(--wcs-primitive-color-neutral-0); /* Background of a disabled active secondary action (select option) */
  --wcs-semantic-color-background-action-secondary-focus: var(--wcs-primitive-color-transparent); /* Background of a focused secondary action (button, select option) */
  --wcs-semantic-color-background-action-tertiary-default: var(--wcs-primitive-color-transparent); /* Default tertiary background for elements like button, dropdown... */
  --wcs-semantic-color-background-action-tertiary-disabled: var(--wcs-primitive-color-transparent); /* Disabled tertiary background for element like a button, dropdown, switch... */
  --wcs-semantic-color-background-action-neutral-default: var(--wcs-primitive-color-transparent); /* Default neutral background for elements like dropdown menu item */
  --wcs-semantic-color-background-action-neutral-hover: var(--wcs-primitive-color-neutral-100); /* Hovered neutral background for element like dropdown menu item */
  --wcs-semantic-color-background-action-neutral-press: var(--wcs-primitive-color-neutral-300); /* Pressed neutral background for element like dropdown menu item */
  --wcs-semantic-color-background-action-neutral-disabled: var(--wcs-primitive-color-transparent); /* Disabled neutral background for element like dropdown menu item */
  --wcs-semantic-color-background-action-critical-default: var(--wcs-primitive-color-critical-500); /* Default critical background color */
  --wcs-semantic-color-background-action-critical-hover: var(--wcs-primitive-color-critical-600); /* Hovered critical background color */
  --wcs-semantic-color-background-action-critical-press: var(--wcs-primitive-color-critical-700); /* Pressed critical background color */
  --wcs-semantic-color-background-action-critical-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled success background color */
  --wcs-semantic-color-background-action-information-default: var(--wcs-primitive-color-bleu-600); /* Default information background color */
  --wcs-semantic-color-background-action-information-hover: var(--wcs-primitive-color-bleu-700); /* Hovered information background color */
  --wcs-semantic-color-background-action-information-press: var(--wcs-primitive-color-bleu-800); /* Pressed information background color */
  --wcs-semantic-color-background-action-information-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled success background color */
  --wcs-semantic-color-background-action-success-default: var(--wcs-primitive-color-vert-500); /* Default success background color */
  --wcs-semantic-color-background-action-success-hover: var(--wcs-primitive-color-vert-600); /* Hovered success background color */
  --wcs-semantic-color-background-action-success-press: var(--wcs-primitive-color-vert-800); /* Pressed success background color */
  --wcs-semantic-color-background-action-success-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled success background color */
  --wcs-semantic-color-background-action-warning-default: var(--wcs-primitive-color-ambre-500); /* Default warning background color */
  --wcs-semantic-color-background-action-warning-hover: var(--wcs-primitive-color-ambre-600); /* Hovered warning background color */
  --wcs-semantic-color-background-action-warning-press: var(--wcs-primitive-color-ambre-700); /* Pressed warning background color */
  --wcs-semantic-color-background-action-warning-disabled: var(--wcs-primitive-color-neutral-200); /* Disabled warning background color */
  --wcs-semantic-color-background-control-default: var(--wcs-primitive-color-transparent); /* Default background of control like input, select, textarea... */
  --wcs-semantic-color-background-control-disabled: var(--wcs-primitive-color-transparent); /* Disabled background of control like input, select, textarea... */
  --wcs-semantic-color-background-control-indicator-hover: var(--wcs-primitive-color-parme-600); /* Hovered background color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-background-control-indicator-disabled: var(--wcs-primitive-color-neutral-300); /* Disabled background color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-background-surface-body: var(--wcs-primitive-color-neutral-0); /* Body background color */
  --wcs-semantic-color-background-surface-primary: var(--wcs-primitive-color-neutral-0); /* Background of a surface like a card, modal, overlay of a select... */
  --wcs-semantic-color-background-surface-secondary: var(--wcs-primitive-color-neutral-100); /* Background of a secondary surface like a switch, counter... */
  --wcs-semantic-color-background-surface-tertiary: var(--wcs-primitive-color-neutral-300); /* Tertiary background (used for background of prefix and suffix of control, also in other components) */
  --wcs-semantic-color-background-surface-inverse: var(--wcs-primitive-color-neutral-800); /* Inverse background for contrast (mostly black) */
  --wcs-semantic-color-background-surface-critical-default: var(--wcs-primitive-color-critical-500); /* Default critical background color */
  --wcs-semantic-color-background-surface-critical-light: var(--wcs-primitive-color-critical-300); /* Light critical background color */
  --wcs-semantic-color-background-surface-critical-lighter: var(--wcs-primitive-color-critical-200); /* Lighter critical background color */
  --wcs-semantic-color-background-surface-critical-lightest: var(--wcs-primitive-color-critical-100); /* Lightest critical background color */
  --wcs-semantic-color-background-surface-information-default: var(--wcs-primitive-color-bleu-700); /* Default information background color */
  --wcs-semantic-color-background-surface-information-light: var(--wcs-primitive-color-bleu-300); /* Light information background color */
  --wcs-semantic-color-background-surface-information-lighter: var(--wcs-primitive-color-bleu-200); /* Lighter information background color */
  --wcs-semantic-color-background-surface-information-lightest: var(--wcs-primitive-color-bleu-100); /* Lightest information background color */
  --wcs-semantic-color-background-surface-success-default: var(--wcs-primitive-color-vert-600); /* Default success background color */
  --wcs-semantic-color-background-surface-success-light: var(--wcs-primitive-color-vert-300); /* Light success background color */
  --wcs-semantic-color-background-surface-success-lighter: var(--wcs-primitive-color-vert-200); /* Lighter success background color */
  --wcs-semantic-color-background-surface-success-lightest: var(--wcs-primitive-color-vert-100); /* Lightest success background color */
  --wcs-semantic-color-background-surface-warning-default: var(--wcs-primitive-color-ambre-500); /* Default warning background color */
  --wcs-semantic-color-background-surface-warning-light: var(--wcs-primitive-color-ambre-300); /* Light warning background color */
  --wcs-semantic-color-background-surface-warning-lighter: var(--wcs-primitive-color-ambre-200); /* Lighter warning background color */
  --wcs-semantic-color-background-surface-warning-lightest: var(--wcs-primitive-color-ambre-100); /* Lightest warning background color */
  --wcs-semantic-color-background-surface-accent-light: var(--wcs-primitive-color-parme-300); /* Light accent background color, used by nav-item indicator and grid rows */
  --wcs-semantic-color-background-surface-accent-lighter: var(--wcs-primitive-color-parme-200); /* Lighter accent background color, used by grid rows and segmented-button background (radio options) */
  --wcs-semantic-color-background-surface-accent-lightest: var(--wcs-primitive-color-parme-100); /* Lightest accent background color, used by segmented-button background (radio options) */
  --wcs-semantic-color-background-surface-accent-dark: var(--wcs-primitive-color-parme-600); /* Dark accent background color */
  --wcs-semantic-color-background-surface-accent-darker: var(--wcs-primitive-color-parme-700); /* Darker accent background color */
  --wcs-semantic-color-background-surface-accent-darkest: var(--wcs-primitive-color-parme-800); /* Darkest accent background color */
  --wcs-semantic-color-background-backdrop: var(--wcs-primitive-color-backdrop); /* The layer behind a surface (modal) */
  --wcs-semantic-color-foreground-primary: var(--wcs-primitive-color-neutral-0); /* Primary foreground color */
  --wcs-semantic-color-foreground-disabled: var(--wcs-primitive-color-neutral-400); /* Disabled foreground color */
  --wcs-semantic-color-foreground-critical: var(--wcs-primitive-color-critical-500); /* Critical foreground color */
  --wcs-semantic-color-foreground-warning: var(--wcs-primitive-color-ambre-700); /* Warning foreground color */
  --wcs-semantic-color-foreground-information: var(--wcs-primitive-color-bleu-800); /* Information foreground color */
  --wcs-semantic-color-foreground-success: var(--wcs-primitive-color-vert-500); /* Success foreground color */
  --wcs-semantic-color-foreground-on-accent: var(--wcs-primitive-color-parme-700); /* Foreground color on top of an accent background */
  --wcs-semantic-color-foreground-inverse: var(--wcs-primitive-color-neutral-800); /* Inverse foreground for contrast (mostly black) */
  --wcs-semantic-color-foreground-action-secondary-hover: var(--wcs-primitive-color-parme-600); /* The layer on top of a secondary background when hovered */
  --wcs-semantic-color-foreground-action-secondary-press: var(--wcs-primitive-color-parme-700); /* The layer on top of a secondary background when pressed */
  --wcs-semantic-color-foreground-action-tertiary-hover: var(--wcs-primitive-color-parme-600); /* The layer on top of a tertiary background when hovered */
  --wcs-semantic-color-foreground-action-tertiary-press: var(--wcs-primitive-color-parme-700); /* The layer on top of a tertiary background when pressed */
  --wcs-semantic-color-foreground-action-critical-default: var(--wcs-primitive-color-neutral-0); /* Default critical foreground color */
  --wcs-semantic-color-foreground-action-critical-hover: var(--wcs-primitive-color-neutral-0); /* Hovered critical foreground color */
  --wcs-semantic-color-foreground-action-critical-press: var(--wcs-primitive-color-neutral-0); /* Pressed critical foreground color */
  --wcs-semantic-color-foreground-action-information-default: var(--wcs-primitive-color-neutral-0); /* Default information foreground color */
  --wcs-semantic-color-foreground-action-information-hover: var(--wcs-primitive-color-neutral-0); /* Hovered information foreground color */
  --wcs-semantic-color-foreground-action-information-press: var(--wcs-primitive-color-neutral-0); /* Pressed information foreground color */
  --wcs-semantic-color-foreground-action-success-default: var(--wcs-primitive-color-neutral-0); /* Default success foreground color */
  --wcs-semantic-color-foreground-action-success-hover: var(--wcs-primitive-color-neutral-0); /* Hovered success foreground color */
  --wcs-semantic-color-foreground-action-success-press: var(--wcs-primitive-color-neutral-0); /* Pressed success foreground color */
  --wcs-semantic-color-foreground-action-warning-default: var(--wcs-primitive-color-neutral-0); /* Default warning foreground color */
  --wcs-semantic-color-foreground-action-warning-hover: var(--wcs-primitive-color-neutral-0); /* Hovered warning foreground color */
  --wcs-semantic-color-foreground-action-warning-press: var(--wcs-primitive-color-neutral-0); /* Pressed warning foreground color */
  --wcs-semantic-color-foreground-control-indicator-selected: var(--wcs-primitive-color-neutral-0); /* Selected foreground color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-foreground-control-indicator-hover: var(--wcs-primitive-color-neutral-0); /* Hovered foreground color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-foreground-control-indicator-disabled: var(--wcs-primitive-color-neutral-0); /* Disabled foreground color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-text-primary: var(--wcs-primitive-color-neutral-800); /* Primary color for text like heading, label */
  --wcs-semantic-color-text-secondary: var(--wcs-primitive-color-neutral-700); /* Secondary color for text like paragraph */
  --wcs-semantic-color-text-tertiary: var(--wcs-primitive-color-neutral-600); /* Tertiary color for text like placeholder */
  --wcs-semantic-color-text-disabled: var(--wcs-primitive-color-neutral-400); /* Disabled color for text */
  --wcs-semantic-color-text-critical: var(--wcs-primitive-color-critical-500); /* Main color to indicate an error state */
  --wcs-semantic-color-text-link-hover: var(--wcs-primitive-color-parme-600); /* Hovered text color for link */
  --wcs-semantic-color-text-link-disabled: var(--wcs-primitive-color-neutral-400); /* Disabled text color for link */
  --wcs-semantic-color-text-link-inverse: var(--wcs-primitive-color-neutral-0); /* Inverse text color for link */
  --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0); /* Ripple applied to an primary action background (on a button, dropdown...) */
  --wcs-semantic-font-size-heading-1: var(--wcs-primitive-font-size-1050); /* Level 1 title heading */
  --wcs-semantic-font-size-heading-2: var(--wcs-primitive-font-size-900); /* Level 2 title heading */
  --wcs-semantic-font-size-heading-3: var(--wcs-primitive-font-size-750); /* Level 3 title heading */
  --wcs-semantic-font-size-heading-4: var(--wcs-primitive-font-size-600); /* Level 4 title heading */
  --wcs-semantic-font-size-heading-5: var(--wcs-primitive-font-size-500); /* Level 5 title heading */
  --wcs-semantic-font-size-heading-6: var(--wcs-primitive-font-size-450); /* Level 6 title heading */
  --wcs-semantic-font-size-body-1: var(--wcs-primitive-font-size-500); /* Body text for introduction or catchphrases */
  --wcs-semantic-font-size-body-2: var(--wcs-primitive-font-size-450); /* Body text only for news, blog for a more comfortable reading */
  --wcs-semantic-font-size-body-3: var(--wcs-primitive-font-size-400); /* Default body text for common paragraphs */
  --wcs-semantic-font-size-label-1: var(--wcs-primitive-font-size-400); /* Text used for buttons, links or other standard-sized actions */
  --wcs-semantic-font-size-label-2: var(--wcs-primitive-font-size-350); /* Text used for buttons, links or other smaller-sized actions */
  --wcs-semantic-font-size-label-3: var(--wcs-primitive-font-size-300); /* Text used for buttons, links or other even-smaller-sized actions */
  --wcs-semantic-font-size-caption-1: var(--wcs-primitive-font-size-400); /* Use for minor mentions, captions or other information */
  --wcs-semantic-font-size-caption-2: var(--wcs-primitive-font-size-350); /* Use for even-minor mentions, captions or other information */
  --wcs-semantic-font-size-caption-3: var(--wcs-primitive-font-size-300); /* Use for even-more-minor mentions, captions or other information */
  --wcs-semantic-font-line-height-base: var(--wcs-primitive-font-line-height-100); /* Base line-height */
  --wcs-semantic-font-line-height-medium: var(--wcs-primitive-font-line-height-120); /* Higher line-height */
  --wcs-semantic-font-line-height-large: var(--wcs-primitive-font-line-height-140); /* Highest line-height */
  --wcs-semantic-font-weight-black: var(--wcs-primitive-font-weight-900); /* Avenir Black font weight */
  --wcs-semantic-font-weight-heavy: var(--wcs-primitive-font-weight-800); /* Avenir Heavy font weight */
  --wcs-semantic-font-weight-medium: var(--wcs-primitive-font-weight-500); /* Avenir Medium font weight */
  --wcs-semantic-font-weight-roman: var(--wcs-primitive-font-weight-400); /* Avenir Roman font weight */
  --wcs-semantic-font-weight-book: var(--wcs-primitive-font-weight-300); /* Avenir Book font weight */
  --wcs-semantic-font-weight-light: var(--wcs-primitive-font-weight-100); /* Avenir Light font weight */
  --wcs-semantic-spacing-small: var(--wcs-primitive-size-40); /* Small spacing */
  --wcs-semantic-spacing-large: var(--wcs-primitive-size-160); /* Large spacing */
  --wcs-semantic-spacing-base-025: var(--wcs-primitive-spacing-2); /* Base spacing x0.25 */
  --wcs-semantic-spacing-base-05: var(--wcs-primitive-spacing-4); /* Base spacing x0.5 */
  --wcs-semantic-spacing-base-150: var(--wcs-primitive-spacing-12); /* Base spacing x1.5 */
  --wcs-semantic-spacing-base-200: var(--wcs-primitive-spacing-16); /* Base spacing x2 */
  --wcs-semantic-spacing-base-250: var(--wcs-primitive-spacing-20); /* Base spacing x2.5 */
  --wcs-semantic-spacing-base-300: var(--wcs-primitive-spacing-24); /* Base spacing x3 */
  --wcs-semantic-spacing-base-400: var(--wcs-primitive-spacing-32); /* Base spacing x4 */
  --wcs-semantic-spacing-base-500: var(--wcs-primitive-spacing-40); /* Base spacing x5 */
  --wcs-semantic-spacing-base-600: var(--wcs-primitive-spacing-48); /* Base spacing x6 */
  --wcs-semantic-spacing-base-700: var(--wcs-primitive-spacing-56); /* Base spacing x7 */
  --wcs-semantic-spacing-base-800: var(--wcs-primitive-spacing-64); /* Base spacing x8 */
  --wcs-semantic-spacing-base-900: var(--wcs-primitive-spacing-72); /* Base spacing x9 */
  --wcs-semantic-spacing-base-1000: var(--wcs-primitive-spacing-80); /* Base spacing x10 */
  --wcs-semantic-spacing-base-1100: var(--wcs-primitive-spacing-88); /* Base spacing x11 */
  --wcs-semantic-spacing-base-1200: var(--wcs-primitive-spacing-96); /* Base spacing x12 */
  --wcs-semantic-motion-duration-feedback-fast: var(--wcs-primitive-duration-50); /* Motion duration for faster feedbacks */
  --wcs-semantic-motion-duration-feedback-base: var(--wcs-primitive-duration-150); /* Motion duration for feedbacks like transitions for moving arrows, transitioning backgrounds */
  --wcs-semantic-motion-duration-feedback-slow: var(--wcs-primitive-duration-200); /* Motion duration for slow feedbacks */
  --wcs-semantic-motion-duration-feedback-slower: var(--wcs-primitive-duration-350); /* Motion duration for slower feedbacks */
  --wcs-semantic-motion-duration-animation-fast: var(--wcs-primitive-duration-1000); /* Motion duration for fast animations like spinner growing mode */
  --wcs-semantic-motion-duration-animation-base: var(--wcs-primitive-duration-1500); /* Motion duration for long animations like spinner, skeleton */
  --wcs-semantic-motion-duration-animation-slow: var(--wcs-primitive-duration-2000); /* Motion duration for slow animations */
  --wcs-semantic-color-border-brand: var(--wcs-primitive-color-primary); /* Brand border color */
  --wcs-semantic-color-border-selected: var(--wcs-primitive-color-primary); /* Selected border color */
  --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-primary); /* Default border color for secondary elements like button, dropdown... */
  --wcs-semantic-color-border-focus-alt: var(--wcs-primitive-color-primary); /* Alternative border color on focus for control elements like input, select, textarea... */
  --wcs-semantic-color-border-control-indicator-selected: var(--wcs-primitive-color-primary); /* Selected border color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-border-control-indicator-disabled: var(--wcs-semantic-color-border-disabled); /* Disabled border color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-primary); /* Default primary background for elements like button, dropdown... */
  --wcs-semantic-color-background-action-secondary-hover: var(--wcs-semantic-color-background-surface-accent-lightest); /* Can be used by secondary elements which must have a hover state (button, dropdown...) */
  --wcs-semantic-color-background-action-secondary-press: var(--wcs-semantic-color-background-surface-accent-lighter); /* Can be used by secondary elements which must have a press state (button, dropdown...) */
  --wcs-semantic-color-background-action-secondary-selected-default: var(--wcs-semantic-color-background-surface-accent-lightest); /* Background of an active secondary action (select option) */
  --wcs-semantic-color-background-action-secondary-selected-hover: var(--wcs-semantic-color-background-surface-accent-lighter); /* Background of a hovered active secondary action (select option) */
  --wcs-semantic-color-background-action-secondary-selected-press: var(--wcs-semantic-color-background-surface-accent-light); /* Background of a pressed (CSS active) secondary action (select option) */
  --wcs-semantic-color-background-action-tertiary-hover: var(--wcs-semantic-color-background-surface-accent-lightest); /* Can be used by tertiary elements which must have a hover state (button, dropdown...) */
  --wcs-semantic-color-background-action-tertiary-press: var(--wcs-semantic-color-background-surface-accent-lighter); /* Can be used by tertiary elements which must have a press state (button, dropdown...) */
  --wcs-semantic-color-background-control-readonly: var(--wcs-semantic-color-background-surface-secondary); /* Readonly background of control like input, select, textarea... */
  --wcs-semantic-color-background-control-indicator-default: var(--wcs-semantic-color-background-surface-secondary); /* Default background color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-background-control-indicator-selected: var(--wcs-primitive-color-primary); /* Selected background color of a form-field indicator: radio, checkbox */
  --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-primary); /* Brand background color for surface */
  --wcs-semantic-color-foreground-brand: var(--wcs-primitive-color-primary); /* Brand foreground color */
  --wcs-semantic-color-foreground-action-primary-default: var(--wcs-semantic-color-foreground-primary); /* The layer on top of a primary background */
  --wcs-semantic-color-foreground-action-primary-hover: var(--wcs-semantic-color-foreground-primary); /* The layer on top of a primary background when hovered */
  --wcs-semantic-color-foreground-action-primary-press: var(--wcs-semantic-color-foreground-primary); /* The layer on top of a primary background when pressed */
  --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-primary); /* The layer on top of a secondary background */
  --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-primary); /* The layer on top of a tertiary background */
  --wcs-semantic-color-foreground-action-neutral-default: var(--wcs-semantic-color-text-primary); /* Default neutral foreground for elements like dropdown menu item */
  --wcs-semantic-color-foreground-action-neutral-hover: var(--wcs-semantic-color-text-primary); /* Hovered neutral foreground for element like dropdown menu item */
  --wcs-semantic-color-foreground-action-neutral-press: var(--wcs-semantic-color-text-primary); /* Pressed neutral foreground for element like dropdown menu item */
  --wcs-semantic-color-text-link-default: var(--wcs-primitive-color-primary); /* Default text color for link */
  --wcs-semantic-color-text-link-neutral: var(--wcs-semantic-color-text-primary); /* Active text color for link */
  --wcs-semantic-color-text-link-visited: var(--wcs-primitive-color-primary); /* Visited text color for link */
  --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-primary); /* Ripple applied to an secondary action background (on a button, dropdown...) */
  --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-primary); /* Ripple applied to an secondary action background (on a button, dropdown...) */
  --wcs-semantic-color-ripple-control: var(--wcs-primitive-color-primary); /* Ripple applied to an control (select) */
  --wcs-semantic-spacing-base: var(--wcs-semantic-size-base); /* Base spacing, can be used for calculation */
  --wcs-semantic-color-border-control-focus: var(--wcs-semantic-color-border-focus-alt); /* Focus border color for control elements like input, select, textarea... */
}

/* Components Overrides */
.sncf-holding wcs-switch {
    --wcs-switch-dot-color-default: var(--wcs-primitive-color-neutral-600);
    --wcs-switch-dot-color-selected: var(--wcs-primitive-color-neutral-0);
    --wcs-switch-dot-color-disabled: var(--wcs-primitive-color-neutral-600);
}

.sncf-holding wcs-footer {
    --wcs-footer-background-color: var(--wcs-primitive-color-parme-700);
}

.sncf-holding wcs-galactic {
    --wcs-galactic-background-color: var(--wcs-primitive-color-parme-700);
}

.sncf-holding wcs-galactic-menu {
    --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-border-focus-base-on-secondary);
}

/* wcs-tooltip */
.sncf-holding .tippy-box[data-theme~='dark'] {
    --wcs-semantic-color-text-primary: var(--wcs-semantic-color-text-inverse);
    --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-border-focus-base-on-secondary);
    --wcs-semantic-color-border-focus-alt: var(--wcs-semantic-color-border-focus-alt-on-secondary);
}

.sncf-holding .wcs-secondary {
    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-neutral-700);
    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-neutral-700);

    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-neutral-700);
    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-neutral-700);

    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-neutral-700);

    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-neutral-700);
    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-neutral-700);
}

.sncf-holding .wcs-success {
    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-vert-500);
    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-vert-500);

    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-800);
    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-vert-500);
    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-vert-500);

    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-vert-500);

    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-800);
    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-vert-500);
    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-vert-500);
}

.sncf-holding .wcs-warning {
    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-ambre-500);
    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-ambre-500);

    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-800);
    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-ambre-500);
    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-ambre-500);

    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-ambre-500);

    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-800);
    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-ambre-500);
    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-ambre-500);
}

.sncf-holding .wcs-info {
    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-bleu-primaire-400);
    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-bleu-primaire-400);

    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-bleu-primaire-400);
    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-bleu-primaire-400);

    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-bleu-primaire-400);

    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-bleu-primaire-400);
    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-bleu-primaire-400);
}

.sncf-holding .wcs-critical {
    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-rouge-400);
    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-rouge-400);

    --wcs-semantic-color-background-action-neutral-default: var(--wcs-primitive-color-critical-100);
    --wcs-semantic-color-background-action-neutral-hover: var(--wcs-primitive-color-critical-200);
    --wcs-semantic-color-background-action-neutral-press: var(--wcs-primitive-color-critical-300);

    --wcs-semantic-color-foreground-action-neutral-default: var(--wcs-primitive-color-critical-500);
    --wcs-semantic-color-foreground-action-neutral-hover: var(--wcs-primitive-color-critical-500);
    --wcs-semantic-color-foreground-action-neutral-press: var(--wcs-primitive-color-critical-600);

    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-rouge-400);
    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-rouge-400);

    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-rouge-400);

    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-rouge-400);
    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-rouge-400);
}

/* wcs-danger is deprecated, use wcs-critical instead */
.sncf-holding .wcs-danger {
    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-rouge-400);
    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-rouge-400);

    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-rouge-400);
    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-rouge-400);

    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-rouge-400);

    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-rouge-400);
    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-rouge-400);
}

.sncf-holding .wcs-dark {
    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-neutral-700);
    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-neutral-700);

    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-neutral-700);
    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-neutral-700);

    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-neutral-700);

    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-0);
    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-neutral-700);
    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-neutral-700);
}

.sncf-holding .wcs-light {
    --wcs-semantic-color-background-action-primary-default: var(--wcs-primitive-color-neutral-200);
    --wcs-semantic-color-background-surface-brand: var(--wcs-primitive-color-neutral-200);
    --wcs-semantic-color-foreground-primary: var(--wcs-primitive-color-neutral-900);

    --wcs-semantic-color-foreground-action-primary-default: var(--wcs-primitive-color-neutral-800);
    --wcs-semantic-color-foreground-action-secondary-default: var(--wcs-primitive-color-neutral-200);
    --wcs-semantic-color-foreground-action-tertiary-default: var(--wcs-primitive-color-neutral-200);

    --wcs-semantic-color-border-action-secondary-default: var(--wcs-primitive-color-neutral-200);

    --wcs-semantic-color-ripple-action-primary: var(--wcs-primitive-color-neutral-800);
    --wcs-semantic-color-ripple-action-secondary: var(--wcs-primitive-color-neutral-200);
    --wcs-semantic-color-ripple-action-tertiary: var(--wcs-primitive-color-neutral-200);
}