@version "1.55.0"; 

@charset "UTF-8";
/* --------------------------------------- */
/*  Design (PE) du Design System           */
/* --------------------------------------- */
/**
 * Le thême PE du Design System est une surcharge de Mandelbrot
 * On indique le répertoire pour surcharger le thème ('/src/fractal/theme-overrides').
 * doc: https://fractal.build/guide/web/default-theme.html#template-customisation
 * Pour overrider un fichier, il suffit de le dupliquer dans le répertoire d'override
 * en suivant l'arboresence de fichiers dans le thème original
 * Repo du thème de base: https://github.com/frctl/fractal/tree/main/packages/mandelbrot/views
 */
/* --------------------------------------- */
/*  Variables et config                    */
/* --------------------------------------- */
/* ***** 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;
}

.FileBrowser-item .Doc-Container {
  position: relative;
}

.FileBrowser-copyBtn {
  position: absolute !important;
  z-index: 1;
  right: 30px;
  top: 20px;
}

.FileBrowser .FileBrowser-selectWrapper {
  row-gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.FileBrowser .FileBrowser-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 0;
}
.FileBrowser .FileBrowser-container .FileBrowser-select-label {
  width: 5.5rem;
  margin-bottom: 0;
}
.FileBrowser .FileBrowser-container .FileBrowser-select {
  min-width: 10rem;
}

.Browser-panel .Code {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 4rem;
}
.Browser-panel .Code pre {
  margin-bottom: 0;
}

.content-search {
  margin-block: 2rem;
}
.content-search .form-control::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.content-search .form-control::-ms-clear {
  display: none;
}

@font-face {
  font-family: "Marianne";
  font-display: swap;
  src: url("../fonts/marianne/Marianne-Regular.woff2") format("woff2"), url("../fonts/marianne/Marianne-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Marianne";
  font-display: swap;
  src: url("../fonts/marianne/Marianne-Regular_Italic.woff2") format("woff2"), url("../fonts/marianne/Marianne-Regular_Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Marianne";
  font-display: swap;
  src: url("../fonts/marianne/Marianne-Medium.woff2") format("woff2"), url("../fonts/marianne/Marianne-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Marianne";
  font-display: swap;
  src: url("../fonts/marianne/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/marianne/Marianne-Medium_Italic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Marianne";
  font-display: swap;
  src: url("../fonts/marianne/Marianne-Bold.woff2") format("woff2"), url("../fonts/marianne/Marianne-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Marianne";
  font-display: swap;
  src: url("../fonts/marianne/Marianne-Bold_Italic.woff2") format("woff2"), url("../fonts/marianne/Marianne-Bold_Italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
:root {
  --white: #ffffff;
  --gray-05: #f5f5f5;
  --gray-10: #e6e7e8;
  --gray-20: #d1d3d4;
  --gray-30: #bcbec0;
  --gray-40: #a7a9ac;
  --gray-50: #939598;
  --gray-60: #808285;
  --gray-70: #6d6f71;
  --gray-80: #58595b;
  --gray-90: var(--ft--color-text-color);
  --gray-95: #262527;
  --black: #000000;
  --color-accent: #0e64a0;
  --color-complement: #e2f2ff;
  --color-lightgray: #eee;
  --color-secondary: var(--ft--color-text-color);
  --skin-links: #a06;
  --skin-selection: var(--color-complement);
  --skin-header: #2837af;
  --primary: #ff5950;
  --primary-focusring: #fa7f78;
  --primary-hover: #ff291d;
  --primary-active: #ca0a00;
  --on-primary: var(--white);
  --secondary: var(--gray-80);
  --secondary-focusring: var(--gray-50);
  --secondary-hover: var(--gray-90);
  --secondary-active: var(--gray-95);
  --on-secondary: var(--white);
  /* Variables boutons Bootstrap  */
  --bs-primary: #007bff;
  --bs-primary-focusring: rgba(0, 123, 255, 0.5);
  --bs-primary-hover: #0062cc;
  --bs-primary-active: #005cbf;
  --on-bs-primary: var(--white);
  /* Variables boutons W3C */
  --w3c-primary: #005797;
  --w3c-primary-focusring: rgba(0, 87, 151, 0.5);
  --w3c-primary-hover: #024488;
  --w3c-primary-active: #01356a;
  --on-w3c-primary: var(--white);
  /* Variables boutons MDN */
  --mdn-primary: #15141a;
  --mdn-primary-focusring: rgba(21, 20, 26, 0.5);
  --mdn-primary-hover: #3a3944;
  --mdn-primary-active: #5b5b66;
  --on-mdn-primary: var(--white);
  /* Variables Design du DS */
  --sidebar-bg: #f6f8f9;
  --header-bg: #003d7c;
  --region-bg: #f5f7ff;
  --border-color: #e1e8f4;
  --text-color: #262527;
  --title-sidebar-color: #0f3263;
  --title-main-color: #262527;
  --logo-pe: #1a2c65;
}

/* --------------------------------------- */
/*  Utilities                              */
/* --------------------------------------- */
.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

/* --------------------------------------- */
/*  Base et communs                        */
/* --------------------------------------- */
::-webkit-scrollbar {
  display: revert !important;
  height: 0.4rem !important;
  width: 0.4rem !important;
  background: initial !important;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
  background: initial !important;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  border: unset !important;
  border-radius: unset !important;
  background: #ccc !important;
}

html {
  color: var(--gray95);
}

.t1,
.t2,
.t3,
.t4,
.t5,
.t6,
.Marianne,
.display-1,
.display-2,
.display-3,
.display-4,
.Prose h2,
.Prose h3 {
  font-family: "Marianne", system-ui, sans-serif;
  letter-spacing: normal !important;
  color: var(--ft--color-text-color);
  opacity: 1 !important;
}

.t1,
.display-1 {
  font-weight: 400 !important;
  font-style: normal !important;
}

.t2,
.display-2 {
  font-weight: 400 !important;
  font-style: normal !important;
}

.t3,
.display-3 {
  font-weight: 400 !important;
  font-style: normal !important;
}

.t4,
.display-4 {
  font-weight: 400 !important;
  font-style: normal !important;
}

.t5 {
  font-weight: 400 !important;
  font-style: normal !important;
}

.t6 {
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}

.t1 {
  font-size: 1.25rem !important;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .t1 {
    font-size: 1.125rem !important;
  }
}
@media (max-width: 576px) {
  .t1 {
    font-size: 1rem !important;
  }
}
.t2 {
  font-size: 1.125rem !important;
  margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
  .t2 {
    font-size: 1rem !important;
  }
}
@media (max-width: 576px) {
  .t2 {
    font-size: 0.875rem !important;
  }
}
.t3 {
  font-size: 1rem !important;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .t3 {
    font-size: 0.875rem !important;
  }
}
.t4 {
  font-size: 0.875rem !important;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .t4 {
    font-size: 0.875rem !important;
  }
}
.t5 {
  font-size: 0.813rem !important;
}

.t6 {
  font-size: 0.75rem !important;
}

.display-1 {
  font-size: 2.25rem !important;
}

@media (max-width: 768px) {
  .display-1 {
    font-size: 2rem !important;
  }
}
@media (max-width: 576px) {
  .display-1 {
    font-size: 1.75rem !important;
  }
}
.display-2 {
  font-size: 2rem !important;
}

@media (max-width: 768px) {
  .display-2 {
    font-size: 1.75rem !important;
  }
}
@media (max-width: 576px) {
  .display-2 {
    font-size: 1.625rem !important;
  }
}
.display-3 {
  font-size: 1.75rem !important;
}

@media (max-width: 768px) {
  .display-3 {
    font-size: 1.625rem !important;
  }
}
@media (max-width: 576px) {
  .display-3 {
    font-size: 1.25rem !important;
  }
}
.display-4 {
  font-size: 1.625rem !important;
}

@media (max-width: 768px) {
  .display-4 {
    font-size: 1.25rem !important;
  }
}
@media (max-width: 576px) {
  .display-4 {
    font-size: 1.125rem !important;
  }
}
.Pen-title {
  margin-bottom: 0;
}

.fractal-box {
  padding: 1rem;
  border: #CDCFD8 1px solid;
  border-radius: 0.75rem;
}

.Prose pre,
.Prose code,
.Code,
.Code pre {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-weight: 400;
}

code {
  display: inline-block;
  padding: 0px 2px;
  /* font-size: .9em; */
  color: #ca0a00;
  /*
  background: #ebeefb;
  border-radius: 3px;
  font-weight: 600;
  */
}

del code {
  text-decoration: line-through;
}

code.Code {
  font-weight: 400;
}

pre {
  border: #CDCFD8 1px solid;
  padding: 0 !important;
  border-radius: 0.75rem;
}

.Prose pre {
  margin-left: 0;
  margin-right: 0;
}

.Code pre {
  border: 0;
  white-space: pre-wrap;
  color: #ffffff;
  padding: 1rem !important;
}

dt {
  font-weight: 700;
}

dd + dt {
  margin-top: 1rem;
}

.fractal-warning {
  padding: 1rem;
  background-color: #FFFAEB;
  border: 1px solid #FFF5D5;
  border-radius: 0.75rem;
}

.fractal-success {
  padding: 1rem;
  background-color: #ECFDF3;
  border: 1px solid #D9F6E8;
  border-radius: 0.75rem;
}

.fractal-error {
  padding: 1rem;
  background-color: #FFECEB;
  border: 1px solid #F8DCDA;
  border-radius: 0.75rem;
}

.fractal-info,
.exergue {
  padding: 1rem;
  background-color: #EFF4FF;
  border: 1px solid #DFE9FF;
  border-radius: 0.75rem;
}
.fractal-info > p:last-of-type, .fractal-info > ul:last-of-type,
.exergue > p:last-of-type,
.exergue > ul:last-of-type {
  margin-bottom: 0;
}

.fractal-ressource {
  border-radius: 2px;
  padding: 1.25rem 0;
  color: var(--gray-90);
  border-top: var(--gray-20) 1px solid;
  -webkit-box-shadow: inset 0 0 0 1px var(--white);
          box-shadow: inset 0 0 0 1px var(--white);
}

.fractal-ressource:not(:first-child) {
  margin-top: 1.25rem;
}

.fractal-ressource .btn {
  color: var(--white);
}

.fractal-ressource .btn:not(:last-child) {
  margin-right: 1.25rem;
}

.btn {
  font-weight: 500;
  padding: 0.5rem 1rem;
  background-color: var(--secondary);
  border-radius: 100px;
  text-decoration: none;
  color: var(--on-secondary);
}

.btn:hover,
.btn:focus {
  color: var(--on-secondary);
  background-color: var(--secondary-hover);
}

.btn:focus,
.btn:focus-visible {
  outline: none;
  -webkit-box-shadow: 0px 0px 0px 1px rgb(255, 255, 255), 0px 0px 0px 3px var(--secondary-focusring), 0px 0px 0px 1px rgb(0, 0, 0);
          box-shadow: 0px 0px 0px 1px rgb(255, 255, 255), 0px 0px 0px 3px var(--secondary-focusring), 0px 0px 0px 1px rgb(0, 0, 0);
}

[class*=link-external]::after {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: right top;
  width: 1rem;
  height: 1rem;
}

.link-external-w::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 32 32" fill="%23ffffff"%3E%3Cpath d="M30.293.293a1 1 0 0 1 1.53 1.276l-.116.138-16 16a1 1 0 0 1-1.53-1.276l.116-.138 16-16Z"%3E%3C/path%3E%3Cpath d="M31 0a1 1 0 0 1 .984.82L32 1v14a1 1 0 0 1-1.984.18L30 15V2H17a1 1 0 0 1-.984-.82L16 1a1 1 0 0 1 .82-.984L17 0h14ZM13 6a1 1 0 0 1 .18 1.984L13 8H3a1 1 0 0 0-.984.82L2 9v20a1 1 0 0 0 .82.984L3 30h20a1 1 0 0 0 .984-.82L24 29V19a1 1 0 0 1 1.984-.18L26 19v10c0 1.559-1.19 2.84-2.711 2.986L23 32H3a3.001 3.001 0 0 1-2.986-2.711L0 29V9c0-1.559 1.19-2.84 2.711-2.986L3 6h10Z"%3E%3C/path%3E%3C/svg%3E');
}

.link-external-b::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 32 32"%3E%3Cpath d="M30.293.293a1 1 0 0 1 1.53 1.276l-.116.138-16 16a1 1 0 0 1-1.53-1.276l.116-.138 16-16Z"%3E%3C/path%3E%3Cpath d="M31 0a1 1 0 0 1 .984.82L32 1v14a1 1 0 0 1-1.984.18L30 15V2H17a1 1 0 0 1-.984-.82L16 1a1 1 0 0 1 .82-.984L17 0h14ZM13 6a1 1 0 0 1 .18 1.984L13 8H3a1 1 0 0 0-.984.82L2 9v20a1 1 0 0 0 .82.984L3 30h20a1 1 0 0 0 .984-.82L24 29V19a1 1 0 0 1 1.984-.18L26 19v10c0 1.559-1.19 2.84-2.711 2.986L23 32H3a3.001 3.001 0 0 1-2.986-2.711L0 29V9c0-1.559 1.19-2.84 2.711-2.986L3 6h10Z"%3E%3C/path%3E%3C/svg%3E');
}

/* Bouton style Bootstrap */
.btn-bs {
  background-color: var(--bs-primary) !important;
  color: var(--on-bs-primary) !important;
}

.btn-bs:hover,
.btn-bs:focus {
  color: var(--on-bs-primary) !important;
  background-color: var(--bs-primary-hover) !important;
}

.btn-bs:focus {
  -webkit-box-shadow: 0px 0px 0px 2px rgb(255, 255, 255), 0px 0px 0px 4px var(--bs-primary-focusring) !important;
          box-shadow: 0px 0px 0px 2px rgb(255, 255, 255), 0px 0px 0px 4px var(--bs-primary-focusring) !important;
}

/* Bouton style w3c */
.btn-w3c {
  background-color: var(--w3c-primary) !important;
  color: var(--on-w3c-primary) !important;
}

.btn-w3c:hover,
.btn-w3c:focus {
  color: var(--on-w3c-primary) !important;
  background-color: var(--w3c-primary-hover) !important;
}

.btn-w3c:focus {
  -webkit-box-shadow: 0px 0px 0px 2px rgb(255, 255, 255), 0px 0px 0px 4px var(--w3c-primary-focusring) !important;
          box-shadow: 0px 0px 0px 2px rgb(255, 255, 255), 0px 0px 0px 4px var(--w3c-primary-focusring) !important;
}

/* Bouton style mdn */
.btn-mdn {
  background-color: var(--mdn-primary) !important;
  color: var(--on-mdn-primary) !important;
}

.btn-mdn:hover,
.btn-mdn:focus {
  color: var(--on-mdn-primary) !important;
  background-color: var(--mdn-primary-hover) !important;
}

.btn-mdn:focus {
  -webkit-box-shadow: 0px 0px 0px 2px rgb(255, 255, 255), 0px 0px 0px 4px var(--mdn-primary-focusring) !important;
          box-shadow: 0px 0px 0px 2px rgb(255, 255, 255), 0px 0px 0px 4px var(--mdn-primary-focusring) !important;
}

/* --------------------------------------- */
/*  Structure globale                      */
/* --------------------------------------- */
/* Frames globales */
.Frame-header {
  background: none;
  padding: 0;
}

.Frame-body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "sidebar main";
  height: 100%;
}
@media (min-width: 760px) {
  .Frame-body {
    -webkit-transform: none !important;
            transform: none !important;
    margin-right: 0 !important;
  }
  .Frame-body .Navigation-panel--main,
  .Frame-body .Navigation-panel--variants:has(.is-current) {
    -webkit-transform: none !important;
            transform: none !important;
    display: block !important;
  }
}

.Frame-panel--sidebar {
  grid-area: sidebar;
}

.Frame-panel--main {
  position: relative;
  grid-area: main;
}

/* --------------------------------------- */
/*  Header                                 */
/* --------------------------------------- */
/* Note : le header est masqué à l'exception du bouton Toggle */
.Header {
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* Bouton toggle nav placé en fixed en haut à droite */
/* uniquement quand la vue est mobile / tablette */
@media (min-width: 760px) {
  .Header-navToggle {
    display: none;
  }
}
.Header-navToggle {
  position: fixed;
  top: 0.3rem;
  right: 0.6rem;
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.Header-navToggle:focus {
  outline: 1px dashed var(--black);
  border: 1px dashed rgba(255, 255, 255, 0.3) !important;
}

.Header-button,
[dir=ltr] .Header-button {
  color: var(--skin-white);
  border: unset;
}

/* --------------------------------------- */
/*  Sidebar                                */
/* --------------------------------------- */
.Frame-panel--sidebar {
  background-color: var(--white);
}

.logo-pe-ds {
  color: var(--logo-pe);
  fill: var(--logo-pe);
}

.Navigation.in-variants-panel {
  height: 100%;
}

:not(.in-variants-panel) .Navigation-panel {
  /* border-right: 0 !important; */
}

/* On masque le titre "Documentation" dans la sidebar */
.Navigation-sticky + .Navigation-group .Tree-header {
  display: none;
}

/* Recherche */
.Navigation-sticky + .Navigation-group {
  margin-top: 0;
}

.Navigation-group.Navigation-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--white);
}

@supports (animation-timeline: scroll()) {
  .Navigation-group.Navigation-sticky {
    -webkit-animation: border auto linear forwards;
            animation: border auto linear forwards;
    animation-timeline: scroll(nearest);
    animation-range: 50px 200px;
    border-bottom: var(--border-color) 0px solid;
  }
}
@-webkit-keyframes border {
  to {
    border-width: 2px;
  }
}
@keyframes border {
  to {
    border-width: 2px;
  }
}
.Navigation-group + .Navigation-group,
.Tree-collection + .Tree-collection {
  margin-top: 1rem;
}

.Navigation-search {
  margin-top: 1rem;
}

.Search-input {
  display: block;
  margin-left: 0;
  margin-right: 0.5rem;
  padding-inline: 1rem;
  font-size: 0.875rem;
  /* 14px */
  border-radius: 5px;
}

/* Titres de la sidebar */
.Tree-title,
.Tree-collectionLabel,
[data-test=index] {
  font-size: 0.75rem;
  /* 12px */
  line-height: 0.875rem;
  /* 14px */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: inherit;
  margin-bottom: 0;
}

.Tree-entityLink:hover {
  background-color: var(--region-bg);
  border-radius: 5px;
}

.Tree-entityLink:visited,
.Tree-entityLink {
  color: var(--ft--color-text-color);
}

.Tree-item.is-current .Tree-entityLink,
.Tree-item.is-current [data-test=index] {
  text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
  background-color: var(--region-bg);
  border-radius: 5px;
  color: #2458E5;
}

[data-test=index] {
  margin-left: 0.4rem;
}

[dir=ltr] .Tree-depth-1 .Tree-entityLink {
  padding-left: 0.4rem;
}

[dir=ltr] .Tree-depth-2 .Tree-collectionLabel {
  padding-left: 0rem;
}

.Tree-collectionLabel {
  width: auto;
  padding-block: 1.25rem 0.8rem;
  padding-inline: 1rem;
}

.Tree-collectionLabel:hover {
  background: none;
}

.Tree-item {
  font-size: 0.875rem;
  /* 14px */
  line-height: 1rem;
  /* 16px */
}

.Tree-entityLink {
  padding-inline: 0.4rem !important;
  padding-block: 0.4375rem;
  margin-inline: 0.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 0.5rem;
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
}
.Tree-entityLink .item-label {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.Tree-entityLink .tag {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

/* On affiche systématiquement les sous-titres */
/* Remplacer par "none" si on souhaite conserver le collapse */
.Tree-collection.is-closed .Tree-collectionItems {
  display: revert;
}

/* On masque systématiquement l'arrow */
/* Remplacer par "inline-block" si on souhaite conserver le collapse */
.Tree-collectionLabel::before {
  display: none;
}

[dir=ltr] .Navigation-panel {
  max-width: 256px;
  border-right: 1px solid var(--color-lightgray);
}

[dir=ltr] .Navigation-panel--main {
  padding-top: 0;
}
[dir=ltr] .Navigation-panel--main .Tree-title {
  margin-inline: 0;
}
[dir=ltr] .Navigation-panel--main .Tree-header {
  margin-bottom: 0;
}
[dir=ltr] .Navigation-panel--main .Tree-collectionLabel {
  margin-inline: 0;
  padding-inline: 1rem;
}
[dir=ltr] .Navigation-panel--main .Tree-header,
[dir=ltr] .Navigation-panel--main .Tree-collectionLabel {
  padding-block: 1rem;
  margin-block: 0;
  position: sticky;
  top: 129px;
  background-color: var(--white);
}

[dir=ltr] .Navigation-panel--variants {
  max-width: 240px;
  min-width: 13.5rem;
}
[dir=ltr] .Navigation-panel--variants .Tree-header {
  margin-bottom: 0;
  padding-block: 1rem;
}
[dir=ltr] .Navigation-panel--variants .Navigation-group + .Navigation-group {
  margin: 0;
}

.Tree-collectionLabel {
  -webkit-user-select: unset;
     -moz-user-select: unset;
      -ms-user-select: unset;
          user-select: unset;
}

[dir=ltr] .Tree-entityLink .Status {
  margin-left: 0;
  margin-right: 0.25rem;
}

.Status-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 100%;
}

/* --------------------------------------- */
/*  Main                                   */
/* --------------------------------------- */
/* .Frame-panel--main est composé de : */
/* - .document (zone présentant du texte : accueil, documentation), composée de : .prose */
/* - .pen (zone présentant les visuels et codes), composée de : */
/*     - .--header, .--preview, .--browser, .--info */
/* --------------------------------------- */
/*  Document                               */
/* --------------------------------------- */
/* .Document est centré, les espaces sur les côtés sont de 4rem ou 6rem selon l'écran */
.Document {
  --spacer-min: 2rem;
  display: grid;
  grid-template-columns: [layout-start] var(--spacer-min) [content-start] minmax(0, 1fr) [content-end] var(--spacer-min) [layout-end];
  padding: 0;
}

@media (min-width: 576px) {
  .Document {
    --spacer-min: 4rem;
  }
}
@media (min-width: 1024px) {
  .Document {
    --spacer-min: 6rem;
  }
}
/* Center all children */
.Document > * {
  grid-column: content;
}

/* Retrait horizontal ajusté visuellement par rapport à l'espacement vertical, sauf sur la HP */
.Document:not(.Homepage) {
  --spacer-min: 2.625rem;
  padding-top: 2rem;
}

.Document img {
  max-width: 100%;
  height: auto;
}

.Document-content figure {
  margin: 0 0 1rem;
  border: 1px solid #CDCFD8;
  border-radius: 0.75rem;
  padding: 1rem;
}
.Document-content figure img {
  border-radius: 0.75rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 1rem;
}

.Document-title {
  color: var(--title-main-color);
  font-family: Marianne, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  /* 40px */
  line-height: 2.875rem;
  /* 46px */
  margin-bottom: 0;
}

.Document-header {
  border-bottom: 0;
}

.Prose {
  width: auto;
  max-width: none;
  padding-bottom: 2rem;
}

.Prose > h2:first-of-type {
  margin-top: 0;
}

:where(.Prose) h1 {
  color: var(--gray-90);
  font-family: Marianne, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  margin-bottom: 2.5rem;
}

:where(.Prose, .Homepage) h2 {
  color: var(--title-main-color);
  font-family: Marianne, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  /* 32px */
  margin-bottom: 1.25rem;
}

:where(.Prose, .Homepage) h3 {
  color: var(--title-main-color);
  font-family: Marianne, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

:where(.Prose, .Homepage) > p,
:where(.Prose, .Homepage) > ul,
:where(.Prose, .Homepage) > ol,
:where(.Prose, .Homepage) > h1,
:where(.Prose, .Homepage) > h2,
:where(.Prose, .Homepage) > h3,
:where(.Prose, .Homepage) > h4,
:where(.Prose, .Homepage) > h5,
:where(.Prose, .Homepage) > h6 {
  max-width: none;
}

:is(.Prose) hr {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(83, 83, 99, 0.25);
  margin: 2em 0 !important;
}

.copyright {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: #58595b;
}

.sommaire,
.sommaire-inside {
  border-left: 2px solid var(--region-bg);
}

.sommaire-inside {
  margin-block: 1.1rem;
}

.sommaire p,
.sommaire-inside p {
  padding-left: 1rem;
  margin-bottom: 0.3rem;
  line-height: 1.75;
}

.sommaire-list {
  overflow: hidden;
  padding-left: 0 !important;
  font-size: 0.8125rem;
}

.sommaire-list-item {
  list-style: none !important;
}

.sommaire .text-link,
.sommaire-inside .text-link {
  display: inline-block;
  padding: 0.3rem 0 0.3rem 1rem;
  color: var(--gray-95);
  text-decoration: none !important;
}

.sommaire .text-link:where(:hover, :focus),
.sommaire-inside .text-link:where(:hover, :focus) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2458E5), to(#2458E5));
  background-image: linear-gradient(#2458E5, #2458E5);
  background-size: 4px 100%;
  background-position: left;
  background-repeat: no-repeat;
}

@media (min-width: 1200px) {
  .Prose {
    width: calc(100% - 260px);
    max-width: 768px;
  }
  .Browser-panel .Prose {
    max-width: 100%;
  }
  .Doc-Container .Prose {
    width: 100%;
    max-width: none;
  }
  .sommaire {
    width: 250px;
    position: fixed;
    top: 3rem;
    right: 3rem;
  }
  .sommaire-inside {
    width: 250px;
    position: fixed;
    top: auto;
    right: 0rem;
  }
}
/* Ecran très large : fixé à droite de .Prose */
@media (min-width: 1500px) {
  .sommaire {
    /* On calcule Sidebar + Gap + Prose + Gap */
    left: calc(240px + 6rem + 768px + 2rem);
    right: auto;
  }
}
/* --------------------------------------- */
/*  COLOR CARDS                            */
/* --------------------------------------- */
.ds-color-card {
  border: 1px solid #E6E7EC;
  border-radius: 0.75rem;
  padding: 1rem;
}

/* --------------------------------------- */
/*  TOKEN COLOR                            */
/* --------------------------------------- */
.token-color {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
  outline: 1px solid var(--ft-color-border-tertiary-default);
  border-radius: 50%;
}

/* --------------------------------------- */
/*  Pen                                    */
/* --------------------------------------- */
.Browser {
  padding-bottom: 10px;
}

.Browser-notes {
  padding: 1rem 0 1rem 2rem;
}

.Browser-resources .Doc-Container {
  padding: 0.5rem 1.25rem;
}

.Browser-panel {
  background-color: var(--white);
}

/* Panel de documentation macro */
.panel-docmacro tbody td:first-child {
  font-weight: bold;
}

/* Encart de redirection vers le DS Figma pour les designers */
/* --------------------------------------- */
/*  ICON CARD
/* --------------------------------------- */
.icon-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem;
  background-color: #EAECFB;
  border-radius: 0.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.icon-card img {
  width: 64px;
  aspect-ratio: 1/1;
}
.icon-card .card-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.icon-card .card-content .title {
  font-size: 1.125rem;
}
.icon-card .card-content .title, .icon-card .card-content p {
  margin: 0;
}
@media (max-width: 1024px) {
  .icon-card {
    -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;
  }
}

/* --------------------------------------- */
/*  Bibliothèque                           */
/* --------------------------------------- */
.Bibliotheque,
.Icone {
  /** Base commune Bibliothèque **/
}
.Bibliotheque .hidden,
.Icone .hidden {
  display: none !important;
}
@media (min-width: 1200px) {
  .Bibliotheque .Prose,
  .Icone .Prose {
    width: 100%;
    max-width: 1440px;
  }
}
.Bibliotheque .resource-img,
.Icone .resource-img {
  max-width: 100%;
  max-height: 100%;
  width: 200px;
}
.Bibliotheque .resources-container,
.Icone .resources-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  grid-gap: 1rem;
}
.Bibliotheque .section-title,
.Icone .section-title {
  grid-column: 1/-1;
  text-align: center;
}
.Bibliotheque .resource-error,
.Icone .resource-error {
  grid-column: 1/-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.Bibliotheque .resource-container,
.Icone .resource-container {
  position: relative;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  place-content: center;
  min-height: 6.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  -webkit-transition: 0.3s border-color;
  transition: 0.3s border-color;
  border: 1px solid #eee;
  overflow: hidden;
}
.Bibliotheque .resource-container.dark-bg,
.Icone .resource-container.dark-bg {
  background-color: #283276;
}
.Bibliotheque .resource-container:hover,
.Icone .resource-container:hover {
  border-color: #283276;
}
.Bibliotheque .resource-container:hover .resource-buttons,
.Bibliotheque .resource-container:focus-within .resource-buttons,
.Icone .resource-container:hover .resource-buttons,
.Icone .resource-container:focus-within .resource-buttons {
  opacity: 1;
  pointer-events: all;
}
.Bibliotheque .resource-buttons,
.Icone .resource-buttons {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: rgba(255, 255, 255, 0.94);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.2s opacity;
  transition: 0.2s opacity;
}
.Bibliotheque .resource-buttons .btn,
.Icone .resource-buttons .btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.Bibliotheque .resource-buttons .btn + .btn,
.Icone .resource-buttons .btn + .btn {
  margin-left: 0;
}

/** Style spécifique pour chaque page **/
.Bibliotheque.illustrations .resource-container.light-bg {
  border-color: white;
}
.Bibliotheque.illustrations .resource-container.light-bg:hover {
  border-color: #283276;
}
.Bibliotheque.logos-applications .resource-container {
  padding: 0;
}
.Bibliotheque.logos-services-digitaux .resource-container.dark-bg {
  background-color: #283276;
}

.Icone .icon {
  font-size: 24px;
}
.Icone .resource-container {
  position: relative;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  place-content: center;
  min-height: 6.5rem;
  border: 1px solid #dde0ff;
  border-radius: 0.5rem;
  padding: 0.5rem;
  -webkit-transition: 0.3s border-color;
  transition: 0.3s border-color;
}
.Icone .resource-container .icon-name {
  font-family: var(--ft-font-family-title);
  font-weight: var(--ft-font-weight-bold);
  line-height: var(--ft-font-line-height-text-small);
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: inherit;
  -webkit-transition: 0.2s opacity;
  transition: 0.2s opacity;
}
.Icone .resource-container:hover .icon-name, .Icone .resource-container:focus-within .icon-name {
  opacity: 0 !important;
}

/* --------------------------------------- */
/*  BORDURE DE DEMO                        */
/* --------------------------------------- */
.Pen .form-ft-universes,
.Pen .Pen-info {
  margin: 0 0 -1px;
  width: 100%;
  border-left-width: 0px;
  border-right-width: 0px;
}
.Pen .Pen-preview {
  border-left-width: 0px;
  border-right-width: 0px;
  margin: 0px;
  width: 100%;
}
.Pen .Preview-wrapper {
  max-width: 100%;
}
.Pen .Browser-tabs {
  margin-bottom: 0;
}
.Pen .Pen-handle {
  background-color: #f6f6f6;
  margin: 0;
  width: 100%;
}
.Pen .Pen-header .Status label {
  margin-bottom: 0;
}