@version "1.55.0"; 

@charset "UTF-8";
/* --------------------------------------- */
/*  VARIABLE DS FT                               */
/* --------------------------------------- */
/* ***** CONVERTIR PX EN REM ***** */
/*
    Exemples d'utilisation :
    .class {
        width: rem(200px);
        padding: rem(10) 0;
    }
 */
/* ******************************* */
/**
 * Ces tokens sont dépréciés mais conservés pour la rétrocompatibilité
 */
:root {
  /*** Palette d'univers ***/
  --ft--color-primary: #283276;
  --ft--color-primary-hover: #1B2256;
  --ft--color-primary-active: #0F1438;
  --ft--color-primary-05: #EAECFB;
  --ft--color-primary-10: #CDD2FF;
  --ft--color-primary-20: #A1ABF9;
  --ft--color-primary-30: #707BCD;
  --ft--color-primary-40: #434FA7;
  --ft--color-primary-50: #283276;
  --ft--color-primary-60: #1B2256;
  --ft--color-primary-70: #0F1438;
  --ft--color-primary-80: #04071C;
  --ft--color-primary-90: #010105;
  --ft--color-primary-95: #000104;
  --ft--color-background-primary-weakest: #EAECFB;
  /*** Palette neutre ***/
  --ft--color-background-neutral-default-weakest: #F5F5F8;
  --ft--color-background-neutral-default-weaker:#E6E7EC;
  --ft--color-background-neutral-default-weak:#CDCFD8;
  --ft--color-background-neutral-default:#888B99;
  --ft--color-background-neutral-default-strong:#5B5D65;
  --ft--color-background-neutral-default-stronger:#44454B;
  --ft--color-background-neutral-default-strongest:#171717;
  --ft--color-background-neutral-dark:#000000;
  --ft--color-border-neutral-default-weaker:#E6E7EC;
  /*** Fonts ***/
  --ft--color-text-color: #2E2E31;
  --ft--font-size-text: 1rem;
  --ft--font-size-text-small: 0.875rem;
  --ft--font-size-display-1:2.5rem;
  --ft--font-size-display-2:2.25rem;
  --ft--font-size-display-3:2rem;
  --ft--font-size-display-4:1.75rem;
  --ft--font-size-h1:1.5rem;
  --ft--font-size-h2:1.375rem;
  --ft--font-size-h3:1.25rem;
  --ft--font-size-h4:1.125rem;
  --ft--font-size-h5:1rem;
  --ft--font-size-h6:1rem;
  /*** Buttons ***/
  --ft--button-border-radius: 0.75rem;
  --ft--button-border-radius-sm: 0.5rem;
  --ft--button-sm-height: 2rem;
  --ft--button-height: 2.5rem;
  --ft--button-lg-height: 3rem;
  --ft--button-sm-padding-x: 0.75rem;
  --ft--button-sm-padding-y: 0.5rem;
  --ft--button-padding-x: 1rem;
  --ft--button-padding-y: 0.5rem;
  --ft--button-lg-padding-x: 1.25rem;
  --ft--button-lg-padding-y: 0.5rem;
  --ft--button-ratio-square-sm-width: 2rem;
  --ft--button-ratio-square-width: 2.5rem;
  --ft--button-ratio-square-lg-width: 3rem;
  /*** Form control (input, select) ***/
  --ft--form-control-height:2.5rem;
  --ft--form-control-lg-height:3rem;
  /*** Alertes ***/
  --ft--border-error: #FFECEB;
  --ft--bg-error: #FFECEB;
  --ft--icon-error: #F04438;
  --ft--border-success: #D9F6E8;
  --ft--bg-success: #D9F6E8;
  --ft--icon-success: #09AA5F;
  --ft--border-warning: #FFFAEB;
  --ft--bg-warning: #FFFAEB;
  --ft--icon-warning:#F79009;
  --ft--border-info: #DFE9FF;
  --ft--bg-info: #DFE9FF;
  --ft--icon-info: #2C74FF;
  /*** Badge ***/
  --ft--badge-neutral-border-color: #ffffff;
  --ft--badge-neutral-text-color: #043392;
  --ft--badge-neutral-background-color: #DFE9FF;
  --ft--badge-inactive-border-color: #ffffff;
  --ft--badge-inactive-text-color: #5B5D65;
  --ft--badge-inactive-background-color: #F5F5F8;
  --ft--badge-disabled-border-color: #CDCFD8;
  --ft--badge-disabled-text-color: #71747F;
  --ft--badge-disabled-background-color: #E6E7EC;
  --ft--badge-notification-border-color: #ffffff;
  --ft--badge-notification-text-color: #ffffff;
  --ft--badge-notification-background-color: #E1000F;
  --ft--badge-border-width: 0.0625rem;
  /*** Card data ***/
  --ft--card-data-color: #2E2E31;
  --ft--card-data-background-color: var(--ft--color-background-neutral-default-weakest);
  --ft--card-data-icon-color: #2E2E31;
  --ft--card-data-count-color: var(--ft--card-data-color);
  --ft--card-data-count-background-color: #ffffff;
  /*** Collapse ***/
  --ft--collapse-min-height: 4.375rem;
  --ft--collapse-sm-min-height: 2.875rem;
  /*** Dialog ***/
  --ft--dialog-padding: 1rem;
  --ft--dialog-xs: 22.5rem;
  --ft--dialog-sm: 30rem;
  --ft--dialog-md: 40rem;
  --ft--dialog-lg: 45rem;
  --ft--dialog-xl: 60rem;
  --ft--dialog-xxl: 75.25rem;
  --ft--dialog-xxxl: 90rem;
  /*** Table ***/
  --ft--table-th-height: 3rem;
  --ft--table-padding-x: 1rem;
  --ft--table-padding-y: 0.75rem;
  --ft--table-tr-collapse-background-color: #DBE3FF;
  /*** Tabs ***/
  --ft--tabs-inactive-text-color: #5B5D65;
  --ft--tabs-inactive-background-color: #F5F5F8;
  /*** Known ***/
  --ft--color-known-full-weak: #DBE3FF;
  --ft--color-known-full-medium: #B0BFF0;
  --ft--color-known-full-default: #406BDE;
  --ft--color-known-full-contrasted: #0D1440;
  --ft--color-known-uncomplete-weak: #F0E3FA;
  --ft--color-known-uncomplete-medium: #D9C9E5;
  --ft--color-known-uncomplete-default: #69408C;
  --ft--color-known-uncomplete-contrasted: #293378;
  /*** Stepper ***/
  --ft--stepper-bullet-background: #B0BFF0;
  --ft--stepper-bullet-hover: #5B5D65;
  --ft--stepper-next-bullet-border: #B0BFF0;
  /*** Pour le mode contrasté ***/
  --ft--contrasted-border-width: 0;
  --ft--contrasted-hidden: block;
  /*** Datepicker ***/
  --ft--datepicker-day-border-radius: 12px;
  --ft--datepicker-dialog-top: 75px;
  --ft--datepicker-day-background-hover: rgba(18, 20, 55, 0.7019607843);
  /** Progress Bar */
  --ft--progressbar-container-bg-color: #E6E7EC;
  --ft--progressbar-bg-color: #406BDE;
  --header-height: 80px;
  --ft-header-height: 100px;
  /*** Spinner ***/
  --ft--spinner-stroke: #5B5D65;
  /*** Bootstrap ***/
  --white: #fff;
  --font-family-sans-serif: system-ui, sans-serif;
}
@media (prefers-contrast: more) {
  :root {
    /*** Palette d'univers ***/
    --ft--color-primary: #0F1438;
    --ft--color-primary-hover: #04071C;
    --ft--color-primary-active: #010105;
    /*** Palette neutre ***/
    --ft--color-border-neutral-default-weaker: #888B99;
    /*** Fonts ***/
    --ft--color-text-color: #171717;
    /*** Alertes ***/
    --ft--border-error: #91170E;
    --ft--icon-error: #91170E;
    --ft--border-success: #046136;
    --ft--icon-success: #046136;
    --ft--border-warning: #7C4701;
    --ft--icon-warning: #7C4701;
    --ft--border-info: #043392;
    --ft--icon-info: #043392;
    /*** Stepper ***/
    --ft--stepper-bullet-background: #44454B;
    --ft--stepper-bullet-hover: #171717;
    --ft--stepper-next-bullet-border: #2E2E31;
    /*** Pour le mode contrasté ***/
    --ft--contrasted-border-width: 1px;
    --ft--contrasted-hidden: none;
  }
}

.high-contrast {
  /*** Palette d'univers ***/
  --ft--color-primary: #0F1438;
  --ft--color-primary-hover: #04071C;
  --ft--color-primary-active: #010105;
  /*** Palette neutre ***/
  --ft--color-border-neutral-default-weaker: #888B99;
  /*** Fonts ***/
  --ft--color-text-color: #2E2E31;
  /*** Alertes ***/
  --ft--border-error: #91170E;
  --ft--icon-error: #91170E;
  --ft--border-success: #046136;
  --ft--icon-success: #046136;
  --ft--border-warning: #7C4701;
  --ft--icon-warning: #7C4701;
  --ft--border-info: #043392;
  --ft--icon-info: #043392;
  /*** Stepper ***/
  --ft--stepper-bullet-background: #44454B;
  --ft--stepper-bullet-hover: #171717;
  --ft--stepper-next-bullet-border: #2E2E31;
  /*** Pour le mode contrasté ***/
  --ft--contrasted-border-width: 1px;
  --ft--contrasted-hidden: none;
}

/* Si on veut manuellement configurer les éléments en univers Conseiller */
.conseiller,
.outil-agent {
  /*** Palette d'univers ***/
  --ft--color-primary: #355ECA;
  --ft--color-primary-hover: #2A4BA2;
  --ft--color-primary-active: #203879;
  --ft--color-primary-05: #EBEFFA;
  --ft--color-primary-10: #D7DFF4;
  --ft--color-primary-20: #AEBFEA;
  --ft--color-primary-30: #869EDF;
  --ft--color-primary-40: #5D7ED5;
  --ft--color-primary-50: #355ECA;
  --ft--color-primary-60: #2A4BA2;
  --ft--color-primary-70: #203879;
  --ft--color-primary-80: #152651;
  --ft--color-primary-90: #010105;
  --ft--color-primary-95: #000104;
  --ft--color-background-primary-weakest: #EDF1FF;
  /*** Palette neutre ***/
  --ft--color-background-neutral-default-weakest: #F2F4FB;
  --ft--color-background-neutral-default-weaker:#E7EBF1;
  --ft--color-background-neutral-default-weak:#D2DAE8;
  --ft--color-background-neutral-default:#8FA1C0;
  --ft--color-background-neutral-default-strong:#5C6E83;
  --ft--color-background-neutral-default-stronger:#45505C;
  --ft--color-background-neutral-default-strongest:#262527;
  --ft--color-background-neutral-dark:#000000;
  --ft--color-border-neutral-default-weaker:#E7EBF1;
  /*** Fonts ***/
  --ft--font-size-text: 0.875rem;
  --ft--font-size-text-small: 0.75rem;
  --ft--font-size-display-1:2.625rem;
  --ft--font-size-h2:1.125rem;
  --ft--font-size-h3:1rem;
  --ft--font-size-h4:0.875rem;
  --ft--font-size-h5:0.8125rem;
  --ft--font-size-h6:0.8125rem;
  /*** Buttons ***/
  --ft--button-sm-height: 1.75rem;
  --ft--button-height: 2rem;
  --ft--button-lg-height: 2.5rem;
  --ft--button-sm-padding-x: 0.5rem;
  --ft--button-sm-padding-y: 0.5rem;
  --ft--button-padding-x: 0.75rem;
  --ft--button-padding-y: 0.5rem;
  --ft--button-lg-padding-x: 1rem;
  --ft--button-lg-padding-y: 0.5rem;
  --ft--button-ratio-square-sm-width: 1.75rem;
  --ft--button-ratio-square-width: 2rem;
  --ft--button-ratio-square-lg-width: 2.5rem;
  /*** Card data ***/
  --ft--card-data-background-color: var(--ft--color-background-neutral-default-weakest);
  /*** Collapse ***/
  --ft--collapse-min-height: 4.125rem;
  --ft--collapse-sm-min-height: 2.625rem;
  /*** Table ***/
  --ft--table-th-height: 2.5rem;
  --ft--table-padding-x: 0.75rem;
  --ft--table-padding-y: 0.625rem;
  --ft--table-tr-collapse-background-color: #EDF1FF;
  /*** Tabs ***/
  --ft--tabs-inactive-background-color: #F2F4FB;
  /*** Form control (input, select) ***/
  --ft--form-control-height:2rem;
  --ft--form-control-lg-height:2.5rem;
}
@media (prefers-contrast: more) {
  .conseiller,
  .outil-agent {
    /*** Palette d'univers ***/
    --ft--color-primary: #203879;
    --ft--color-primary-hover: #152651;
    --ft--color-primary-active: #010105;
    /*** Palette neutre ***/
    --ft--color-border-neutral-default-weaker:#8FA1C0;
  }
}
.conseiller.high-contrast, .high-contrast .conseiller,
.outil-agent.high-contrast,
.high-contrast .outil-agent {
  /*** Palette d'univers ***/
  --ft--color-primary: #203879;
  --ft--color-primary-hover: #152651;
  --ft--color-primary-active: #010105;
  /*** Palette neutre ***/
  --ft--color-border-neutral-default-weaker:#8FA1C0;
}

/**
 * Ce fichier est généré automatiquement, ne pas le modifier directement
 */
:root {
  --ft-color-background-error-default: #ba251a;
  --ft-color-background-error-strong: #91170e;
  --ft-color-background-error-weaker: #f8dcda;
  --ft-color-background-error-weakest: #ffeceb;
  --ft-color-background-info-default: #2c74ff;
  --ft-color-background-info-strong: #043392;
  --ft-color-background-info-weaker: #dfe9ff;
  --ft-color-background-info-weakest: #eff4ff;
  --ft-color-background-layout-body: #ffffff;
  --ft-color-background-neutral-dark: #0a0a0a;
  --ft-color-background-neutral-default: #888b99;
  --ft-color-background-neutral-light: #ffffff;
  --ft-color-background-neutral-strong: #5b5d65;
  --ft-color-background-neutral-stronger: #44454b;
  --ft-color-background-neutral-strongest: #121212;
  --ft-color-background-neutral-weak: #cdcfd8;
  --ft-color-background-neutral-weaker: #e6e7ec;
  --ft-color-background-neutral-weakest: #f5f5f8;
  --ft-color-background-opacity-dark-opacity: rgba(18, 20, 55, 0.4);
  --ft-color-background-opacity-default-opacity: rgba(18, 20, 55, 0.05);
  --ft-color-background-opacity-light-opacity: rgba(255, 255, 255, 0.15);
  --ft-color-background-primary-active: #0f1438;
  --ft-color-background-primary-default: #283276; /** Couleur univers par defaut */
  --ft-color-background-primary-hover: #1b2256;
  --ft-color-background-primary-weaker: #cdd2ff;
  --ft-color-background-primary-weakest: #eaecfb;
  --ft-color-background-secondary-active: #44454b;
  --ft-color-background-secondary-default: #ffffff;
  --ft-color-background-secondary-hover: #5b5d65;
  --ft-color-background-success-default: #068148;
  --ft-color-background-success-strong: #046136;
  --ft-color-background-success-weak: #09aa5f;
  --ft-color-background-success-weaker: #d9f6e8;
  --ft-color-background-success-weakest: #ecfdf3;
  --ft-color-background-tertiary-active: rgba(18, 20, 55, 0.8);
  --ft-color-background-tertiary-dark: rgba(18, 20, 55, 0.2);
  --ft-color-background-tertiary-default: rgba(18, 20, 55, 0.05);
  --ft-color-background-tertiary-hover: rgba(18, 20, 55, 0.7);
  --ft-color-background-tertiary-light: rgba(255, 255, 255, 0.15);
  --ft-color-background-warning-default: #ae6200;
  --ft-color-background-warning-strong: #7c4701;
  --ft-color-background-warning-weak: #f79009;
  --ft-color-background-warning-weaker: #f8f0d6;
  --ft-color-background-warning-weakest: #fffaeb;
  --ft-color-border-error-default: #ba251a;
  --ft-color-border-error-weak: #f8dcda;
  --ft-color-border-info-default: #2c74ff;
  --ft-color-border-info-weak: #dfe9ff;
  --ft-color-border-neutral-default: #cdcfd8;
  --ft-color-border-neutral-light: #ffffff;
  --ft-color-border-neutral-strong: #b5b8c5;
  --ft-color-border-neutral-stronger: #888b99;
  --ft-color-border-neutral-strongest: #5b5d65;
  --ft-color-border-neutral-weak: #e6e7ec;
  --ft-color-border-neutral-weaker: #f5f5f8;
  --ft-color-border-primary-default: #283276;
  --ft-color-border-secondary-default: #5b5d65;
  --ft-color-border-success-default: #09aa5f;
  --ft-color-border-success-weak: #d9f6e8;
  --ft-color-border-tertiary-default: rgba(18, 20, 55, 0.1);
  --ft-color-border-warning-default: #f79009;
  --ft-color-border-warning-weak: #f8f0d6;
  --ft-color-decorative-blue-default: #406bde;
  --ft-color-decorative-blue-strong: #0d1440;
  --ft-color-decorative-blue-weak: #b0bff0;
  --ft-color-decorative-blue-weaker: #dbe3ff;
  --ft-color-decorative-blue-weakest: #edf1ff;
  --ft-color-decorative-gray-default: #b5b8c5;
  --ft-color-decorative-gray-strong: #888b99;
  --ft-color-decorative-gray-weak: #cdcfd8;
  --ft-color-decorative-gray-weaker: #e6e7ec;
  --ft-color-decorative-gray-weakest: #f5f5f8;
  --ft-color-decorative-pink-default: #eb94c2;
  --ft-color-decorative-pink-strong: #944f74;
  --ft-color-decorative-pink-weak: #f0c9de;
  --ft-color-decorative-pink-weaker: #fce5f2;
  --ft-color-decorative-pink-weakest: #fdf2f9;
  --ft-color-decorative-purple-default: #69408c;
  --ft-color-decorative-purple-strong: #4a3773;
  --ft-color-decorative-purple-weak: #d9c9e5;
  --ft-color-decorative-purple-weaker: #f0e3fa;
  --ft-color-decorative-purple-weakest: #f4ebfb;
  --ft-color-decorative-red-default: #eb6366;
  --ft-color-decorative-red-strong: #d92424;
  --ft-color-decorative-red-stronger: #be1616;
  --ft-color-decorative-red-weak: #f5a39e;
  --ft-color-decorative-red-weaker: #fad9d6;
  --ft-color-decorative-red-weakest: #fdeceb;
  --ft-color-decorative-sand-default: #cbc4b8;
  --ft-color-decorative-sand-strong: #70675a;
  --ft-color-decorative-sand-weak: #e6e1d8;
  --ft-color-decorative-sand-weaker: #f5f2ee;
  --ft-color-decorative-sand-weakest: #faf9f7;
  --ft-color-decorative-yellow-default: #ffcc52;
  --ft-color-decorative-yellow-strong: #dc6d00;
  --ft-color-decorative-yellow-stronger: #af5a07;
  --ft-color-decorative-yellow-weak: #ffde8c;
  --ft-color-decorative-yellow-weaker: #fff0c7;
  --ft-color-decorative-yellow-weakest: #fff7e3;
  --ft-color-icon-error-default: #f04438;
  --ft-color-icon-info-default: #2c74ff;
  --ft-color-icon-link-default: #2458e5;
  --ft-color-icon-link-visited: #69408c;
  --ft-color-icon-neutral-dark: #121212;
  --ft-color-icon-neutral-default: #2e2e31; /** Paragraphe et texte de base */
  --ft-color-icon-neutral-light: #ffffff;
  --ft-color-icon-neutral-weak: #5b5d65;
  --ft-color-icon-neutral-weaker: #9ea2b3;
  --ft-color-icon-primary-default: #283276;
  --ft-color-icon-primary-strong: #0f1438;
  --ft-color-icon-success-default: #09aa5f;
  --ft-color-icon-warning-default: #f79009;
  --ft-color-text-content-default: #2e2e31; /** Ex: Paragraphe */
  --ft-color-text-content-light: #ffffff; /** Ex: Tag */
  --ft-color-text-content-strong: #121212; /** Ex: Label */
  --ft-color-text-content-weak: #5b5d65; /** Ex: Helptext */
  --ft-color-text-content-weaker: #71747f; /** Ex: Helptext */
  --ft-color-text-error-default: #ba251a;
  --ft-color-text-info-default: #043392;
  --ft-color-text-link-default: #2458e5;
  --ft-color-text-link-visited: #69408c;
  --ft-color-text-primary-default: #283276; /** Ex: Title */
  --ft-color-text-primary-strong: #0f1438; /** Ex: Title */
  --ft-color-text-success-default: #068148;
  --ft-color-text-warning-default: #7c4701;
  --ft-font-family-body: system-ui, sans-serif;
  --ft-font-family-monospace: "Courier New", monospace;
  --ft-font-family-title: Marianne, system-ui, sans-serif;
  --ft-font-line-height-display-1: 3rem;
  --ft-font-line-height-display-2: 2.75rem;
  --ft-font-line-height-display-3: 2.375rem;
  --ft-font-line-height-display-4: 2.125rem;
  --ft-font-line-height-h1: 1.75rem;
  --ft-font-line-height-h2: 1.625rem;
  --ft-font-line-height-h3: 1.5rem;
  --ft-font-line-height-h4: 1.375rem;
  --ft-font-line-height-h5: 1.25rem;
  --ft-font-line-height-text: 1.375rem;
  --ft-font-line-height-text-small: 1.25rem;
  --ft-font-line-height-text-xsmall: 1rem;
  --ft-font-line-height-text-xxsmall: 0.75rem;
  --ft-font-line-height-text-xxxsmall: 0.6875rem;
  --ft-font-size-display-1: 2.5rem;
  --ft-font-size-display-2: 2.25rem;
  --ft-font-size-display-3: 2rem;
  --ft-font-size-display-4: 1.75rem;
  --ft-font-size-h1: 1.5rem;
  --ft-font-size-h2: 1.375rem;
  --ft-font-size-h3: 1.25rem;
  --ft-font-size-h4: 1.125rem;
  --ft-font-size-h5: 1rem;
  --ft-font-size-text: 1rem; /** TODO: à retirer une fois la tâche faite côté conception https://jira.pole-emploi.net/browse/STUDIOD-6576 */
  --ft-font-size-text-small: 0.875rem;
  --ft-font-size-text-xsmall: 0.75rem;
  --ft-font-size-text-xxsmall: 0.6875rem;
  --ft-font-size-text-xxxsmall: 0.625rem;
  --ft-font-size-text-xxxxsmall: 0.5625rem;
  --ft-font-weight-bold: 700;
  --ft-font-weight-medium: 500;
  --ft-font-weight-normal: 400;
  --ft-radius-default: 0.75rem;
  --ft-size-icon-lg: 1.5rem;
  --ft-size-icon-md: 1rem;
  --ft-size-icon-sm: 0.75rem;
  --ft-size-icon-xl: 2.5rem;
  --ft-size-illustration-lg: 7.5rem;
  --ft-size-illustration-md: 5rem;
  --ft-size-illustration-sm: 4rem;
  --ft-size-illustration-xl: 10rem;
  --ft-size-illustration-xs: 3rem;
  --ft-spacer-l1: 2rem;
  --ft-spacer-l2: 2.5rem;
  --ft-spacer-l3: 3rem;
  --ft-spacer-l4: 4rem;
  --ft-spacer-m1: 1.25rem;
  --ft-spacer-m2: 1.5rem;
  --ft-spacer-s1: 0.75rem;
  --ft-spacer-s2: 1rem;
  --ft-spacer-xl: 5rem;
  --ft-spacer-xs1: 0.25rem;
  --ft-spacer-xs2: 0.5rem;
  --ft-spacer-xxs: 0.125rem;
}

/**
 * Ce fichier est généré automatiquement, ne pas le modifier directement
 */
.outil-agent, .conseiller {
  --ft-color-background-layout-body: #dbe3ff;
  --ft-color-background-neutral-default: #8fa1c0;
  --ft-color-background-neutral-strong: #5c6e83;
  --ft-color-background-neutral-stronger: #45505c;
  --ft-color-background-neutral-strongest: #262527;
  --ft-color-background-neutral-weak: #d2dae8;
  --ft-color-background-neutral-weaker: #e7ebf1;
  --ft-color-background-neutral-weakest: #f2f4fb;
  --ft-color-background-primary-active: #43548d;
  --ft-color-background-primary-default: #406bde; /** Couleur univers par defaut */
  --ft-color-background-primary-hover: #2a4fb7;
  --ft-color-background-primary-weaker: #dbe3ff;
  --ft-color-background-primary-weakest: #edf1ff;
  --ft-color-border-primary-default: #355eca;
  --ft-color-icon-primary-default: #355eca;
  --ft-color-icon-primary-strong: #203879;
  --ft-color-text-primary-default: #355eca; /** Ex: Title */
  --ft-color-text-primary-strong: #203879; /** Ex: Title */
  --ft-font-line-height-display-1: 3.0625rem;
  --ft-font-line-height-display-2: 2.625rem;
  --ft-font-line-height-display-4: 2.0625rem;
  --ft-font-line-height-h2: 1.3125rem;
  --ft-font-line-height-h3: 1.1875rem;
  --ft-font-line-height-h4: 1rem;
  --ft-font-line-height-h5: 0.9375rem;
  --ft-font-line-height-text: 1.125rem;
  --ft-font-line-height-text-small: 1rem;
  --ft-font-line-height-text-xsmall: 0.875rem;
  --ft-font-size-display-1: 2.625rem;
  --ft-font-size-h2: 1.125rem;
  --ft-font-size-h3: 1rem;
  --ft-font-size-h4: 0.875rem;
  --ft-font-size-h5: 0.8125rem;
  --ft-font-size-text: 0.875rem; /** TODO: à retirer une fois la tâche faite côté conception https://jira.pole-emploi.net/browse/STUDIOD-6576 */
  --ft-font-size-text-small: 0.75rem;
  --ft-font-size-text-xsmall: 0.6875rem;
  --ft-font-size-text-xxsmall: 0.625rem;
  --ft-font-size-text-xxxsmall: 0.5625rem;
  --ft-font-size-text-xxxxsmall: 0.5rem;
}

/* ================== COMMON ANIMATIONS =================== */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ================== AUTOCOMPLETE =================== */
@-webkit-keyframes autocompleteRotateLoading {
  0% {
    -webkit-transform: translateY(-50%) rotate(0deg);
            transform: translateY(-50%) rotate(0deg);
  }
  to {
    -webkit-transform: translateY(-50%) rotate(359deg);
            transform: translateY(-50%) rotate(359deg);
  }
}
@keyframes autocompleteRotateLoading {
  0% {
    -webkit-transform: translateY(-50%) rotate(0deg);
            transform: translateY(-50%) rotate(0deg);
  }
  to {
    -webkit-transform: translateY(-50%) rotate(359deg);
            transform: translateY(-50%) rotate(359deg);
  }
}
/* ================== DIALOG =================== */
@-webkit-keyframes showBackdrop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes showBackdrop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@-webkit-keyframes showDialog {
  0% {
    -webkit-transform: translateY(-3.125rem);
            transform: translateY(-3.125rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes showDialog {
  0% {
    -webkit-transform: translateY(-3.125rem);
            transform: translateY(-3.125rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes hideDialog {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-3.125rem);
            transform: translateY(-3.125rem);
    opacity: 0;
  }
}
@keyframes hideDialog {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-3.125rem);
            transform: translateY(-3.125rem);
    opacity: 0;
  }
}
@-webkit-keyframes showDrawer {
  0% {
    -webkit-transform: translateX(105%);
            transform: translateX(105%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes showDrawer {
  0% {
    -webkit-transform: translateX(105%);
            transform: translateX(105%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes hideDrawer {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(105%);
            transform: translateX(105%);
    opacity: 0;
  }
}
@keyframes hideDrawer {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(105%);
            transform: translateX(105%);
    opacity: 0;
  }
}
/* ================== HEADER =================== */
@-webkit-keyframes headerIconMagnify {
  0% {
    -webkit-transform: scale(100%);
            transform: scale(100%);
  }
  45% {
    -webkit-transform: scale(110%);
            transform: scale(110%);
  }
  85% {
    -webkit-transform: scale(95%);
            transform: scale(95%);
  }
  100% {
    -webkit-transform: scale(100%);
            transform: scale(100%);
  }
}
@keyframes headerIconMagnify {
  0% {
    -webkit-transform: scale(100%);
            transform: scale(100%);
  }
  45% {
    -webkit-transform: scale(110%);
            transform: scale(110%);
  }
  85% {
    -webkit-transform: scale(95%);
            transform: scale(95%);
  }
  100% {
    -webkit-transform: scale(100%);
            transform: scale(100%);
  }
}
@-webkit-keyframes headerMenuSlideIn {
  0% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes headerMenuSlideIn {
  0% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
/* Gestion de l'animation bouton burger en mobile */
@-webkit-keyframes headerBurgerCurvedTopHide {
  0% {
    -webkit-transform: translate(0, -5px);
            transform: translate(0, -5px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
}
@keyframes headerBurgerCurvedTopHide {
  0% {
    -webkit-transform: translate(0, -5px);
            transform: translate(0, -5px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
}
@-webkit-keyframes headerBurgerCurvedTopShow {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -5px);
            transform: translate(0, -5px);
    opacity: 1;
  }
}
@keyframes headerBurgerCurvedTopShow {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -5px);
            transform: translate(0, -5px);
    opacity: 1;
  }
}
@-webkit-keyframes headerBurgerCurvedBottomHide {
  0% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
}
@keyframes headerBurgerCurvedBottomHide {
  0% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
}
@-webkit-keyframes headerBurgerCurvedBottomShow {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
    opacity: 1;
  }
}
@keyframes headerBurgerCurvedBottomShow {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
    opacity: 1;
  }
}
@-webkit-keyframes headerBurgerStraightTopShow {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  50% {
    -webkit-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    opacity: 1;
  }
}
@keyframes headerBurgerStraightTopShow {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  50% {
    -webkit-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    opacity: 1;
  }
}
@-webkit-keyframes headerBurgerStraightBottomShow {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  50% {
    -webkit-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
}
@keyframes headerBurgerStraightBottomShow {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  50% {
    -webkit-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
}
@-webkit-keyframes headerBurgerStraightTopHide {
  0% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
}
@keyframes headerBurgerStraightTopHide {
  0% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
}
@-webkit-keyframes headerBurgerStraightBottomHide {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
}
@keyframes headerBurgerStraightBottomHide {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 0;
  }
}
/* ================== PROGRESS BAR =================== */
@-webkit-keyframes progressBar {
  0% {
    left: 0%;
    right: 100%;
    width: 0%;
  }
  20% {
    left: 0%;
    right: 75%;
    width: 25%;
  }
  80% {
    right: 0%;
    left: 75%;
    width: 25%;
  }
  100% {
    left: 100%;
    right: 0%;
    width: 0%;
  }
}
@keyframes progressBar {
  0% {
    left: 0%;
    right: 100%;
    width: 0%;
  }
  20% {
    left: 0%;
    right: 75%;
    width: 25%;
  }
  80% {
    right: 0%;
    left: 75%;
    width: 25%;
  }
  100% {
    left: 100%;
    right: 0%;
    width: 0%;
  }
}
/* ================== SKELETON =================== */
@-webkit-keyframes skeletonGradientSlide {
  0% {
    background-position: 150% 50%;
  }
  100% {
    background-position: -50% 50%;
  }
}
@keyframes skeletonGradientSlide {
  0% {
    background-position: 150% 50%;
  }
  100% {
    background-position: -50% 50%;
  }
}
/* ================== SPINNER =================== */
@-webkit-keyframes spinnerRotate {
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
@keyframes spinnerRotate {
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
@-webkit-keyframes spinnerDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes spinnerDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
/* ================== TABS =================== */
@-webkit-keyframes tabMaskFading {
  to {
    /* position finale du masque */
    -webkit-mask-position: 0;
    mask-position: 0;
  }
}
@keyframes tabMaskFading {
  to {
    /* position finale du masque */
    -webkit-mask-position: 0;
    mask-position: 0;
  }
}
/* ================== TOASTER =================== */
@-webkit-keyframes toastslideInFromLeft {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes toastslideInFromLeft {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes toastSlideInFromRight {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes toastSlideInFromRight {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/* --------------------------------------- */
/*  CUSTOM VARIABLES
/* --------------------------------------- */
body {
  --margin-superposition: 150px;
  --tertiary: rgba(26, 26, 26, 0.05);
}

/* --------------------------------------- */
/*  CUSTOM CLASS
/* --------------------------------------- */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p {
  color: var(--ft--color-text-color);
}

.container-medium {
  max-width: 800px;
  margin: 0 auto;
}

.separator-big {
  padding: 0.125rem;
  border-top: none;
  width: 100%;
  border-radius: 0.75rem;
  background: var(--tertiary);
  margin: 3rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.grid-layout {
  grid-column: layout;
}

.grid-1-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(auto, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  width: 100%;
}
.grid-1-2 > *:first-of-type {
  grid-area: 1/1/2/3;
}
.grid-1-2 > *:nth-of-type(2) {
  grid-area: 2/1/3/2;
}
.grid-1-2 > *:last-of-type {
  grid-area: 2/2/3/3;
}
@media (max-width: 1024px) {
  .grid-1-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.color-weaker {
  color: #71747F;
}

.fs-small {
  font-size: 0.875rem !important;
}

.bold {
  font-weight: 700;
}

.tag-decorative {
  background-color: #2C74FF;
  letter-spacing: normal;
}
.tag-decorative,
.tag-decorative .tag-content,
.tag-decorative .tag-append,
.tag-decorative .tag-prepend {
  color: #ffffff;
}
.tag-decorative span {
  font-size: 0.875rem !important;
}

/* --------------------------------------- */
/*  HERO
/* --------------------------------------- */
/* Hero copie la grille de son parent .Document */
.ds-main-hero {
  background: radial-gradient(65.62% 115.07% at 17.78% 34.38%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), #DBE3FF;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: calc(-1 * var(--margin-superposition));
  position: relative;
}
.ds-main-hero .hero-text {
  grid-column: 1/2;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 5rem 0 var(--margin-superposition) var(--spacer-min);
  max-width: 450px;
  color: #000000;
}
.ds-main-hero .hero-text h1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-size: 2.5rem;
  margin-bottom: 0;
}
.ds-main-hero .hero-text h1 .tag {
  font-size: 1rem;
}
.ds-main-hero .hero-text p {
  font-size: 1.25rem;
  font-family: "Marianne", system-ui, sans-serif;
}
.ds-main-hero .hero-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.ds-main-hero .hero-img img {
  max-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left bottom;
     object-position: left bottom;
}
.ds-main-hero::after {
  content: "";
  width: 100%;
  height: var(--margin-superposition);
  bottom: 0;
  left: 0;
  position: absolute;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #DBE3FF), to(rgba(219, 227, 255, 0)));
  background: linear-gradient(0deg, #DBE3FF 25%, rgba(219, 227, 255, 0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------- */
/*  CARD DESIGN SYSTEM
/* --------------------------------------- */
.card-design-system {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid var(--tertiary);
  border-radius: 0.75rem;
  text-decoration: none;
  overflow: hidden;
  background-color: #ffffff;
  -webkit-box-shadow: -2px 0px 6px rgba(15, 20, 56, 0.08);
          box-shadow: -2px 0px 6px rgba(15, 20, 56, 0.08);
  min-height: 250px;
  -webkit-transition: -webkit-box-shadow 250ms ease-in-out;
  transition: -webkit-box-shadow 250ms ease-in-out;
  transition: box-shadow 250ms ease-in-out;
  transition: box-shadow 250ms ease-in-out, -webkit-box-shadow 250ms ease-in-out;
}
.card-design-system .card-img {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.card-design-system .card-img img {
  background-color: #A1ABF9;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
}
.card-design-system .card-content {
  border-left: 1px solid rgba(26, 26, 26, 0.05);
  padding: 1.5rem;
  width: clamp(270px, 40%, 450px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.card-design-system .card-content h3, .card-design-system .card-content .text-link {
  margin-top: auto;
}
.card-design-system .card-content .text-link {
  text-decoration: none;
  background-size: 0;
  background-repeat: no-repeat;
  background-position: bottom left;
  padding-bottom: 3px;
  -webkit-transition: background-size 0.4s ease, -webkit-text-decoration 0s ease;
  transition: background-size 0.4s ease, -webkit-text-decoration 0s ease;
  transition: background-size 0.4s ease, text-decoration 0s ease;
  transition: background-size 0.4s ease, text-decoration 0s ease, -webkit-text-decoration 0s ease;
  display: inline;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.card-design-system .card-content .text-link:before {
  content: " ";
  display: block;
  position: absolute;
  inset: 0;
}
.card-design-system .card-content .text-link:hover {
  background-image: linear-gradient(transparent calc(100% - 2px), #2458E5 5px);
  background-size: 100%;
}
.card-design-system.direction-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.card-design-system.direction-vertical .card-img {
  height: 150px;
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
}
.card-design-system.direction-vertical .card-content {
  width: 100%;
  border: none;
}
.card-design-system:hover {
  -webkit-box-shadow: 0 0 0 transparent;
          box-shadow: 0 0 0 transparent;
}
.card-design-system:hover .card-img img {
  -webkit-transform: translate(-50%, -50%) scale(1.05);
          transform: translate(-50%, -50%) scale(1.05);
}
@media (max-width: 1024px) {
  .card-design-system.direction-horizontal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .card-design-system.direction-horizontal .card-img {
    height: 150px;
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
  }
  .card-design-system.direction-horizontal .card-content {
    width: 100%;
    border: none;
  }
}
/* --------------------------------------- */
/*  CARD DASHBOARD
/* --------------------------------------- */
#statusResults {
  background-color: #F2F4FB;
  border-radius: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
  padding: 1rem;
}
@media (max-width: 1024px) {
  #statusResults {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.dashboard-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  -webkit-box-shadow: -2px 0px 6px rgba(15, 20, 56, 0.08);
          box-shadow: -2px 0px 6px rgba(15, 20, 56, 0.08);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.dashboard-card .label {
  width: 100%;
}
.dashboard-card .label::first-letter {
  text-transform: capitalize;
}
.dashboard-card .total {
  border-radius: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-weight: bolder;
  min-width: 34px;
  text-align: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.dashboard-card.finalise {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.dashboard-card.finalise .total {
  background-color: #D9F6E8;
  color: #046136;
}
.dashboard-card.finalise .icon {
  color: #068148;
}
.dashboard-card.en-cours {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.dashboard-card.en-cours .total {
  background-color: #FFF5D5;
  color: #7C4701;
}
.dashboard-card.en-cours .icon {
  color: #AE6200;
}
.dashboard-card.a-faire {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
.dashboard-card.a-faire .total {
  background-color: #F8DCDA;
  color: #91170E;
}
.dashboard-card.a-faire .icon {
  color: #BA251A;
}

/* --------------------------------------- */
/*  HOME SECTION
/* --------------------------------------- */
#intro {
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

.section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.section .section-intro {
  max-width: 480px;
}
.section .section-intro h2 {
  font-size: 2.25rem;
}
.section .section-intro-wide {
  max-width: none;
}

/* --------------------------------------- */
/*  FOOTER
/* --------------------------------------- */
footer.footer-ft {
  margin-top: 5rem;
}