/*!***********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./Front/modules/style.scss ***!
  \***********************************************************************************************************************************************/
@charset "UTF-8";
/*
 *Configuration
 */
/*
 *Thème de couleurs
 */
/*
 * Variables de fonctionnement
 * /!\ A modifier avec précaution
 */
/*
 * Variables générales CSS
 */
:root {
  --general-font: "Fredoka";
  --title-font: "Fredoka";
  --monospace-font: monospace;
  --suported-text: 0.75rem;
  --theme-primary: 23, 99%;
  --theme-secondary: 220, 29%;
  --theme-tertiary: 7, 46%;
  --theme-success: 152, 49%;
  --theme-error: 0, 75%;
  --theme-background: 205, 12%;
  --theme-surface: 213, 24%;
  --color-transparent-accent: 0, 0%, 0%, 0.25;
  --toolbar-height: 3.5rem;
  --button-height: 2.5rem;
  --dropdown-width: 12rem;
  --dialog-min-width: 280px;
  --dialog-max-width: 560px;
}

/* Breakpoints */
/* Colonnes pour la grille flex */
/* Système de couleurs et d'élévation */
/* MIXINS-DISPLAY-GRID POUR UN LAYOUT */
/* Grid Column Span */
.col-span-1 {
  grid-column: span 1;
}

.col-span-2 {
  grid-column: span 2;
}

.col-span-3 {
  grid-column: span 3;
}

.col-span-4 {
  grid-column: span 4;
}

.col-span-5 {
  grid-column: span 5;
}

.col-span-6 {
  grid-column: span 6;
}

.col-span-7 {
  grid-column: span 7;
}

.col-span-8 {
  grid-column: span 8;
}

.col-span-9 {
  grid-column: span 9;
}

.col-span-10 {
  grid-column: span 10;
}

.col-span-11 {
  grid-column: span 11;
}

.col-span-12 {
  grid-column: span 12;
}

/* Grid Row Span */
.row-span-1 {
  grid-row: span 1/span 1;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

.row-span-7 {
  grid-row: span 7/span 7;
}

.row-span-8 {
  grid-row: span 8/span 8;
}

.row-span-9 {
  grid-row: span 9/span 9;
}

.row-span-10 {
  grid-row: span 10/span 10;
}

.row-span-11 {
  grid-row: span 11/span 11;
}

.row-span-12 {
  grid-row: span 12/span 12;
}

:root {
  /* Thmème light */
  --color-primary: hsl(var(--theme-primary), 40%);
  --color-on-primary: hsl(var(--theme-primary), 100%);
  --color-primary-container: hsl(var(--theme-primary), 90%);
  --color-on-primary-container: hsl(var(--theme-primary), 10%);
  --color-primary-container-1: hsl(var(--theme-primary), 85%);
  --color-primary-container-2: hsl(var(--theme-primary), 82%);
  --color-primary-container-3: hsl(var(--theme-primary), 79%);
  --color-primary-container-4: hsl(var(--theme-primary), 78%);
  --color-primary-container-5: hsl(var(--theme-primary), 76%);
  --color-primary-1: hsl(var(--theme-primary), 35%);
  --color-primary-2: hsl(var(--theme-primary), 32%);
  --color-primary-3: hsl(var(--theme-primary), 29%);
  --color-primary-4: hsl(var(--theme-primary), 28%);
  --color-primary-5: hsl(var(--theme-primary), 26%);
  --color-secondary: hsl(var(--theme-secondary), 40%);
  --color-on-secondary: hsl(var(--theme-secondary), 100%);
  --color-secondary-container: hsl(var(--theme-secondary), 90%);
  --color-on-secondary-container: hsl(var(--theme-secondary), 10%);
  --color-secondary-container-1: hsl(var(--theme-secondary), 85%);
  --color-secondary-container-2: hsl(var(--theme-secondary), 82%);
  --color-secondary-container-3: hsl(var(--theme-secondary), 79%);
  --color-secondary-container-4: hsl(var(--theme-secondary), 78%);
  --color-secondary-container-5: hsl(var(--theme-secondary), 76%);
  --color-secondary-1: hsl(var(--theme-secondary), 35%);
  --color-secondary-2: hsl(var(--theme-secondary), 32%);
  --color-secondary-3: hsl(var(--theme-secondary), 29%);
  --color-secondary-4: hsl(var(--theme-secondary), 28%);
  --color-secondary-5: hsl(var(--theme-secondary), 26%);
  --color-tertiary: hsl(var(--theme-tertiary), 40%);
  --color-on-tertiary: hsl(var(--theme-tertiary), 100%);
  --color-tertiary-container: hsl(var(--theme-tertiary), 90%);
  --color-on-tertiary-container: hsl(var(--theme-tertiary), 10%);
  --color-tertiary-container-1: hsl(var(--theme-tertiary), 85%);
  --color-tertiary-container-2: hsl(var(--theme-tertiary), 82%);
  --color-tertiary-container-3: hsl(var(--theme-tertiary), 79%);
  --color-tertiary-container-4: hsl(var(--theme-tertiary), 78%);
  --color-tertiary-container-5: hsl(var(--theme-tertiary), 76%);
  --color-tertiary-1: hsl(var(--theme-tertiary), 35%);
  --color-tertiary-2: hsl(var(--theme-tertiary), 32%);
  --color-tertiary-3: hsl(var(--theme-tertiary), 29%);
  --color-tertiary-4: hsl(var(--theme-tertiary), 28%);
  --color-tertiary-5: hsl(var(--theme-tertiary), 26%);
  --color-success: hsl(var(--theme-success), 40%);
  --color-on-success: hsl(var(--theme-success), 100%);
  --color-success-container: hsl(var(--theme-success), 90%);
  --color-on-success-container: hsl(var(--theme-success), 10%);
  --color-success-container-1: hsl(var(--theme-success), 85%);
  --color-success-container-2: hsl(var(--theme-success), 82%);
  --color-success-container-3: hsl(var(--theme-success), 79%);
  --color-success-container-4: hsl(var(--theme-success), 78%);
  --color-success-container-5: hsl(var(--theme-success), 76%);
  --color-success-1: hsl(var(--theme-success), 35%);
  --color-success-2: hsl(var(--theme-success), 32%);
  --color-success-3: hsl(var(--theme-success), 29%);
  --color-success-4: hsl(var(--theme-success), 28%);
  --color-success-5: hsl(var(--theme-success), 26%);
  --color-error: hsl(var(--theme-error), 40%);
  --color-on-error: hsl(var(--theme-error), 100%);
  --color-error-container: hsl(var(--theme-error), 90%);
  --color-on-error-container: hsl(var(--theme-error), 10%);
  --color-error-container-1: hsl(var(--theme-error), 85%);
  --color-error-container-2: hsl(var(--theme-error), 82%);
  --color-error-container-3: hsl(var(--theme-error), 79%);
  --color-error-container-4: hsl(var(--theme-error), 78%);
  --color-error-container-5: hsl(var(--theme-error), 76%);
  --color-error-1: hsl(var(--theme-error), 35%);
  --color-error-2: hsl(var(--theme-error), 32%);
  --color-error-3: hsl(var(--theme-error), 29%);
  --color-error-4: hsl(var(--theme-error), 28%);
  --color-error-5: hsl(var(--theme-error), 26%);
  --color-background: hsl(var(--theme-background), 99%);
  --color-on-background: hsl(var(--theme-background), 10%);
  --color-background-outline: hsl(var(--theme-background), 50%);
  --color-background-1: hsl(var(--theme-background), 94%);
  --color-background-2: hsl(var(--theme-background), 91%);
  --color-background-3: hsl(var(--theme-background), 88%);
  --color-background-4: hsl(var(--theme-background), 87%);
  --color-background-5: hsl(var(--theme-background), 85%);
  --color-surface: hsl(var(--theme-surface), 99%);
  --color-on-surface: hsl(var(--theme-surface), 10%);
  --color-surface-variant: hsl(var(--theme-surface), 90%);
  --color-on-surface-variant: hsl(var(--theme-surface), 30%);
  --color-surface-1: hsl(var(--theme-surface), 94%);
  --color-surface-2: hsl(var(--theme-surface), 91%);
  --color-surface-3: hsl(var(--theme-surface), 88%);
  --color-surface-4: hsl(var(--theme-surface), 87%);
  --color-surface-5: hsl(var(--theme-surface), 85%);
  --color-surface-variant-1: hsl(var(--theme-surface), 85%);
  --color-surface-variant-2: hsl(var(--theme-surface), 82%);
  --color-surface-variant-3: hsl(var(--theme-surface), 79%);
  --color-surface-variant-4: hsl(var(--theme-surface), 78%);
  --color-surface-variant-5: hsl(var(--theme-surface), 76%);
}

/* @media (prefers-color-scheme: dark) {
  :root {

    @each $name,
    $color in $role-colors {
      @include role-color('dark', $name, $color);
    }

    @each $name,
    $color in $neutral-colors {
      @include neutral-color('dark', $name, $color);
    }

    @each $name,
    $color in $surface-colors {
      @include surface-color('dark', $name, $color);
    }
  }
} */
[data-dark-theme] {
  /* Thmème dark */
  --color-primary: hsl(var(--theme-primary), 80%);
  --color-on-primary: hsl(var(--theme-primary), 20%);
  --color-primary-container: hsl(var(--theme-primary), 30%);
  --color-on-primary-container: hsl(var(--theme-primary), 90%);
  --color-primary-container-1: hsl(var(--theme-primary), 35%);
  --color-primary-container-2: hsl(var(--theme-primary), 38%);
  --color-primary-container-3: hsl(var(--theme-primary), 41%);
  --color-primary-container-4: hsl(var(--theme-primary), 42%);
  --color-primary-container-5: hsl(var(--theme-primary), 44%);
  --color-primary-1: hsl(var(--theme-primary), 85%);
  --color-primary-2: hsl(var(--theme-primary), 88%);
  --color-primary-3: hsl(var(--theme-primary), 91%);
  --color-primary-4: hsl(var(--theme-primary), 92%);
  --color-primary-5: hsl(var(--theme-primary), 94%);
  --color-secondary: hsl(var(--theme-secondary), 80%);
  --color-on-secondary: hsl(var(--theme-secondary), 20%);
  --color-secondary-container: hsl(var(--theme-secondary), 30%);
  --color-on-secondary-container: hsl(var(--theme-secondary), 90%);
  --color-secondary-container-1: hsl(var(--theme-secondary), 35%);
  --color-secondary-container-2: hsl(var(--theme-secondary), 38%);
  --color-secondary-container-3: hsl(var(--theme-secondary), 41%);
  --color-secondary-container-4: hsl(var(--theme-secondary), 42%);
  --color-secondary-container-5: hsl(var(--theme-secondary), 44%);
  --color-secondary-1: hsl(var(--theme-secondary), 85%);
  --color-secondary-2: hsl(var(--theme-secondary), 88%);
  --color-secondary-3: hsl(var(--theme-secondary), 91%);
  --color-secondary-4: hsl(var(--theme-secondary), 92%);
  --color-secondary-5: hsl(var(--theme-secondary), 94%);
  --color-tertiary: hsl(var(--theme-tertiary), 80%);
  --color-on-tertiary: hsl(var(--theme-tertiary), 20%);
  --color-tertiary-container: hsl(var(--theme-tertiary), 30%);
  --color-on-tertiary-container: hsl(var(--theme-tertiary), 90%);
  --color-tertiary-container-1: hsl(var(--theme-tertiary), 35%);
  --color-tertiary-container-2: hsl(var(--theme-tertiary), 38%);
  --color-tertiary-container-3: hsl(var(--theme-tertiary), 41%);
  --color-tertiary-container-4: hsl(var(--theme-tertiary), 42%);
  --color-tertiary-container-5: hsl(var(--theme-tertiary), 44%);
  --color-tertiary-1: hsl(var(--theme-tertiary), 85%);
  --color-tertiary-2: hsl(var(--theme-tertiary), 88%);
  --color-tertiary-3: hsl(var(--theme-tertiary), 91%);
  --color-tertiary-4: hsl(var(--theme-tertiary), 92%);
  --color-tertiary-5: hsl(var(--theme-tertiary), 94%);
  --color-success: hsl(var(--theme-success), 80%);
  --color-on-success: hsl(var(--theme-success), 20%);
  --color-success-container: hsl(var(--theme-success), 30%);
  --color-on-success-container: hsl(var(--theme-success), 90%);
  --color-success-container-1: hsl(var(--theme-success), 35%);
  --color-success-container-2: hsl(var(--theme-success), 38%);
  --color-success-container-3: hsl(var(--theme-success), 41%);
  --color-success-container-4: hsl(var(--theme-success), 42%);
  --color-success-container-5: hsl(var(--theme-success), 44%);
  --color-success-1: hsl(var(--theme-success), 85%);
  --color-success-2: hsl(var(--theme-success), 88%);
  --color-success-3: hsl(var(--theme-success), 91%);
  --color-success-4: hsl(var(--theme-success), 92%);
  --color-success-5: hsl(var(--theme-success), 94%);
  --color-error: hsl(var(--theme-error), 80%);
  --color-on-error: hsl(var(--theme-error), 20%);
  --color-error-container: hsl(var(--theme-error), 30%);
  --color-on-error-container: hsl(var(--theme-error), 90%);
  --color-error-container-1: hsl(var(--theme-error), 35%);
  --color-error-container-2: hsl(var(--theme-error), 38%);
  --color-error-container-3: hsl(var(--theme-error), 41%);
  --color-error-container-4: hsl(var(--theme-error), 42%);
  --color-error-container-5: hsl(var(--theme-error), 44%);
  --color-error-1: hsl(var(--theme-error), 85%);
  --color-error-2: hsl(var(--theme-error), 88%);
  --color-error-3: hsl(var(--theme-error), 91%);
  --color-error-4: hsl(var(--theme-error), 92%);
  --color-error-5: hsl(var(--theme-error), 94%);
  --color-background: hsl(var(--theme-background), 10%);
  --color-on-background: hsl(var(--theme-background), 90%);
  --color-background-outline: hsl(var(--theme-background), 60%);
  --color-background-1: hsl(var(--theme-background), 15%);
  --color-background-2: hsl(var(--theme-background), 18%);
  --color-background-3: hsl(var(--theme-background), 21%);
  --color-background-4: hsl(var(--theme-background), 22%);
  --color-background-5: hsl(var(--theme-background), 24%);
  --color-surface: hsl(var(--theme-surface), 10%);
  --color-on-surface: hsl(var(--theme-surface), 90%);
  --color-surface-variant: hsl(var(--theme-surface), 30%);
  --color-on-surface-variant: hsl(var(--theme-surface), 80%);
  --color-surface-1: hsl(var(--theme-surface), 15%);
  --color-surface-2: hsl(var(--theme-surface), 18%);
  --color-surface-3: hsl(var(--theme-surface), 21%);
  --color-surface-4: hsl(var(--theme-surface), 22%);
  --color-surface-5: hsl(var(--theme-surface), 24%);
  --color-surface-variant-1: hsl(var(--theme-surface), 35%);
  --color-surface-variant-2: hsl(var(--theme-surface), 38%);
  --color-surface-variant-3: hsl(var(--theme-surface), 41%);
  --color-surface-variant-4: hsl(var(--theme-surface), 42%);
  --color-surface-variant-5: hsl(var(--theme-surface), 44%);
}

/* Classes de couleurs */
.primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.primary.elevation-1 {
  background: var(--color-primary-1) !important;
}
.primary.elevation-2 {
  background: var(--color-primary-2) !important;
}
.primary.elevation-3 {
  background: var(--color-primary-3) !important;
}
.primary.elevation-4 {
  background: var(--color-primary-4) !important;
}
.primary.elevation-5, .primary.snackbar:hover {
  background: var(--color-primary-5) !important;
}

.primary-container {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.primary-container.elevation-1 {
  background: var(--color-primary-container-1) !important;
}
.primary-container.elevation-2 {
  background: var(--color-primary-container-2) !important;
}
.primary-container.elevation-3 {
  background: var(--color-primary-container-3) !important;
}
.primary-container.elevation-4 {
  background: var(--color-primary-container-4) !important;
}
.primary-container.elevation-5, .primary-container.snackbar:hover {
  background: var(--color-primary-container-5) !important;
}

.secondary {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}
.secondary.elevation-1 {
  background: var(--color-secondary-1) !important;
}
.secondary.elevation-2 {
  background: var(--color-secondary-2) !important;
}
.secondary.elevation-3 {
  background: var(--color-secondary-3) !important;
}
.secondary.elevation-4 {
  background: var(--color-secondary-4) !important;
}
.secondary.elevation-5, .secondary.snackbar:hover {
  background: var(--color-secondary-5) !important;
}

.secondary-container {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
.secondary-container.elevation-1 {
  background: var(--color-secondary-container-1) !important;
}
.secondary-container.elevation-2 {
  background: var(--color-secondary-container-2) !important;
}
.secondary-container.elevation-3 {
  background: var(--color-secondary-container-3) !important;
}
.secondary-container.elevation-4 {
  background: var(--color-secondary-container-4) !important;
}
.secondary-container.elevation-5, .secondary-container.snackbar:hover {
  background: var(--color-secondary-container-5) !important;
}

.tertiary {
  background: var(--color-tertiary);
  color: var(--color-on-tertiary);
}
.tertiary.elevation-1 {
  background: var(--color-tertiary-1) !important;
}
.tertiary.elevation-2 {
  background: var(--color-tertiary-2) !important;
}
.tertiary.elevation-3 {
  background: var(--color-tertiary-3) !important;
}
.tertiary.elevation-4 {
  background: var(--color-tertiary-4) !important;
}
.tertiary.elevation-5, .tertiary.snackbar:hover {
  background: var(--color-tertiary-5) !important;
}

.tertiary-container {
  background: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
}
.tertiary-container.elevation-1 {
  background: var(--color-tertiary-container-1) !important;
}
.tertiary-container.elevation-2 {
  background: var(--color-tertiary-container-2) !important;
}
.tertiary-container.elevation-3 {
  background: var(--color-tertiary-container-3) !important;
}
.tertiary-container.elevation-4 {
  background: var(--color-tertiary-container-4) !important;
}
.tertiary-container.elevation-5, .tertiary-container.snackbar:hover {
  background: var(--color-tertiary-container-5) !important;
}

.success {
  background: var(--color-success);
  color: var(--color-on-success);
}
.success.elevation-1 {
  background: var(--color-success-1) !important;
}
.success.elevation-2 {
  background: var(--color-success-2) !important;
}
.success.elevation-3 {
  background: var(--color-success-3) !important;
}
.success.elevation-4 {
  background: var(--color-success-4) !important;
}
.success.elevation-5, .success.snackbar:hover {
  background: var(--color-success-5) !important;
}

.success-container {
  background: var(--color-success-container);
  color: var(--color-on-success-container);
}
.success-container.elevation-1 {
  background: var(--color-success-container-1) !important;
}
.success-container.elevation-2 {
  background: var(--color-success-container-2) !important;
}
.success-container.elevation-3 {
  background: var(--color-success-container-3) !important;
}
.success-container.elevation-4 {
  background: var(--color-success-container-4) !important;
}
.success-container.elevation-5, .success-container.snackbar:hover {
  background: var(--color-success-container-5) !important;
}

.error {
  background: var(--color-error);
  color: var(--color-on-error);
}
.error.elevation-1 {
  background: var(--color-error-1) !important;
}
.error.elevation-2 {
  background: var(--color-error-2) !important;
}
.error.elevation-3 {
  background: var(--color-error-3) !important;
}
.error.elevation-4 {
  background: var(--color-error-4) !important;
}
.error.elevation-5, .error.snackbar:hover {
  background: var(--color-error-5) !important;
}

.error-container {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}
.error-container.elevation-1 {
  background: var(--color-error-container-1) !important;
}
.error-container.elevation-2 {
  background: var(--color-error-container-2) !important;
}
.error-container.elevation-3 {
  background: var(--color-error-container-3) !important;
}
.error-container.elevation-4 {
  background: var(--color-error-container-4) !important;
}
.error-container.elevation-5, .error-container.snackbar:hover {
  background: var(--color-error-container-5) !important;
}

.background {
  background: var(--color-background);
  color: var(--color-on-background);
}
.background.elevation-1 {
  background: var(--color-background-1) !important;
}
.background.elevation-2 {
  background: var(--color-background-2) !important;
}
.background.elevation-3 {
  background: var(--color-background-3) !important;
}
.background.elevation-4 {
  background: var(--color-background-4) !important;
}
.background.elevation-5, .background.snackbar:hover {
  background: var(--color-background-5) !important;
}

.surface {
  background: var(--color-surface);
  color: var(--color-on-surface);
}
.surface.elevation-1 {
  background: var(--color-surface-1) !important;
}
.surface.elevation-2 {
  background: var(--color-surface-2) !important;
}
.surface.elevation-3 {
  background: var(--color-surface-3) !important;
}
.surface.elevation-4 {
  background: var(--color-surface-4) !important;
}
.surface.elevation-5, .surface.snackbar:hover {
  background: var(--color-surface-5) !important;
}

.surface-variant {
  background: var(--color-surface-variant);
  color: var(--color-on-surface-variant);
}
.surface-variant.elevation-1 {
  background: var(--color-surface-variant-1) !important;
}
.surface-variant.elevation-2 {
  background: var(--color-surface-variant-2) !important;
}
.surface-variant.elevation-3 {
  background: var(--color-surface-variant-3) !important;
}
.surface-variant.elevation-4 {
  background: var(--color-surface-variant-4) !important;
}
.surface-variant.elevation-5, .surface-variant.snackbar:hover {
  background: var(--color-surface-variant-5) !important;
}

/* Classes d'élévation */
.elevation-1 {
  background: var(--color-primary-container-1) !important;
}

.elevation-2 {
  background: var(--color-primary-container-2) !important;
}

.elevation-3 {
  background: var(--color-primary-container-3) !important;
}

.elevation-4 {
  background: var(--color-primary-container-4) !important;
}

.elevation-5, .snackbar:hover {
  background: var(--color-primary-container-5) !important;
}

.elevation-1 {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.0666666667) !important;
}

.elevation-2 {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1333333333) !important;
}

.elevation-3 {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) !important;
}

.elevation-4 {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2666666667) !important;
}

.elevation-5, .snackbar:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3333333333) !important;
}

/* Text alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

@media only screen and (min-width: 24rem) {
  .text-sm-center {
    text-align: center;
  }
  .text-sm-left {
    text-align: left;
  }
  .text-sm-right {
    text-align: right;
  }
  .text-sm-justify {
    text-align: justify;
  }
}
@media only screen and (orientation: landscape) and (min-width: 48rem) {
  .text-md-center {
    text-align: center;
  }
  .text-md-left {
    text-align: left;
  }
  .text-md-right {
    text-align: right;
  }
  .text-md-justify {
    text-align: justify;
  }
}
@media only screen and (min-width: 90rem) {
  .text-lg-center {
    text-align: center;
  }
  .text-lg-left {
    text-align: left;
  }
  .text-lg-right {
    text-align: right;
  }
  .text-lg-justify {
    text-align: justify;
  }
}
/* Comportement du text en cas de débordement */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.text-debord, .snackbar:not(.multiligne) .content, footer.navbar .child .supported-text, footer.navbar .child figure figcaption, figure footer.navbar .child figcaption, .lot-steps .c-stepper-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  hyphens: auto;
}

/* Text transform */
.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-underline {
  text-decoration: underline !important;
}

.text-line-through {
  text-decoration: line-through !important;
}

.text-no-decoration {
  text-decoration: none !important;
}

.text-disabled {
  color: var(--color-neutral) !important;
  opacity: 0.9;
}

.edito-col-2,
.edito-col-3,
.edito-col-4 {
  column-width: auto;
  column-gap: 2.5rem;
  column-count: 1;
}

@media only screen and (orientation: landscape) and (min-width: 48rem) {
  .edito-col-2 {
    column-count: 2;
  }
}

@media only screen and (orientation: landscape) and (min-width: 48rem) {
  .edito-col-3 {
    column-count: 3;
  }
}

@media only screen and (orientation: landscape) and (min-width: 48rem) {
  .edito-col-4 {
    column-count: 4;
  }
}

.text-1 {
  font-size: 0.75rem;
}

.text-2 {
  font-size: 1rem;
}

.text-3 {
  font-size: 1.25rem;
}

.text-4 {
  font-size: 1.5rem;
}

.text-5 {
  font-size: 1.75rem;
}

.text-6 {
  font-size: 2rem;
}

.text-7 {
  font-size: 2.5rem;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  font-size: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: var(--general-font), sans-serif;
  background-color: var(--color-background);
  color: var(--color-on-background);
}

main {
  width: 100%;
  max-width: 90rem;
  min-height: 50vh;
  margin: 0 auto;
  padding: 0 1rem;
  overflow-y: auto;
}
main.side-off {
  width: calc(100vw - 16rem);
  margin-left: 16rem;
  margin-right: auto;
}

.col-hidden {
  display: none;
}

.col-visible {
  display: block;
}

@media only screen and (min-width: 24rem) {
  .col-sm-hidden {
    display: none;
  }
  .col-sm-visible {
    display: block;
  }
}
@media only screen and (orientation: landscape) and (min-width: 48rem) {
  .col-md-hidden {
    display: none;
  }
  .col-md-visible {
    display: block;
  }
}
@media only screen and (min-width: 90rem) {
  .col-lg-hidden {
    display: none;
  }
  .col-lg-visible {
    display: block;
  }
}
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-grid {
  display: grid;
}

.static {
  position: static;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.fill-height {
  height: 100%;
}

.row {
  all: unset;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}

.columns {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-wrap: wrap;
}
.columns .column {
  flex: 1 1 150px;
}

.col-0 {
  width: 0%;
}

.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}

@media only screen and (min-width: 24rem) {
  .col-sm-0 {
    width: 0%;
  }
  .col-sm-1 {
    width: 8.3333333333%;
  }
  .col-sm-2 {
    width: 16.6666666667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.3333333333%;
  }
  .col-sm-5 {
    width: 41.6666666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.3333333333%;
  }
  .col-sm-8 {
    width: 66.6666666667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.3333333333%;
  }
  .col-sm-11 {
    width: 91.6666666667%;
  }
  .col-sm-12 {
    width: 100%;
  }
}
@media only screen and (orientation: landscape) and (min-width: 48rem) {
  .col-md-0 {
    width: 0%;
  }
  .col-md-1 {
    width: 8.3333333333%;
  }
  .col-md-2 {
    width: 16.6666666667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.3333333333%;
  }
  .col-md-5 {
    width: 41.6666666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.3333333333%;
  }
  .col-md-8 {
    width: 66.6666666667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.3333333333%;
  }
  .col-md-11 {
    width: 91.6666666667%;
  }
  .col-md-12 {
    width: 100%;
  }
}
@media only screen and (min-width: 90rem) {
  .col-lg-0 {
    width: 0%;
  }
  .col-lg-1 {
    width: 8.3333333333%;
  }
  .col-lg-2 {
    width: 16.6666666667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.3333333333%;
  }
  .col-lg-5 {
    width: 41.6666666667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.3333333333%;
  }
  .col-lg-8 {
    width: 66.6666666667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.3333333333%;
  }
  .col-lg-11 {
    width: 91.6666666667%;
  }
  .col-lg-12 {
    width: 100%;
  }
}
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.nowrap {
  flex-wrap: nowrap;
}

.wrap {
  flex-wrap: wrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-space-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.stretch {
  align-items: stretch;
}

.align-self-baseline {
  align-items: baseline;
}

.align-self-start {
  align-content: flex-start;
}

.align-self-end {
  align-content: flex-end;
}

.align-self-center {
  align-content: center;
}

.align-self-between {
  align-content: space-between;
}

.align-self-stretch {
  align-content: stretch;
}

.align-self-around {
  align-content: space-around;
}

/* ALIGNEMENT VERTIVAL avec la prop align-items */
.d-grid {
  /* ALIGNEMENT HORIZONTAL avec la prop justify-items */
}
.d-grid.align-start {
  align-items: start;
}
.d-grid.align-center {
  align-items: center;
}
.d-grid.align-end {
  align-items: end;
}
.d-grid.align-stretch {
  align-items: stretch;
}
.d-grid.justify-start {
  justify-items: start;
}
.d-grid.justify-center {
  justify-items: center;
}
.d-grid.justify-end {
  justify-items: end;
}
.d-grid.justify-stretch {
  justify-items: stretch;
}

/* Padding utility mixin */
.ma-0 {
  margin: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.ma-1 {
  margin: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-1 {
  margin-bottom: 0.25rem !important;
  margin-top: 0.25rem !important;
}

.ma-2 {
  margin: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-2 {
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
}

.ma-3 {
  margin: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-3 {
  margin-bottom: 1rem !important;
  margin-top: 1rem !important;
}

.ma-4 {
  margin: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mt-4, .dialog-window.with-actions > dialog footer, .dialog-window.with-actions > dialog section {
  margin-top: 1.5rem !important;
}

.mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-4, table {
  margin-bottom: 1.5rem !important;
  margin-top: 1.5rem !important;
}

.pa-0 {
  padding: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.pa-1 {
  padding: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pt-1, figure figcaption {
  padding-top: 0.25rem !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-1 {
  padding-bottom: 0.25rem !important;
  padding-top: 0.25rem !important;
}

.pa-2 {
  padding: 0.5rem !important;
}

.pb-2, figure figcaption {
  padding-bottom: 0.5rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-2 {
  padding-bottom: 0.5rem !important;
  padding-top: 0.5rem !important;
}

.pa-3 {
  padding: 1rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.px-3, figure figcaption {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-3 {
  padding-bottom: 1rem !important;
  padding-top: 1rem !important;
}

.pa-4 {
  padding: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4 {
  padding-left: 1.5rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-4 {
  padding-bottom: 1.5rem !important;
  padding-top: 1.5rem !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--title-font), sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1.2;
}

h1,
.h1 {
  font-size: calc(1.375rem + 1.5vw);
}

h2,
.h2 {
  font-size: calc(1.35rem + 0.9vw);
}

h3,
.h3 {
  font-size: calc(1.3rem + 0.6vw);
}

h4,
.h4 {
  font-size: calc(1.275rem + 0.3vw);
}

h5,
.h5 {
  font-size: 1.125rem;
}

h6,
.h6 {
  font-size: 1.1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.5rem;
}

b,
strong {
  font-weight: bold;
}

a:not(.button) {
  cursor: pointer;
  text-decoration: none;
}
a:not(.button):link {
  color: var(--color-secondary);
}
a:not(.button):visited {
  color: var(--color-secondary);
}
a:not(.button):focus, a:not(.button):hover {
  color: var(--color-secondary);
  filter: brightness(80%);
}
a:not(.button):active {
  color: var(--color-secondary);
  filter: brightness(80%);
}
a:not(.button).link-unstyled {
  color: inherit;
}

code,
kbd,
pre,
samp {
  font-family: var(--monospace-font);
}

pre {
  width: 100%;
  padding: 1rem;
  font-size: 11px;
  line-height: 1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--color-secondary-container);
  background-color: var(--color-on-secondary-container);
  letter-spacing: 0.05rem;
  border-radius: 0.5rem;
}

ul {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  border-radius: 0.75rem;
}

button,
input[type=button],
input[type=reset],
input[type=submit],
a[role=button],
[role=button],
.button {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  margin: 0.5rem 0.25rem;
  overflow: visible;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  user-select: none;
  width: auto;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  cursor: pointer;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 0.5rem;
  border: 0;
}
button:first-letter,
input[type=button]:first-letter,
input[type=reset]:first-letter,
input[type=submit]:first-letter,
a[role=button]:first-letter,
[role=button]:first-letter,
.button:first-letter {
  text-transform: uppercase;
}
button:active,
input[type=button]:active,
input[type=reset]:active,
input[type=submit]:active,
a[role=button]:active,
[role=button]:active,
.button:active {
  filter: brightness(120%);
}
button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
a[role=button]:hover,
[role=button]:hover,
.button:hover {
  box-shadow: 0px 1px 5px 0 var(--color-primary);
  filter: brightness(120%);
}
button:hover.primary,
input[type=button]:hover.primary,
input[type=reset]:hover.primary,
input[type=submit]:hover.primary,
a[role=button]:hover.primary,
[role=button]:hover.primary,
.button:hover.primary {
  box-shadow: 0px 1px 5px 0 var(--color-primary);
}
button:hover.secondary,
input[type=button]:hover.secondary,
input[type=reset]:hover.secondary,
input[type=submit]:hover.secondary,
a[role=button]:hover.secondary,
[role=button]:hover.secondary,
.button:hover.secondary {
  box-shadow: 0px 1px 5px 0 var(--color-secondary);
}
button:hover.tertiary,
input[type=button]:hover.tertiary,
input[type=reset]:hover.tertiary,
input[type=submit]:hover.tertiary,
a[role=button]:hover.tertiary,
[role=button]:hover.tertiary,
.button:hover.tertiary {
  box-shadow: 0px 1px 5px 0 var(--color-tertiary);
}
button:hover.success,
input[type=button]:hover.success,
input[type=reset]:hover.success,
input[type=submit]:hover.success,
a[role=button]:hover.success,
[role=button]:hover.success,
.button:hover.success {
  box-shadow: 0px 1px 5px 0 var(--color-success);
}
button:hover.error,
input[type=button]:hover.error,
input[type=reset]:hover.error,
input[type=submit]:hover.error,
a[role=button]:hover.error,
[role=button]:hover.error,
.button:hover.error {
  box-shadow: 0px 1px 5px 0 var(--color-error);
}
button.block,
input[type=button].block,
input[type=reset].block,
input[type=submit].block,
a[role=button].block,
[role=button].block,
.button.block {
  width: 100%;
}
button.small,
input[type=button].small,
input[type=reset].small,
input[type=submit].small,
a[role=button].small,
[role=button].small,
.button.small {
  padding: 0.5rem 1rem;
  font-size: 0.825rem;
}
button.large,
input[type=button].large,
input[type=reset].large,
input[type=submit].large,
a[role=button].large,
[role=button].large,
.button.large {
  padding: 1rem 2rem;
  font-size: 1.25rem;
}
button.flex,
input[type=button].flex,
input[type=reset].flex,
input[type=submit].flex,
a[role=button].flex,
[role=button].flex,
.button.flex {
  display: flex;
  align-items: center;
}
button.outlined,
input[type=button].outlined,
input[type=reset].outlined,
input[type=submit].outlined,
a[role=button].outlined,
[role=button].outlined,
.button.outlined {
  border-width: 1px;
  border-style: solid;
  padding: calc(0.75rem - 1px) calc(1.5rem - 1px);
  background: var(--color-on-primary);
  color: var(--color-primary);
}
button.outlined.primary,
input[type=button].outlined.primary,
input[type=reset].outlined.primary,
input[type=submit].outlined.primary,
a[role=button].outlined.primary,
[role=button].outlined.primary,
.button.outlined.primary {
  background: var(--color-on-primary);
  color: var(--color-primary);
}
button.outlined.secondary,
input[type=button].outlined.secondary,
input[type=reset].outlined.secondary,
input[type=submit].outlined.secondary,
a[role=button].outlined.secondary,
[role=button].outlined.secondary,
.button.outlined.secondary {
  background: var(--color-on-secondary);
  color: var(--color-secondary);
}
button.outlined.tertiary,
input[type=button].outlined.tertiary,
input[type=reset].outlined.tertiary,
input[type=submit].outlined.tertiary,
a[role=button].outlined.tertiary,
[role=button].outlined.tertiary,
.button.outlined.tertiary {
  background: var(--color-on-tertiary);
  color: var(--color-tertiary);
}
button.outlined.success,
input[type=button].outlined.success,
input[type=reset].outlined.success,
input[type=submit].outlined.success,
a[role=button].outlined.success,
[role=button].outlined.success,
.button.outlined.success {
  background: var(--color-on-success);
  color: var(--color-success);
}
button.outlined.error,
input[type=button].outlined.error,
input[type=reset].outlined.error,
input[type=submit].outlined.error,
a[role=button].outlined.error,
[role=button].outlined.error,
.button.outlined.error {
  background: var(--color-on-error);
  color: var(--color-error);
}
button.text,
input[type=button].text,
input[type=reset].text,
input[type=submit].text,
a[role=button].text,
[role=button].text,
.button.text {
  background-color: transparent;
  border-width: 0;
  margin: 0;
  padding: 0.5rem 1rem;
  color: var(--color-on-background);
  border-radius: 0.5rem;
}
button.text:hover,
input[type=button].text:hover,
input[type=reset].text:hover,
input[type=submit].text:hover,
a[role=button].text:hover,
[role=button].text:hover,
.button.text:hover {
  color: var(--color-on-primary-container);
  background-color: hsla(var(--color-transparent-accent));
  box-shadow: unset;
}
button.text:hover.primary,
input[type=button].text:hover.primary,
input[type=reset].text:hover.primary,
input[type=submit].text:hover.primary,
a[role=button].text:hover.primary,
[role=button].text:hover.primary,
.button.text:hover.primary {
  color: var(--color-on-primary-container);
}
button.text:hover.secondary,
input[type=button].text:hover.secondary,
input[type=reset].text:hover.secondary,
input[type=submit].text:hover.secondary,
a[role=button].text:hover.secondary,
[role=button].text:hover.secondary,
.button.text:hover.secondary {
  color: var(--color-on-secondary-container);
}
button.text:hover.tertiary,
input[type=button].text:hover.tertiary,
input[type=reset].text:hover.tertiary,
input[type=submit].text:hover.tertiary,
a[role=button].text:hover.tertiary,
[role=button].text:hover.tertiary,
.button.text:hover.tertiary {
  color: var(--color-on-tertiary-container);
}
button.text:hover.success,
input[type=button].text:hover.success,
input[type=reset].text:hover.success,
input[type=submit].text:hover.success,
a[role=button].text:hover.success,
[role=button].text:hover.success,
.button.text:hover.success {
  color: var(--color-on-success-container);
}
button.text:hover.error,
input[type=button].text:hover.error,
input[type=reset].text:hover.error,
input[type=submit].text:hover.error,
a[role=button].text:hover.error,
[role=button].text:hover.error,
.button.text:hover.error {
  color: var(--color-on-error-container);
}
button i,
input[type=button] i,
input[type=reset] i,
input[type=submit] i,
a[role=button] i,
[role=button] i,
.button i {
  font-size: 1.25rem;
  padding-right: 0.25rem;
}
button.icon,
input[type=button].icon,
input[type=reset].icon,
input[type=submit].icon,
a[role=button].icon,
[role=button].icon,
.button.icon {
  background-color: transparent;
  border-width: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  color: var(--color-on-background);
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
}
button.icon:hover,
input[type=button].icon:hover,
input[type=reset].icon:hover,
input[type=submit].icon:hover,
a[role=button].icon:hover,
[role=button].icon:hover,
.button.icon:hover {
  color: var(--color-primary);
  background-color: hsla(var(--color-transparent-accent));
  box-shadow: unset;
}
button.icon:hover.primary,
input[type=button].icon:hover.primary,
input[type=reset].icon:hover.primary,
input[type=submit].icon:hover.primary,
a[role=button].icon:hover.primary,
[role=button].icon:hover.primary,
.button.icon:hover.primary {
  color: var(--color-primary);
}
button.icon:hover.secondary,
input[type=button].icon:hover.secondary,
input[type=reset].icon:hover.secondary,
input[type=submit].icon:hover.secondary,
a[role=button].icon:hover.secondary,
[role=button].icon:hover.secondary,
.button.icon:hover.secondary {
  color: var(--color-secondary);
}
button.icon:hover.tertiary,
input[type=button].icon:hover.tertiary,
input[type=reset].icon:hover.tertiary,
input[type=submit].icon:hover.tertiary,
a[role=button].icon:hover.tertiary,
[role=button].icon:hover.tertiary,
.button.icon:hover.tertiary {
  color: var(--color-tertiary);
}
button.icon:hover.success,
input[type=button].icon:hover.success,
input[type=reset].icon:hover.success,
input[type=submit].icon:hover.success,
a[role=button].icon:hover.success,
[role=button].icon:hover.success,
.button.icon:hover.success {
  color: var(--color-success);
}
button.icon:hover.error,
input[type=button].icon:hover.error,
input[type=reset].icon:hover.error,
input[type=submit].icon:hover.error,
a[role=button].icon:hover.error,
[role=button].icon:hover.error,
.button.icon:hover.error {
  color: var(--color-error);
}
button.icon i,
input[type=button].icon i,
input[type=reset].icon i,
input[type=submit].icon i,
a[role=button].icon i,
[role=button].icon i,
.button.icon i {
  font-size: 1.5rem;
  padding-right: 0;
}
button[disabled], button.disabled,
input[type=button][disabled],
input[type=button].disabled,
input[type=reset][disabled],
input[type=reset].disabled,
input[type=submit][disabled],
input[type=submit].disabled,
a[role=button][disabled],
a[role=button].disabled,
[role=button][disabled],
[role=button].disabled,
.button[disabled],
.button.disabled {
  color: var(--color-on-surface-variant);
  background-color: var(--color-surface-variant);
  border-color: var(--color-on-surface-variant);
  box-shadow: unset;
  cursor: not-allowed;
}
button[disabled]:hover, button.disabled:hover,
input[type=button][disabled]:hover,
input[type=button].disabled:hover,
input[type=reset][disabled]:hover,
input[type=reset].disabled:hover,
input[type=submit][disabled]:hover,
input[type=submit].disabled:hover,
a[role=button][disabled]:hover,
a[role=button].disabled:hover,
[role=button][disabled]:hover,
[role=button].disabled:hover,
.button[disabled]:hover,
.button.disabled:hover {
  box-shadow: unset;
}

button.fab,
input[type=button].fab,
input[type=reset].fab,
input[type=submit].fab,
a[role=button].fab,
[role=button].fab,
.button.fab {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  padding: 0;
  margin-right: 1rem;
  margin-bottom: 1rem;
}
button.fab i,
input[type=button].fab i,
input[type=reset].fab i,
input[type=submit].fab i,
a[role=button].fab i,
[role=button].fab i,
.button.fab i {
  font-size: 1.5rem;
  padding: 0;
}
button.fab.small,
input[type=button].fab.small,
input[type=reset].fab.small,
input[type=submit].fab.small,
a[role=button].fab.small,
[role=button].fab.small,
.button.fab.small {
  border-radius: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
}
button.fab.large,
input[type=button].fab.large,
input[type=reset].fab.large,
input[type=submit].fab.large,
a[role=button].fab.large,
[role=button].fab.large,
.button.fab.large {
  border-radius: 1.75rem;
  width: 6rem;
  height: 6rem;
}
button.fab.large i,
input[type=button].fab.large i,
input[type=reset].fab.large i,
input[type=submit].fab.large i,
a[role=button].fab.large i,
[role=button].fab.large i,
.button.fab.large i {
  font-size: 2rem;
}
button.fab.text,
input[type=button].fab.text,
input[type=reset].fab.text,
input[type=submit].fab.text,
a[role=button].fab.text,
[role=button].fab.text,
.button.fab.text {
  background-color: transparent;
  border-width: 0;
  margin: 0;
  padding: 0;
}
button.fab.text:hover,
input[type=button].fab.text:hover,
input[type=reset].fab.text:hover,
input[type=submit].fab.text:hover,
a[role=button].fab.text:hover,
[role=button].fab.text:hover,
.button.fab.text:hover {
  filter: brightness(200%);
}

.group-buttons,
.segmented-buttons {
  border: 1px solid var(--color-primary);
  border-radius: 1.25rem;
  color: var(--color-on-primary);
  display: inline-block;
  height: 2.5rem;
  font-weight: 500;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
}
.group-buttons button.text,
.segmented-buttons button.text {
  margin: 0;
  border-radius: 0;
  height: 100%;
  overflow: hidden;
  padding: 0 1rem;
}
.group-buttons button.text i:first-of-type,
.segmented-buttons button.text i:first-of-type {
  padding-right: 0.5rem;
}
.group-buttons button.text i:last-of-type,
.segmented-buttons button.text i:last-of-type {
  padding-left: 0.5rem;
}
.group-buttons button.text:not(:last-child),
.segmented-buttons button.text:not(:last-child) {
  border-inline-end: 1px solid var(--color-primary);
}
.group-buttons button.text:hover,
.segmented-buttons button.text:hover {
  text-decoration: none;
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.group-buttons button.text:hover.primary,
.segmented-buttons button.text:hover.primary {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.group-buttons button.text:hover.secondary,
.segmented-buttons button.text:hover.secondary {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
.group-buttons button.text:hover.tertiary,
.segmented-buttons button.text:hover.tertiary {
  background-color: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
}
.group-buttons button.text:hover.success,
.segmented-buttons button.text:hover.success {
  background-color: var(--color-success-container);
  color: var(--color-on-success-container);
}
.group-buttons button.text:hover.error,
.segmented-buttons button.text:hover.error {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
  text-align: start;
  padding: 2rem;
  border-width: 0;
  margin-bottom: 0.5rem;
}
.card.primary {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.card.secondary {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
.card.tertiary {
  background: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
}
.card.success {
  background: var(--color-success-container);
  color: var(--color-on-success-container);
}
.card.error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}
.card header {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  hyphens: auto;
}
.card figure {
  width: 100%;
  object-fit: cover;
}
.card section {
  display: flex;
  flex-direction: row;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.card footer {
  display: flex;
  flex-direction: row;
  padding: 0;
}
.card footer button {
  font-size: 0.875rem;
}
.card.with-footer {
  padding-bottom: 1rem;
}
.card.outlined {
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-primary);
  background-color: transparent;
}
.card.outlined.primary {
  border-color: var(--color-primary);
}
.card.outlined.secondary {
  border-color: var(--color-secondary);
}
.card.outlined.tertiary {
  border-color: var(--color-tertiary);
}
.card.outlined.success {
  border-color: var(--color-success);
}
.card.outlined.error {
  border-color: var(--color-error);
}

/* Aspect ratio */
.ratio-1x1,
.ratio-square {
  aspect-ratio: 1/1;
}

.ratio-4x3 {
  aspect-ratio: 4/3;
}

.ratio-16x9 {
  aspect-ratio: 16/9;
}

.bg-cover {
  background-size: cover;
}

.bg-content {
  background-size: content;
}

img {
  /* comportement defaut */
  width: 100%;
  height: auto;
  /* comportement spécifique */
}
img.portrait {
  height: 100%;
}
img.landscape {
  width: 100%;
}

.fit-fill {
  object-fit: fill;
}

.fit-contain {
  object-fit: contain;
}

.fit-cover {
  object-fit: cover;
}

.fit-none {
  object-fit: none;
}

.fit-scale-down {
  object-fit: scale-down;
}

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(25%, 1fr);
  grid-gap: 0.5rem;
  grid-auto-flow: dense;
}
.grid-gallery .item-1x1 {
  grid-column: span 1;
  grid-row: span 1;
  aspect-ratio: 1/1;
  background-color: var(--color-primary-container-1);
}
.grid-gallery .item-2x2 {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1/1;
  background-color: var(--color-primary-container-2);
}
.grid-gallery .item-3x2 {
  grid-column: span 3;
  grid-row: span 2;
  aspect-ratio: 3/2;
  background-color: var(--color-primary-container-3);
}

.resizable {
  resize: horizontal;
  overflow-x: auto;
}

figure {
  width: 100%;
  margin: 0;
  display: grid;
  justify-items: center;
  border-radius: calc(var(--button-height) / 2);
  overflow: hidden;
  border: 1px solid var(--color-primary);
}
figure video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.avatar {
  display: grid;
  place-items: center;
  width: calc(var(--unity) * 5);
  height: calc(var(--unity) * 5);
  background-color: var(--color-primary-lighten-1);
  border-radius: 50%;
  overflow: hidden;
}
.avatar.small {
  width: calc(var(--unity) * 3);
  height: calc(var(--unity) * 3);
}
.avatar.large {
  width: calc(var(--unity) * 8);
  height: calc(var(--unity) * 8);
}

.carousel-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  /*carousel navigation*/
}
.carousel-wrapper.ratio-16x9 {
  aspect-ratio: 16/9;
}
.carousel-wrapper.ratio-16x9 .img-child {
  aspect-ratio: 16/9 !important;
}
.carousel-wrapper:hover .navigation-controls {
  width: 100%;
  left: 0rem;
  right: 0rem;
  opacity: 1;
}
.carousel-wrapper aside.carousel-navigation {
  all: unset;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
.carousel-wrapper .carousel-navigation-list, .carousel-wrapper .carousel-navigation-item {
  display: inline-block;
}
.carousel-wrapper .carousel-navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-primary-container);
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
  margin: 0 0.5rem;
}
.carousel-wrapper .carousel-navigation-button .active {
  background-color: var(--color-primary);
}
.carousel-wrapper .navigation-controls {
  position: absolute;
  width: 120%;
  left: -5rem;
  right: -5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s ease;
}
.carousel-wrapper .navigation-controls button {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  opacity: 0.7;
  transition: all 0.5s ease;
  padding: 0;
  margin: 0;
}
.carousel-wrapper .navigation-controls button i {
  font-size: 2rem;
}

.carousel-viewport {
  display: block;
  overflow: auto;
  scroll-snap-type: x mandatory;
  transition: all 0.5s ease;
  height: 100%;
}
.carousel-viewport::-webkit-scrollbar {
  display: none;
}
.carousel-viewport .carousel-slider {
  height: 100%;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease;
}
.carousel-viewport .carousel-slider picture.img-child {
  display: grid;
  place-items: center;
  height: 100%;
  aspect-ratio: 4/3;
  scroll-snap-align: start;
  transition: all 0.5s ease;
}
.carousel-viewport .carousel-slider picture.img-child img {
  object-fit: cover;
  height: 100%;
}

.chip {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  flex-direction: row;
  position: relative;
  height: 2rem;
  padding: 0.25rem 1rem;
  border: 1px solid var(--color-primary-container);
  background-color: var(--color-primary-container);
  margin: 0 0.25rem;
  border-radius: 0.5rem;
}
.chip.outlined {
  background: var(--color-background);
  border: 1px solid var(--color-primary);
}
.chip.selectable:hover {
  filter: brightness(110%);
  cursor: pointer;
  border: 1px solid var(--color-primary-container);
  box-shadow: 0px 1px 5px 0 var(--color-neutral);
}

/*Steps - input steps*/
.step-wrapper input {
  width: 100%;
  position: relative;
  z-index: 1;
}

.step-wrapper input[type=range] + datalist.graduations {
  width: 100%;
  padding: 0 0.5rem;
  /*pour caller le thumb*/
  height: 0.5rem;
  z-index: 0;
  display: grid;
  margin-top: -0.5rem;
  grid-template-columns: repeat(var(--number-step), 1fr);
}
.step-wrapper input[type=range] + datalist.graduations option:not(:first-of-type) {
  border-left: 1px solid var(--color-primary);
}
.step-wrapper input[type=range] + datalist.graduations option {
  position: relative;
  z-index: 0;
  text-align: center;
  color: transparent;
  font-size: 0;
}

:root {
  --circle-size: clamp(1.5rem, 5vw, 3rem);
  --spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.wrapper-step {
  counter-reset: flag;
}
.wrapper-step.small .c-stepper {
  transform: scale(0.7);
}

.c-stepper {
  display: flex;
  padding: 0;
}

.c-stepper-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  position: relative;
  /*hover si cliquable*/
  /*&:hover{
    cursor: pointer;
  }*/
}
.c-stepper-item:before {
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  opacity: 0.5;
  margin: 0 auto 0.125rem;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  content: counter(flag);
  counter-increment: flag;
  display: grid;
  place-items: center;
  font-size: clamp(1rem, 5vw, 1.25rem);
  line-height: clamp(1rem, 5vw, 1.25rem);
}
.c-stepper-item:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - var(--spacing) * 2);
  left: calc(50% + var(--circle-size) / 2 + var(--spacing));
  height: 2px;
  background-color: var(--color-primary);
  opacity: 0.5;
  order: -1;
}

.c-stepper-item:not(.active) li:not(.active):before {
  opacity: 0.5;
}

.c-stepper-title {
  font-size: clamp(1rem, 4vw, 1.25rem);
  margin-bottom: 0.25rem;
}

/*sibling active step*/
.c-stepper-item.active:before {
  background-color: var(--color-primary-1);
  color: var(--color-on-primary);
  opacity: 1;
}

/*sibling step after active step*/
.c-stepper-item.active ~ .c-stepper-item {
  color: var(--color-neutral-lighten);
  opacity: 0.5;
  filter: grayscale(1);
}
.c-stepper-item.active ~ .c-stepper-item:before {
  background-color: transparent;
  color: var(--color-primary);
}

.wrapper-step.with-icons {
  /*pour les icones*/
}
.wrapper-step.with-icons .c-stepper-item:before {
  content: "";
  color: transparent;
  background-color: var(--color-primary);
}
.wrapper-step.with-icons .c-stepper-item > i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1rem, 3vw, 2rem);
  color: var(--color-on-primary);
  width: var(--circle-size);
  height: var(--circle-size);
  padding-top: 0.2rem;
  display: grid;
  place-items: center;
}
.wrapper-step.with-icons .c-stepper-item:not(.active) ~ li:not(.active):before {
  background-color: transparent;
}
.wrapper-step.with-icons .c-stepper-item:not(.active) ~ li:not(.active) i {
  color: var(--color-primary);
  opacity: 0.5;
}

/*cas extrême*/
.lot-steps {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /*pour hider la scrollbar*/
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.lot-steps::-webkit-scrollbar {
  display: none;
}
.lot-steps .c-stepper-item {
  flex: 1 0 90px;
  scroll-snap-align: start;
}
.lot-steps .c-stepper-title {
  font-size: clamp(0.8rem, 2vw, 1rem);
}

blockquote {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  margin: 1rem 0;
  background: var(--color-surface-variant);
  border-radius: 0.5rem;
  box-shadow: 1px 3px 5px 0 var(--color-surface-variant);
  word-break: break-word;
}
blockquote i.with-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  margin-right: 15px;
  font-size: 32px;
  border: 1px solid var(--color-on-surface-variant);
  border-radius: 50%;
}
blockquote p {
  flex: 1;
}
blockquote.info {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
blockquote.info i.with-icon {
  border-color: var(--color-on-secondary-container);
  color: var(--color-on-secondary-container);
}
blockquote.success {
  background: var(--color-success-container);
  color: var(--color-on-success-container);
}
blockquote.success i.with-icon {
  border-color: var(--color-on-success-container);
  color: var(--color-on-success-container);
}
blockquote.warning {
  background: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
}
blockquote.warning i.with-icon {
  border-color: var(--color-on-tertiary-container);
  color: var(--color-on-tertiary-container);
}
blockquote.error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}
blockquote.error i.with-icon {
  border-color: var(--color-on-error-container);
  color: var(--color-on-error-container);
}

textarea {
  font-family: var(--general-font);
  color: var(--color-on-background);
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-clip: padding-box;
  border: 1px solid var(--color-primary);
  border-radius: 0.375rem;
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  resize: none;
}

input,
select {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  border-style: none;
  margin: 0.5rem 0.25rem;
}

input:active,
input:focus,
textarea:active,
textarea:focus {
  outline: none;
}

input[type=text], input[type=email] {
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.375rem;
  border: 1px solid var(--color-primary);
  font-size: 1rem;
}
input[type=search] {
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.375rem;
  border: 1px solid var(--color-primary);
  font-size: 1rem;
  accent-color: var(--color-primary);
}
input[type=number] {
  border: 1px solid var(--color-primary);
  padding: 0.5rem 0;
  text-align: right;
  border-radius: 0.5rem;
}
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}
input[type=radio] {
  width: 1rem;
  height: 1rem;
  border-radius: calc(var(--unity) / 8);
  color: var(--color-primary);
  caret-color: var(--color-primary);
}
input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  border-radius: calc(var(--unity) / 8);
  color: var(--color-primary);
  caret-color: var(--color-primary);
}
input[type=checkbox], input[type=range], input[type=radio] {
  accent-color: var(--color-primary);
}
input[type=checkbox].primary, input[type=range].primary, input[type=radio].primary {
  accent-color: var(--color-primary);
}
input[type=checkbox].secondary, input[type=range].secondary, input[type=radio].secondary {
  accent-color: var(--color-secondary);
}
input[type=checkbox].tertiary, input[type=range].tertiary, input[type=radio].tertiary {
  accent-color: var(--color-tertiary);
}
input[type=checkbox].success, input[type=range].success, input[type=radio].success {
  accent-color: var(--color-success);
}
input[type=checkbox].error, input[type=range].error, input[type=radio].error {
  accent-color: var(--color-error);
}

label {
  font-size: 1rem;
  color: var(--color-primary);
}

select {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.375rem;
  accent-color: var(--color-primary);
  font-size: 1rem;
  outline-color: var(--color-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}
select option {
  accent-color: var(--color-primary);
}
select::-ms-expand {
  display: none;
}

.dialog-window {
  position: fixed;
  background: rgb(45, 65, 82);
  background: radial-gradient(circle, rgb(45, 65, 82) 0%, rgba(97, 112, 125, 0) 100%);
  opacity: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  visibility: hidden;
  pointer-events: none;
  transition: 0.2s ease-out;
}
.dialog-window.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.dialog-window dialog {
  display: grid;
  width: clamp(var(--dialog-min-width), 50%, var(--dialog-max-width));
  grid-template-rows: var(--toolbar-height) auto;
  top: 50%;
  transform: translate(0, -50%);
  transition: 0.2s ease-out;
  padding: 1.5rem;
  border-radius: 0.75rem;
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  outline: 0.5rem rgba(0, 0, 0, 0.5) solid;
  border: none;
}
.dialog-window dialog .header {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.dialog-window dialog h1 {
  color: var(--color-primary);
  font-weight: 400;
  font-size: 1.5rem;
}
@media only screen and (min-width: 24rem) {
  .dialog-window dialog h1 {
    font-size: 2rem;
  }
}
.dialog-window dialog .dialog-close {
  color: var(--color-neutral);
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  text-align: center;
  text-decoration: none;
}
.dialog-window dialog .dialog-close:hover {
  color: var(--color-primary);
}
.dialog-window.full > dialog {
  width: 100vw;
  height: 100vh;
}
.dialog-window.with-actions > dialog {
  display: grid;
  grid-template-rows: var(--toolbar-height) auto var(--toolbar-height);
}
.dialog-window.with-actions > dialog header {
  display: grid;
  grid-template-columns: 2.5rem auto auto;
  align-items: center;
}
.dialog-window.with-actions > dialog header h1 {
  text-align: left;
}
.dialog-window.with-actions > dialog section {
  text-align: left;
}
.dialog-window.with-actions > dialog .dialog-close {
  position: relative;
  display: block;
  width: 1.5rem;
  font-size: 2rem;
  margin: 0;
}

.with-dropdown {
  background-color: transparent;
  padding: 0 1rem;
  position: sticky;
  top: 0;
}
.with-dropdown > ul {
  grid-auto-flow: column;
  background-color: transparent;
  box-shadow: none;
}
.with-dropdown > ul > li {
  place-items: center;
  /* les liens dans le nav avec dropdown */
}
.with-dropdown > ul > li button {
  border-radius: 0;
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 100%;
}
.with-dropdown > ul > li a {
  text-decoration: none;
  text-align: center;
  display: inline-grid;
  color: var(--color-on-primary-container);
  font-size: 1rem;
  width: 100%;
}
.with-dropdown > ul > li a:focus {
  outline: none;
}
.with-dropdown > ul > li > a {
  padding: 1rem 0.5rem;
  border-top: 0.125rem solid transparent;
}
.with-dropdown > ul > li > a:hover, .with-dropdown > ul > li > a:focus {
  border-radius: 0;
  border-top-color: var(--color-primary);
  color: var(--color-primary);
}
.with-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  background-color: unset;
}
.with-dropdown ul li {
  padding: 0;
  background-color: unset;
}

.dropdown {
  position: relative;
  /* le contenu dropdown */
}
.dropdown .arrow {
  opacity: 0;
  visibility: hidden;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: rotateX(-90deg) translateX(-50%);
  filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.2));
  z-index: 0;
}
.dropdown .arrow span {
  display: block;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: var(--color-primary-container);
  width: 1rem;
  height: 0.5rem;
}
.dropdown .dropdown-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dropdown .dropdown-title:is(button) {
  background-color: transparent;
  color: var(--color-primary);
}
.dropdown .dropdown-title:after {
  content: "";
  border: 0.35rem solid transparent;
  border-top-color: var(--color-primary);
  margin-left: 0.25em;
  transform: translateY(0.15em);
}
.dropdown .dropdown-menu {
  position: absolute;
  min-width: var(--dropdown-width);
  left: 50%;
  top: calc(100% - 0.25rem);
  transform: rotateX(-90deg) translateX(-50%);
  transform-origin: top center;
  visibility: hidden;
  opacity: 0.3;
  padding: 0;
  background-color: var(--color-primary-container);
  border-radius: 0.5rem;
  overflow: visible;
  box-shadow: 0 0.15em 0.25em var(--color-primary-container-1);
}
.dropdown .dropdown-menu li {
  padding: 0;
}
.dropdown .dropdown-menu li:hover {
  background-color: transparent;
}
.dropdown .dropdown-menu li:first-of-type a {
  border-radius: 0.5rem 0.5rem 0 0;
}
.dropdown .dropdown-menu li:first-of-type a:hover::after {
  display: block;
  content: "";
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: var(--color-primary);
  width: 1rem;
  height: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  bottom: 99%;
  left: 50%;
  opacity: 1;
  visibility: 1;
  z-index: 3;
}
.dropdown .dropdown-menu li:last-of-type a {
  border-radius: 0 0 0.5rem 0.5rem;
}
.dropdown .dropdown-menu a {
  color: var(--color-on-primary-container);
  display: block;
  padding: 0.75rem 1rem;
  opacity: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  position: relative;
}
.dropdown .dropdown-menu a:hover {
  background-color: var(--color-primary);
  filter: brightness(120%);
  color: var(--color-on-primary);
}
.dropdown .dropdown-menu a:focus {
  outline: none;
  background-color: var(--color-primary-container);
}
.dropdown:hover .dropdown-title, .dropdown:focus-within .dropdown-title {
  border-top-color: var(--color-primary);
}
.dropdown:hover .arrow, .dropdown:focus-within .arrow {
  transform: rotateX(0deg) translateX(-50%);
  opacity: 1;
  visibility: visible;
  min-width: var(--dropdown-width);
  display: flex;
  justify-content: center;
}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu {
  opacity: 1;
  transform: rotateX(0) translateX(-50%);
  visibility: visible;
  z-index: 1;
  top: calc(100% + 0.5rem);
  width: 100%;
  min-width: var(--dropdown-width);
  /* positionnement du dropdown pour un trigger fab */
}
.dropdown:hover .dropdown-menu a, .dropdown:focus-within .dropdown-menu a {
  opacity: 1;
}
.dropdown:hover .dropdown-menu:after, .dropdown:focus-within .dropdown-menu:after {
  top: calc(100% - 1.25rem);
}
.dropdown:hover:after, .dropdown:focus-within:after {
  opacity: 1;
}

div.dropdown {
  width: auto;
  /* Si c'est un fab */
}
div.dropdown:hover:after {
  top: 100%;
}
div.dropdown .dropdown-menu {
  right: 0;
  width: 100%;
  min-width: var(--dropdown-width);
}
div.dropdown .dropdown-title:is(.fab) {
  width: 2.5rem;
  display: grid;
  place-items: center;
}
div.dropdown .dropdown-title:is(.fab):after {
  display: none;
}
div.dropdown .dropdown-title:is(.fab) > .dropdown-menu {
  left: calc(-50% + 1.25rem);
}

header.top-appbar {
  position: sticky;
  top: 0;
  left: 0;
  height: 3.5rem;
  background-color: var(--color-surface-variant);
  color: var(--color-on-surface-variant);
  z-index: 10;
}
header.top-appbar.small {
  grid-template-columns: 3.5rem 1fr auto;
}
header.top-appbar.medium {
  height: 7rem;
  grid-template-columns: 3.5rem 1fr auto;
  grid-template-rows: 3.5rem 3.5rem;
}
header.top-appbar.medium .headline {
  grid-column: span 3;
  padding-left: 1rem;
}
header.top-appbar.left-drawer {
  margin-left: 22.5rem;
}
header.top-appbar.right-drawer {
  margin-right: 22.5rem;
}
header.top-appbar .child.menu {
  padding-left: 0.25rem;
}
header.top-appbar .child.with-actions {
  display: flex;
  flex: 0 1 100%;
  align-items: center;
  padding-right: 0.25rem;
  justify-content: flex-end;
}
header.top-appbar .child .avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  border-radius: 50%;
  overflow: hidden;
}
header.top-appbar .child .avatar img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
header.top-appbar .child .avatar.small {
  width: 1.5rem;
  height: 1.5rem;
}
header.top-appbar .child .avatar.large {
  width: 4rem;
  height: 4rem;
}

footer.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-variant);
  min-height: 3.5rem;
  width: 100vw;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
@media only screen and (min-width: 24rem) {
  footer.navbar {
    margin-left: -2rem;
    margin-right: -2rem;
  }
}
footer.navbar.outlined {
  background-color: var(--color-background);
  border-top: 1px solid var(--color-background-outline);
}
footer.navbar.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
footer.navbar .child {
  display: flex;
  flex: 0 1 100%;
  height: var(--toolbar-height);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
footer.navbar .child i {
  font-size: 1.5rem;
}
footer.navbar .child:hover {
  color: var(--color-primary);
  cursor: pointer;
}
footer.navbar .child:hover i {
  color: var(--color-primary);
}
footer.navbar .child.active i {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 2rem;
  color: var(--color-primary);
  background-color: var(--color-primary-container);
  border-radius: calc(var(--button-height) / 2);
}
footer.navbar .child .active span {
  color: var(--color-primary-lighten);
}

footer.bottom-app-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  background-color: var(--color-surface-variant);
  max-height: var(--bottombar-height);
  width: 100vw;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  padding: 0.25rem;
}
@media only screen and (min-width: 24rem) {
  footer.bottom-app-bar {
    width: 100vw;
    margin-left: -2rem;
    margin-right: -2rem;
  }
}
footer.bottom-app-bar .child.with-actions {
  display: flex;
  flex: 0 1 100%;
}
footer.bottom-app-bar .child.with-actions .fab.small {
  margin: 0 0.125rem;
}
footer.bottom-app-bar .child.with-actions i {
  font-size: 1.5rem;
}

.navigation-drawer {
  width: 22.5rem;
  background-color: var(--color-surface-variant);
  border-right: 1px solid var(--color-background-outline);
  border-left: 1px solid var(--color-background-outline);
  position: fixed;
  opacity: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  visibility: hidden;
  pointer-events: none;
  transition: 0.2s ease-out;
  overflow-y: auto;
}
.navigation-drawer .navigation-drawer-header {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 3.5rem;
  grid-template-areas: "headline toggle";
}
.navigation-drawer .navigation-drawer-header .toggle-open,
.navigation-drawer .navigation-drawer-header .toggle-close {
  font-size: 2.5rem;
  grid-area: toogle;
  grid-column: 2;
  grid-row: 1;
}
.navigation-drawer .navigation-drawer-header .headline {
  font-size: 1.5rem;
  font-weight: 700;
  grid-area: headline;
}
.navigation-drawer.right {
  right: 0;
  left: unset;
  padding: 0 1.5rem 0.5rem 1rem;
}
.navigation-drawer.right .navigation-drawer-header {
  grid-template-columns: 3.5rem 1fr;
  grid-template-areas: "toggle headline";
}
.navigation-drawer.right .navigation-drawer-header .toggle-open,
.navigation-drawer.right .navigation-drawer-header .toggle-close {
  grid-column: 1;
  grid-row: 1;
}
.navigation-drawer.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.navigation-drawer.toggle.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.navigation-drawer nav {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.navigation-drawer nav .item {
  border-radius: 1.75rem;
  height: 3.5rem;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1.5rem;
  display: inline-grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  transition: 0.2s ease-out;
  margin-bottom: 0.5rem;
  cursor: pointer;
  color: var(--color-primary);
}
.navigation-drawer nav .item:hover, .navigation-drawer nav .item.active {
  background-color: var(--color-on-primary);
  color: var(--color-primary);
}

.toolbar {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  height: var(--toolbar-height);
  z-index: 10;
  background-color: var(--color-primary-container);
  border-bottom: 1px solid var(--color-primary);
}
.toolbar.side-off {
  left: 16rem;
}
.toolbar nav {
  height: 100%;
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: 0 0.5rem;
}

/* Overlay element */
.overlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: center;
  position: fixed;
  opacity: 0;
  z-index: 999;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-1);
  /* sibling child */
}
.overlay > *:is(.card, .snackbar, .dialog) {
  transition: var(--transition);
  position: absolute;
  transform-origin: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  filter: blur(1.5rem);
}
.overlay .overlay-close {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.overlay:before {
  display: block;
  content: "";
  width: 0;
  height: 0;
  background-color: var(--color-on-primary-container);
  opacity: 0.2;
}

.overlay:target {
  visibility: visible;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  pointer-events: auto;
  border-radius: 0;
  display: grid;
  place-items: center;
}
.overlay:target:before {
  width: 100vw;
  height: 100vh;
  opacity: 0.7;
}
.overlay:target > *:is(.card, .snackbar, .dialog) {
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  box-shadow: 0px 0px 4px 0 var(--color-on-primary-container);
}

table {
  display: table;
  overflow-x: initial;
  border: 2px solid var(--color-background-outline);
  border-radius: 1rem;
  overflow: hidden;
  border-spacing: 0;
  text-align: left;
  width: 100%;
}
table th {
  color: var(--color-on-primary-container);
  background-color: var(--color-primary-container);
}
table td, table th {
  border: 1px solid var(--color-background-outline);
  padding: 1rem;
}
table td:first-child, table th:first-child {
  border-left: 0;
}
table td:last-child, table th:last-child {
  border-right: 0;
}
table thead tr:first-of-type td, table thead tr:first-of-type th {
  border-top: 0;
}
table thead tr:first-of-type *:first-child {
  border-radius: 1rem 0 0 0;
}
table thead tr:first-of-type *:last-child {
  border-radius: 0 1rem 0 0;
}
table tbody tr:last-of-type td, table tbody tr:last-of-type th {
  border-bottom: 0;
}
table tbody tr:last-of-type *:first-child {
  border-radius: 0 0 0 1rem;
}
table tbody tr:last-of-type *:last-child {
  border-radius: 0 0 1rem 0;
}
table.alternate tbody tr:nth-child(even) {
  background-color: var(--color-primary-container);
  filter: brightness(1.05);
}
table.small {
  border-radius: 0.5rem;
  font-size: 0.75rem;
}
table.small th, table.small td {
  padding: 0.25rem;
}
table.small thead tr:first-of-type *:first-child {
  border-radius: 0.5rem 0 0 0;
}
table.small thead tr:first-of-type *:last-child {
  border-radius: 0 0.5rem 0 0;
}
table.small tbody tr:last-of-type *:first-child {
  border-radius: 0 0 0 0.5rem;
}
table.small tbody tr:last-of-type *:last-child {
  border-radius: 0 0 0.5rem 0;
}
table.primary {
  background: transparent;
  color: var(--color-on-background);
}
table.primary th {
  color: var(--color-on-primary-container);
  background-color: var(--color-primary-container);
}
table.primary.alternate tbody tr:nth-child(even) {
  background-color: var(--color-primary-container);
}
table.secondary {
  background: transparent;
  color: var(--color-on-background);
}
table.secondary th {
  color: var(--color-on-secondary-container);
  background-color: var(--color-secondary-container);
}
table.secondary.alternate tbody tr:nth-child(even) {
  background-color: var(--color-secondary-container);
}
table.tertiary {
  background: transparent;
  color: var(--color-on-background);
}
table.tertiary th {
  color: var(--color-on-tertiary-container);
  background-color: var(--color-tertiary-container);
}
table.tertiary.alternate tbody tr:nth-child(even) {
  background-color: var(--color-tertiary-container);
}
table.success {
  background: transparent;
  color: var(--color-on-background);
}
table.success th {
  color: var(--color-on-success-container);
  background-color: var(--color-success-container);
}
table.success.alternate tbody tr:nth-child(even) {
  background-color: var(--color-success-container);
}
table.error {
  background: transparent;
  color: var(--color-on-background);
}
table.error th {
  color: var(--color-on-error-container);
  background-color: var(--color-error-container);
}
table.error.alternate tbody tr:nth-child(even) {
  background-color: var(--color-error-container);
}

.divider,
hr {
  display: block;
  flex: 1 1 0px;
  max-width: 100%;
  height: 0;
  max-height: 0;
  border: solid;
  border-width: thin 0 0;
  transition: inherit;
  width: 100%;
  border-color: var(--color-background-outline);
}

/* Loader */
@keyframes spin {
  100% {
    rotate: 360deg;
  }
}
.loader {
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  transform-origin: center;
  overflow: visible;
  animation: spin 1s linear infinite;
}
.loader.small {
  transform: scale(0.6);
}
.loader.xsmall {
  transform: scale(0.4);
}
.loader svg {
  width: 100%;
  height: 100%;
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 6px;
  stroke-linecap: round;
  animation: dash 2.5s ease-in-out infinite;
}

.progress {
  background-color: var(--color-primary-container-1);
  width: 16rem;
  height: 0.2rem;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.progress.with-percent {
  height: 1rem;
  border-radius: 0.25rem;
}
.progress.with-percent .inner {
  display: grid;
  place-items: center;
  width: 0;
  animation: unset;
  font-size: 0.75rem;
  color: var(--color-primary-container-1);
}
.progress.secondary {
  background: var(--color-secondary-container-1) !important;
}
.progress.secondary .inner {
  background-color: var(--color-secondary);
  color: var(--color-secondary-container-1);
}
.progress.tertiary {
  background-color: var(--color-tertiary-container-1) !important;
}
.progress.tertiary .inner {
  background-color: var(--color-tertiary);
  color: var(--color-tertiary-container-1);
}

.progress .inner {
  background-color: var(--color-primary);
  height: 100%;
  transform-origin: left;
  animation: progress 1s infinite;
}

@keyframes progress {
  from {
    transform: scaleX(5%) translateX(-5%);
  }
  to {
    transform: scaleX(75%) translateX(130%);
  }
}
@keyframes skeleton-bg {
  0% {
    background-size: 200px;
    background-position: -200px 0;
    background-image: linear-gradient(90deg, var(--color-secondary-container-1) 0px, white 40px, var(--color-secondary-container-1) 80px);
  }
  100% {
    background-size: 200px;
    background-position: 200px 0;
    background-image: linear-gradient(90deg, var(--color-secondary-container-1) 0px, white 40px, var(--color-secondary-container-1) 80px);
  }
}
.skeleton {
  background-color: var(--color-secondary-container-1);
  animation: skeleton-bg 3s infinite linear;
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.25rem;
  border-radius: 0.25rem;
  cursor: wait;
  position: relative;
  overflow: hidden;
  animation: skeleton-bg 3s infinite linear;
}

.skeleton-avatar {
  width: 2.5rem;
  /* 40 */
  height: 2.5rem;
  border-radius: 50%;
  align-self: start;
  grid-row: span 2;
  grid-column: span 1;
  cursor: wait;
  animation: skeleton-bg 3s infinite linear;
}
.skeleton-avatar.small {
  width: 1.5rem;
  height: 1.5rem;
}
.skeleton-avatar.large {
  width: 3.5rem;
  height: 3.5rem;
}

.skeleton-button {
  background-color: var(--color-secondary-container-1);
  animation: skeleton-bg 3s infinite linear;
  color: transparent;
  cursor: wait;
}

/* boc rating */
.rating {
  position: relative;
  height: 2.5rem;
  padding: 0 0.25rem;
}
.rating.outlined {
  border: 1px solid var(--color-primary-container-1);
  border-radius: 1.25rem;
}
.rating.small {
  transform: scale(0.5);
}
.rating.small label {
  margin: 0 0.5rem;
}
.rating input,
.rating label {
  all: unset;
}

.rating:not(:checked) > input {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rating:not(:checked) > label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: var(--color-primary-container);
}

.rating:not(:checked) > label:before {
  content: "★ ";
  font-size: 2rem;
}

.rating > input:checked ~ label {
  color: var(--color-primary);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  opacity: 0.7;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
  color: var(--color-primary);
}

/*Rating autre version */
div.rate-stars {
  width: auto;
  display: inline-block;
}

input.star {
  display: none;
}

label.star {
  float: right;
  padding: 0.25rem;
  font-size: 1rem;
  color: var(--color-primary-container);
  transition: all 0.2s;
  display: grid;
  place-items: center;
  position: relative;
}

/*l'etoile non checked*/
input.star ~ label.star i {
  color: var(--color-primary-container);
  opacity: 0.4;
}

/*l'etoile checked*/
input.star:checked ~ label.star i {
  color: var(--color-primary);
  transition: all 0.25s;
  z-index: 1;
  opacity: 1;
}

label.star:hover {
  transform: scale(1.3);
}
label.star:hover:before {
  display: block;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-primary-container);
  z-index: 0;
  border-radius: 50%;
  position: absolute;
}

label.star i {
  font-family: "Material Icons";
  z-index: 3;
  display: grid;
  place-items: center;
}

.switch {
  display: inline-block;
  position: relative;
  width: 3.5rem;
  height: 2rem;
  cursor: pointer;
  overflow: hidden;
}
.switch.small {
  transform: scale(0.5);
}
.switch input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.switch input + span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 3.5rem;
  height: 2rem;
  background: var(--color-surface-variant);
  border-radius: 1rem;
}
.switch input + span:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 2px;
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: 0.2s ease-out;
}
.switch input:checked + span {
  background: var(--color-success);
}
.switch input:checked + span:before {
  left: 1.6rem;
}
.switch.primary {
  background: transparent;
}
.switch.primary input:checked + span {
  background: var(--color-primary);
}
.switch.secondary {
  background: transparent;
}
.switch.secondary input:checked + span {
  background: var(--color-secondary);
}
.switch.tertiary {
  background: transparent;
}
.switch.tertiary input:checked + span {
  background: var(--color-tertiary);
}
.switch.success {
  background: transparent;
}
.switch.success input:checked + span {
  background: var(--color-success);
}
.switch.error {
  background: transparent;
}
.switch.error input:checked + span {
  background: var(--color-error);
}

.pagination {
  display: inline-flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.pagination a {
  display: grid;
  place-items: center;
  color: var(--color);
  margin: 0.25rem;
  text-decoration: none;
  align-items: center;
  width: 3rem;
  height: 3rem;
  padding-top: 0.125rem;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
}
.pagination a.active, .pagination a:hover {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border: none;
}
.pagination a.ellipsis {
  place-items: center;
  padding-bottom: 0.5rem;
}
.pagination.small {
  transform: scale(0.8);
}
.pagination.rounded a {
  border-radius: 50%;
}

.breadcrumb {
  width: 100%;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--color-primary-container-2);
}
.breadcrumb :is(a) {
  text-decoration: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  float: left;
  font-size: 0.75rem;
  line-height: 2.25rem;
  color: var(--color-on-primary-container);
  padding: 0 0.5rem 0 3.75rem;
  position: relative;
  background-color: var(--color-background);
}
.breadcrumb :is(a):not(.button):visited {
  color: var(--color-primary);
}
.breadcrumb :is(a) i {
  color: var(--color-on-primary-container);
}
.breadcrumb :is(a):after {
  content: "";
  position: absolute;
  top: -0.125rem;
  right: calc(-1 * var(--button-height) / 2);
  border: 1px solid var(--color-primary-container-1);
  border-bottom: 0;
  border-left: 0;
  width: var(--button-height);
  height: var(--button-height);
  transform: scale(0.707) rotate(45deg);
  z-index: 1;
  border-radius: 0 0.25rem 0 3rem;
  background: var(--color-background);
  color: var(--color-on-primary-container);
  z-index: 3;
}
.breadcrumb :is(a):first-child {
  padding-left: 3rem;
  border-radius: 0.25rem 0 0 0.25rem;
}
.breadcrumb :is(a):last-child {
  border-radius: 0 0.25rem 0.25rem 0;
  padding-right: 1rem;
  width: 100%;
}
.breadcrumb :is(a):last-child:after {
  content: none;
}
.breadcrumb :is(a):hover, .breadcrumb :is(a).active, .breadcrumb :is(a):hover:after, .breadcrumb :is(a).active:after {
  background: var(--color-primary-container-1);
  color: var(--color-on-primary-container);
}
.breadcrumb.with-num {
  counter-reset: flag;
}
.breadcrumb.with-num a:before {
  content: counter(flag);
  counter-increment: flag;
  border-radius: 100%;
  width: calc(var(--button-height) / 2);
  height: calc(var(--button-height) / 2);
  line-height: calc(var(--button-height) / 2);
  margin: 0.5rem 0;
  position: absolute;
  top: 0;
  left: 1.5rem;
  font-weight: bold;
  background: var(--color-primary-container-1);
  display: grid;
  place-items: center;
  color: var(--color-on-primary-container);
}
.breadcrumb.with-num a:first-child:before {
  left: 1rem;
}
.breadcrumb.with-num a.active:before {
  background-color: var(--color-on-primary);
}
.breadcrumb.basic {
  width: 100%;
  display: inline-flex;
  align-items: center;
  height: var(--button-height);
}
.breadcrumb.basic i {
  font-size: 1.25rem;
  margin-right: 0.25rem;
}
.breadcrumb.basic a {
  width: clamp(9.375rem, 20%, 15.625rem);
  height: 100%;
  padding: 0 0.5rem 0 2rem;
}
.breadcrumb.basic a:last-child {
  width: 100%;
  font-weight: 700;
}
.breadcrumb.basic.small {
  max-height: calc(var(--button-height) / 2);
}
.breadcrumb.basic.small a::after {
  height: 1.2rem;
  width: 1.2rem;
  top: 0;
  left: calc(100% - 0.625rem);
}

.breadcrumb :is(a:hover) {
  z-index: 2;
  background-color: var(--color-primary-container-1);
  color: var(--color-primary);
  filter: brightness(1.1);
}
.breadcrumb :is(a:hover):before {
  color: var(--color-on-primary-container);
  background: var(--color-background);
}

.breadcrumb :is(a:hover):after {
  content: "";
  position: absolute;
  top: -0.125rem;
  right: calc(-1 * var(--button-height) / 2);
  border: 1px solid var(--color-primary-container-1);
  border-bottom: 0;
  border-left: 0;
  width: var(--button-height);
  height: var(--button-height);
  transform: scale(0.707) rotate(45deg);
  z-index: 1;
  border-radius: 0 0.25rem 0 3rem;
  background: var(--color-primary-container-1);
  color: var(--color-primary);
  z-index: 2;
}

span.num {
  font-size: 0.65rem;
  color: var(--color-primary);
  font-weight: 500;
}

span.badge-wrapper {
  display: inline-grid;
  line-height: 1;
  position: relative;
}
span.badge-wrapper:has(i) {
  font-size: 2rem;
}

span.badge {
  position: absolute;
  bottom: calc(100% - 1rem);
  left: calc(100% - 0.5rem);
  vertical-align: middle;
  font-size: 0.75rem;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0 2px;
  border-radius: 1rem;
  background-color: var(--color-error);
  color: var(--color-on-error);
  display: grid;
  place-items: center;
}
span.badge.small {
  transform: scale(0.7);
}
span.badge.dot {
  font-size: 0;
  height: 0.5rem;
  min-width: 0.5rem;
  border-radius: 50%;
  left: calc(100% - 0.4rem);
  bottom: calc(100% - 0.4rem);
}

.wrapper.with-label {
  display: grid;
  grid-template-rows: 1fr 0.8rem;
  grid-template-columns: auto;
  place-items: center;
}

.button:has(.tooltip) {
  position: relative !important;
}
.button:has(.tooltip) .tooltip {
  position: absolute;
  display: none;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  transition: var(--transition);
  filter: blur(1.5rem);
  height: 0;
  width: 0;
  transform: scale(0);
  transform-origin: 50%;
  /* classes de positionnement type vuetify */
}
.button:has(.tooltip) .tooltip .slot {
  font-size: 0.7rem;
}
.button:has(.tooltip) .tooltip .close {
  display: none;
}
.button:has(.tooltip) .tooltip.toggelable button.close {
  all: unset;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 1.75rem;
  margin-top: -1.25rem;
  border-radius: 50%;
  background-color: var(--color-on-background);
  color: var(--color-background);
}
.button:has(.tooltip) .tooltip.start {
  transform: translate(-50%, -50%) !important;
  left: -70% !important;
  top: 50% !important;
}
.button:has(.tooltip) .tooltip.end {
  transform: translate(-50%, -50%) !important;
  left: 170% !important;
  top: 50% !important;
}
.button:has(.tooltip) .tooltip.top {
  transform: translate(-50%, -50%) !important;
  left: 50% !important;
  top: -100% !important;
}
.button:has(.tooltip) .tooltip.bottom {
  transform: translate(-50%, 40%) !important;
  left: 50% !important;
}
.button:has(.tooltip):hover .tooltip {
  visibility: visible;
  opacity: 1;
  filter: blur(0);
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-on-background);
  color: var(--color-background);
  width: clamp(10rem, 20%, 12.5rem);
  height: 4rem;
  box-shadow: var(--elevation);
  /* position par défaut */
  transform: translate(-50%, -50%);
  left: 160%;
  top: 50%;
}
.button:has(.tooltip):hover .tooltip:before {
  transform: rotateZ(-90deg);
  display: block;
  content: "";
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: var(--color-on-background);
  width: 1rem;
  height: 0.75rem;
  position: absolute;
  bottom: calc(50% - 0.3rem);
  left: -0.75rem;
}
.button:has(.tooltip):hover .tooltip.start:before {
  transform: rotateZ(90deg);
  left: 98%;
}
.button:has(.tooltip):hover .tooltip.top:before {
  top: 99%;
  left: 50%;
  transform: translate(-50%, 0) rotate(180deg);
}
.button:has(.tooltip):hover .tooltip.bottom:before {
  bottom: 98%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* Tooltip-version toggelable */
.wrapper.wrapper-tooltip {
  position: relative;
  --tooltip-width: 200px;
  --tooltip-height: 60px;
  --tooltip-close: 1.5rem;
}
.wrapper.wrapper-tooltip .button.close {
  display: none;
  opacity: 0;
  transition: var(--transition);
}
.wrapper.wrapper-tooltip input {
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius);
  cursor: pointer;
  position: absolute;
  z-index: 5;
  opacity: 0;
}
.wrapper.wrapper-tooltip input:after {
  position: absolute;
  display: none;
  top: -1.25rem;
  left: calc(100% + var(--tooltip-width) - 1rem);
  content: "";
  width: var(--tooltip-close);
  height: var(--tooltip-close);
  border-radius: 50%;
  z-index: 300;
}
.wrapper.wrapper-tooltip .tooltip {
  all: unset;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
  font-size: 0.7rem;
  transition: var(--transition);
}
.wrapper.wrapper-tooltip .tooltip:before {
  display: block;
  content: "";
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotateZ(-90deg);
  background-color: var(--color-on-background);
  width: 1rem;
  height: 0.75rem;
  position: absolute;
  bottom: calc(50% - 0.3rem);
  left: -0.75rem;
}

.wrapper.wrapper-tooltip input:checked ~ .tooltip {
  display: grid;
  border-radius: 0.5rem;
  background-color: var(--color-on-background);
  color: var(--color-background);
  width: var(--tooltip-width);
  height: var(--tooltip-height);
  opacity: 1;
  visibility: visible;
}

.wrapper.wrapper-tooltip input:checked:after {
  display: grid;
}

.wrapper.wrapper-tooltip input:checked ~ .button.close {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  top: -0.75rem;
  left: calc(100% + var(--tooltip-width) - 0.75rem);
  width: var(--tooltip-close);
  height: var(--tooltip-close);
  opacity: 1;
  border-radius: 50%;
}
.wrapper.wrapper-tooltip input:checked ~ .button.close i {
  padding: 0;
}

.sticker {
  display: inline-block;
  padding: 0.25rem 0.4rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  background-color: var(--color-on-background);
  color: var(--color-background);
  border-radius: 1rem;
}
.sticker.primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.sticker.secondary {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}
.sticker.tertiary {
  background-color: var(--color-tertiary);
  color: var(--color-on-tertiary);
}
.sticker.success {
  background-color: var(--color-success);
  color: var(--color-on-success);
}
.sticker.error {
  background-color: var(--color-error);
  color: var(--color-on-error);
}

.snackbar {
  display: grid;
  grid-template-rows: auto;
  align-items: center;
  min-height: 3rem;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0px 1px 5px 0 var(--color-primary);
  grid-template-columns: 1fr 2.5rem;
  padding: 0 0.5rem 0 1rem;
  margin: 1rem auto 1rem;
  width: clamp(320px, 98%, var(--dialog-max-width));
  cursor: pointer;
}
.snackbar button {
  color: var(--color-on-primary);
}
.snackbar.multiligne.with-action {
  padding: 1rem 0.5rem 0 1rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto 2.5rem;
}
.snackbar.multiligne.with-action .content {
  line-height: 1.5;
}
.snackbar.multiligne.with-action button {
  justify-self: end;
}
.snackbar.with-action {
  grid-template-columns: 1fr auto 2.5rem;
}
.snackbar.fixed-top {
  position: fixed;
  top: 1rem;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, 50%);
}
.snackbar.fixed-bottom {
  position: fixed;
  bottom: 1rem;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, 50%);
}
.snackbar.outlined {
  border: 1px solid var(--color-primary);
  background-color: var(--color-on-primary);
  color: var(--color-primary);
  box-shadow: none;
}
.snackbar.primary {
  box-shadow: 0px 1px 5px 0 var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.snackbar.primary button {
  color: var(--color-on-primary);
}
.snackbar.secondary {
  box-shadow: 0px 1px 5px 0 var(--color-secondary);
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}
.snackbar.secondary button {
  color: var(--color-on-secondary);
}
.snackbar.tertiary {
  box-shadow: 0px 1px 5px 0 var(--color-tertiary);
  background-color: var(--color-tertiary);
  color: var(--color-on-tertiary);
}
.snackbar.tertiary button {
  color: var(--color-on-tertiary);
}
.snackbar.success {
  box-shadow: 0px 1px 5px 0 var(--color-success);
  background-color: var(--color-success);
  color: var(--color-on-success);
}
.snackbar.success button {
  color: var(--color-on-success);
}
.snackbar.error {
  box-shadow: 0px 1px 5px 0 var(--color-error);
  background-color: var(--color-error);
  color: var(--color-on-error);
}
.snackbar.error button {
  color: var(--color-on-error);
}

body {
  font-family: "Fredoka", sans-serif;
  color: #ffffff;
  min-height: 100vh;
  font-size: 1.1rem;
}

main {
  max-width: 100%;
  padding: 0;
}

ul,
li {
  list-style-type: disc;
}

ul {
  padding-left: 1em;
}

.wip-tmp {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.5em;
}
.wip-tmp #logo {
  width: 20%;
  min-width: 96px;
  max-width: 320px;
  height: auto;
}
.wip-tmp p {
  margin: 2em;
}
.wip-tmp #maintenance {
  width: 33%;
  min-width: 300px;
  max-width: 512px;
}

#e404 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 3em 0;
  font-size: 6em;
  font-weight: bolder;
  text-shadow: 0 0 0.5em #98a3ac;
  text-align: center;
}

.hero {
  background-color: #264153;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 1024px) {
  .hero {
    min-height: 60vh;
    --background-image-lazy: url("/imgs/Artboard.webp");
    background-image: var(--background-image-lazy);
  }
}
.hero .hero-content {
  font-size: 5vmin;
  font-weight: 500;
}
.hero .hero-content .catch-phrase {
  color: #ffffff;
}
.hero .hero-content .hit {
  color: #f5793b;
  text-shadow: 0 0 0.2em #000000;
}

h1,
h2 {
  display: block;
  padding: 0.5em;
  text-align: center;
  color: #f5793b;
}

h1 {
  font-size: 1.5em;
  font-weight: 500;
}

h2 {
  font-size: 1.2em;
  font-weight: 500;
}

h3 {
  font-size: 1.1em;
  font-weight: 500;
  text-transform: uppercase;
}

p strong {
  font-weight: 600;
}

@media screen and (min-width: 1024px) {
  h1 {
    font-size: 2.1em;
  }
  h2 {
    font-size: 1.8em;
  }
}
.sub-title {
  display: block;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  color: var(--color-primary);
}

.container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
}
.container .content {
  display: block;
  width: 100%;
}
.container .illustration {
  display: none;
  max-width: 960px;
  padding: 2em;
}
.container .illustration img {
  max-width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .container .content {
    width: 66.66666%;
  }
  .container .illustration {
    display: block;
    position: relative;
    width: 33.33333%;
  }
  .container#contact_form .content {
    width: 50%;
  }
  .container#contact_form .illustration {
    width: 50%;
  }
}

header {
  position: fixed;
  width: 100%;
  background-color: #2d4151;
  top: 0;
  z-index: 1;
}
header a#logo {
  display: flex;
  align-items: center;
  color: #ffffff !important;
  padding: 0.5em 1em;
  font-size: 1.5em;
}
@media screen and (min-width: 1024px) {
  header a#logo {
    font-size: 1.8em;
  }
}
@media screen and (min-width: 1280px) {
  header a#logo {
    font-size: 2em;
  }
}
header a#logo img {
  margin-right: 0.5em;
  width: 32px;
  height: auto;
}
@media screen and (min-width: 1024px) {
  header a#logo img {
    width: 42px;
  }
}
header a#logo:hover {
  text-decoration: none;
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header nav {
  display: flex;
  align-items: center;
}
header nav button {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  margin-right: 1em;
}
header nav button#close-menu {
  width: 100%;
  padding: 1em 1em 0.5em 0.5em;
  text-align: right;
  border-bottom: 1px #61707d solid;
}
header nav .main-menu {
  display: flex;
  width: 300px;
  position: fixed;
  top: 0;
  background-color: #2d4151;
  height: 100vh;
  overflow: auto;
  flex-direction: column;
  transition: all 250ms ease-out;
  right: -300px;
  border-left: 1px #61707d solid;
}
header nav .main-menu.active {
  right: 0;
}
header nav a {
  text-transform: uppercase;
  color: #ffffff !important;
  font-size: 1.1em;
  padding: 0.6em 1em;
}
@media screen and (min-width: 1280px) {
  header nav a {
    font-size: 1.2em;
  }
}
header nav a:first-of-type {
  font-weight: 500;
}
header nav a:last-of-type {
  margin: 0 0.25em;
  background-color: var(--color-primary);
  border-radius: 12px;
  padding: 0.33em 0.8em;
  font-weight: 500;
  transition: all 350ms ease-out;
  border: 1px var(--color-primary) solid;
}
header nav a:last-of-type:hover {
  text-decoration: none;
  background-color: #f5793b;
  border: 1px #ffffff solid;
}
@media screen and (min-width: 1024px) {
  header nav button {
    display: none;
  }
  header nav .main-menu {
    width: auto;
    position: relative;
    height: auto;
    flex-direction: row;
    right: 0;
    border-left: none;
  }
  header nav a {
    padding: 0.33em 0.66em;
  }
}

footer {
  color: #264153;
  padding-bottom: 3em;
}
footer #blog-footer-holder {
  display: flex;
  justify-content: center;
  padding: 2em 0;
  border-bottom: 3px #fe701a solid;
}
footer #blog-footer {
  background-color: #264153;
  color: #f3efe8;
  padding: 2em;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  footer #blog-footer {
    width: auto;
    border-radius: 20px;
  }
}
footer #blog-footer a {
  display: inline-block;
  padding: 0.25em 0;
  color: #f3efe8;
  text-decoration: underline !important;
}
footer #blog-footer a:visited {
  color: #f3efe8;
}
footer #blog-footer a:hover {
  color: #feb080;
}
footer .blog-last-title {
  display: block;
  font-size: 1.1em;
  padding-bottom: 0.5em;
}
footer .container {
  padding: 3em;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
footer .container div {
  width: 100%;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  footer .container {
    flex-direction: row;
  }
  footer .container div {
    width: 50%;
    text-align: center;
  }
}
footer .sitemap {
  margin-top: 2em;
}
@media screen and (min-width: 1024px) {
  footer .sitemap {
    margin-top: 0;
  }
}
footer .sitemap a {
  color: #264153;
  text-decoration: underline !important;
}
footer .sitemap a:visited {
  color: #264153;
}
footer .sitemap a:hover {
  color: #feb080;
}
footer .summary {
  line-height: 140%;
}
footer .summary .name {
  font-weight: 500;
}
footer .summary .work {
  display: inline-block;
  margin-bottom: 0.5em;
}
footer .summary a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
footer .summary a span {
  margin-right: 0.25em;
}
footer .sitemap a {
  display: inline-block;
  padding: 0.25em;
}
footer .social-links {
  display: flex;
  padding: 2em;
  justify-content: center;
  align-items: center;
}
footer .social-links a {
  display: block;
  padding: 1em;
  border-radius: 0.5em;
  transition: all 250ms ease-out;
}
footer .social-links a svg {
  width: 2em;
  transition: all 250ms ease-out;
}
footer .social-links a:hover {
  background-color: #f5fdff;
}
footer .cookies {
  padding: 1em;
  border-bottom: 1px #264153 solid;
}
footer .signature {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2em 0;
  padding: 0 1em;
}
footer .signature img {
  max-width: 64px;
  margin-right: 1em;
}

#container {
  background-color: #e8eff3;
  padding-bottom: 3em;
  min-height: 80vh;
  margin-top: 3.8em;
  background: linear-gradient(-45deg, #e8eff3, #f3efe8, #d8dee2, #e0dcd5);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.real-card {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 1em;
  width: 300px;
  align-items: center;
  margin: 2em;
  box-shadow: 0 0 1em rgba(255, 255, 255, 0.1);
  transition: all 250ms ease-out;
}
.real-card .real-card-title {
  color: #f3efe8;
  font-size: 1.1em;
  font-weight: 500;
}
.real-card .real-card-bottom {
  color: #ccc9c4;
  font-size: 0.9em;
}
.real-card img {
  display: block;
  margin: 0.25em 0;
  border-radius: 12px;
  aspect-ratio: 16/9;
}
.real-card:hover {
  box-shadow: 0 0 2em rgba(255, 255, 255, 0.15);
  transform: scale(1.02);
}

.reals-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.hidden {
  display: none;
}

.pitch {
  font-size: 1.1em;
}

.content-area {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 1em;
  color: #2d4151;
}
.content-area.inverted {
  position: relative;
  background-color: #264153;
  color: #ffffff;
  margin: 5em 0;
}
.content-area.inverted::before {
  content: "";
  width: 100%;
  height: 80px;
  position: absolute;
  top: -48px;
  left: 0;
  background: #264153;
  transform: skewY(-1deg);
}
.content-area.inverted::after {
  content: "";
  width: 100%;
  height: 80px;
  position: absolute;
  bottom: -48px;
  left: 0;
  background: #264153;
  transform: skewY(-1deg);
}
.content-area .container {
  padding: 0 1em;
}
@media screen and (min-width: 1024px) {
  .content-area {
    padding: 3em;
  }
}

.contact-cta-zone {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-cta {
  display: flex;
  align-items: center;
  background-color: var(--color-primary);
  border-radius: 1em;
  color: #ffffff;
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.8em 1.5em;
  cursor: pointer;
  transition: all 250ms ease-out;
  text-decoration: none;
  border: none;
}
@media screen and (min-width: 1024px) {
  .contact-cta {
    font-size: 1.2em;
  }
}
.contact-cta:visited {
  color: #ffffff;
}
.contact-cta:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #f5793b;
}
.contact-cta span {
  margin-right: 0.5em;
}
.contact-cta:disabled {
  cursor: not-allowed;
  background-color: #666462;
}

.contact_area {
  display: block;
  padding: 0.5em;
}
.contact_area label {
  display: block;
}
.contact_area input[name=ville_ref] {
  display: none;
}
.contact_area input[type=text], .contact_area input[type=email], .contact_area textarea {
  width: 100%;
  border-radius: 6px;
  padding: 0.5em 0.8em;
  border: 1px #cccccc solid;
  outline: none;
  box-shadow: 0 0 0.5em rgba(56, 75, 91, 0.1215686275);
  transition: all 350ms ease-out;
}
.contact_area input[type=text]:focus, .contact_area input[type=email]:focus, .contact_area textarea:focus {
  box-shadow: 0 0 0.5em rgba(56, 75, 91, 0.2470588235);
  border: 1px #aaaaaa solid;
}
.contact_area textarea {
  min-height: 150px;
  margin: 0.5rem 0.25rem;
}
.contact_area .dyn_area {
  padding: 0 0.5em;
}
.contact_area .error {
  display: none;
  align-items: center;
  border: 1px #61707d solid;
  border-radius: 6px;
  padding: 0.6em 1.2em;
  background-color: #ffffff;
  font-weight: 500;
  color: #2d4151;
}
.contact_area .error span {
  margin-right: 0.5em;
}
.contact_area .error#global_error {
  display: none;
}
.contact_area .success {
  display: none;
  align-items: center;
  border: 1px #4c805f solid;
  border-radius: 6px;
  padding: 0.6em 1.2em;
  background-color: #ffffff;
  font-weight: 500;
  color: #2d5149;
}
.contact_area .success span {
  margin-right: 0.5em;
}
.contact_area .error_msg {
  display: none;
  padding: 0 0.33em 0.33em 0.33em;
  font-weight: 500;
  margin: 0;
  color: #853838;
}

.in_error input[type=text], .in_error input[type=email], .in_error textarea {
  border: 1px #bb5757 solid;
}
.in_error .contact_check {
  border-left: 1px #bb5757 solid;
  border-right: 1px #bb5757 solid;
}

.contact_title {
  display: block;
  font-size: 1.1em;
  font-weight: 500;
  padding-left: 0.25em;
}

.contact_required {
  font-weight: normal;
  color: #fe701a;
}

#contact_identity_zone {
  display: flex;
  justify-content: space-between;
}
#contact_identity_zone label {
  width: 49%;
  color: #888888;
}

.contact_check {
  display: flex;
  align-items: center;
  padding: 0 0.25em 0 0.5em;
  border-radius: 6px;
  line-height: 1.6;
  cursor: pointer;
}
.contact_check input {
  margin-right: 0.5em;
}
.contact_check:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.contact_submit {
  display: flex;
  justify-content: center;
  margin-top: 2em;
}

.full-content {
  width: 100%;
}

#prestas_columns,
#benefits-columns {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
#prestas_columns div,
#benefits-columns div {
  width: 100%;
  padding: 1em;
}
#prestas_columns p,
#benefits-columns p {
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  #prestas_columns,
  #benefits-columns {
    flex-direction: row;
  }
  #prestas_columns div,
  #benefits-columns div {
    width: 33.33333%;
  }
}
#prestas_columns .end_text,
#benefits-columns .end_text {
  width: 50%;
  text-align: center;
  margin: 1em auto 2em auto;
  border-bottom: 1px #ffffff solid;
}
#prestas_columns .material-symbols-outlined,
#benefits-columns .material-symbols-outlined {
  font-size: 5em;
}

@media screen and (min-width: 1024px) {
  #benefits-columns div {
    width: 50%;
  }
}

#presentation-perso {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 1.2em 0;
  padding: 1em;
  background-color: #e8eff3;
  color: #264153;
  border-radius: 125px 125px 12px 12px;
}
#presentation-perso img {
  max-width: 192px;
  aspect-ratio: 1;
  border-radius: 100px;
  box-shadow: 0 0 1em #264153;
  border: 4px var(--color-primary) solid;
}
#presentation-perso p {
  padding: 0 1em;
  font-size: 1em;
}
@media screen and (min-width: 1024px) {
  #presentation-perso {
    flex-direction: row;
    margin: 0;
    border-radius: 125px;
  }
  #presentation-perso p {
    padding: 0 2em;
    font-size: 1.1em;
  }
}

.askme-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  background-color: #2d4151;
  border-radius: 5em;
  padding: 2em;
  font-size: 1.15em;
  margin: 2em 0.25em 0 0.25em;
}
@media screen and (min-width: 1024px) {
  .askme-card {
    font-size: 1.5em;
  }
}
.askme-card a {
  color: #ffffff !important;
  font-weight: 500;
  font-size: 1.1em;
  text-decoration: underline;
}

.letter-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.animated-mail {
  position: absolute;
  height: 150px;
  width: 200px;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  transition: 0.4s;
}
.animated-mail .body {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 200px;
  border-color: transparent transparent #e95f55 transparent;
  z-index: 2;
}
.animated-mail .top-fold {
  position: absolute;
  top: 50px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 100px 0 100px;
  -webkit-transform-origin: 50% 0%;
  -webkit-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  -moz-transform-origin: 50% 0%;
  -moz-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  transform-origin: 50% 0%;
  transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  border-color: #cf4a43 transparent transparent transparent;
  z-index: 2;
}
.animated-mail .back-fold {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 100px;
  background: #cf4a43;
  z-index: 0;
}
.animated-mail .left-fold {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 100px;
  border-color: transparent transparent transparent #e15349;
  z-index: 2;
}
.animated-mail .letter {
  left: 20px;
  bottom: 0px;
  position: absolute;
  width: 160px;
  height: 60px;
  background: white;
  z-index: 1;
  overflow: hidden;
  -webkit-transition: 0.4s 0.2s;
  -moz-transition: 0.4s 0.2s;
  transition: 0.4s 0.2s;
}
.animated-mail .letter .letter-border {
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(-45deg, #cb5a5e, #cb5a5e 8px, transparent 8px, transparent 18px);
}
.animated-mail .letter .letter-title {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 40%;
  background: #cb5a5e;
}
.animated-mail .letter .letter-context {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 20%;
  background: #cb5a5e;
}
.animated-mail .letter .letter-stamp {
  margin-top: 30px;
  margin-left: 120px;
  border-radius: 100%;
  height: 30px;
  width: 30px;
  background: #cb5a5e;
  opacity: 0.3;
}

.shadow {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 400px;
  height: 30px;
  transition: 0.4s;
  transform: translateX(-50%);
  -webkit-transition: 0.4s;
  -webkit-transform: translateX(-50%);
  -moz-transition: 0.4s;
  -moz-transform: translateX(-50%);
  border-radius: 100%;
  background: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

#contact_form:hover .animated-mail {
  transform: translateY(50px);
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
}
#contact_form:hover .animated-mail .top-fold {
  transition: transform 0.4s, z-index 0.2s;
  transform: rotateX(180deg);
  -webkit-transition: transform 0.4s, z-index 0.2s;
  -webkit-transform: rotateX(180deg);
  -moz-transition: transform 0.4s, z-index 0.2s;
  -moz-transform: rotateX(180deg);
  z-index: 0;
}
#contact_form:hover .animated-mail .letter {
  height: 180px;
}
#contact_form:hover .shadow {
  width: 250px;
}

.anim-container {
  font-weight: 500;
  overflow: hidden;
  height: 76px;
}
.anim-container .anim-list {
  margin-top: 0;
  text-align: left;
  list-style: none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.anim-container .anim-list .hit {
  line-height: 76px;
  margin: 0;
}

.articles {
  width: 100%;
  color: #264153;
  padding: 0 0.5em;
}
.articles h2 {
  margin-top: 3em;
}
.articles article {
  font-size: 1.1em;
}
.articles article a {
  color: #264153;
  text-decoration: underline;
}
.articles table {
  border-collapse: collapse;
}
.articles table td, .articles table th {
  padding: 1em;
}

.tbd {
  display: block;
  margin: 1em auto;
  padding: 1em 2.5em;
  text-align: center;
  background-color: #e6eef3;
  color: #264153;
  font-size: 1.5em;
  border-radius: 1em;
}
@media screen and (min-width: 1024px) {
  .tbd {
    margin: 2em auto;
    padding: 2em 3.5em;
    font-size: 2em;
  }
}
@media screen and (min-width: 1440px) {
  .tbd {
    margin: 3em auto;
    padding: 3em 5em;
    font-size: 2.5em;
  }
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.CookieBanner {
  display: none;
  visibility: hidden;
  opacity: 0;
  background-color: #264153;
  border-top: 1px #fe701a solid;
  padding: 1em 0.5em;
  font-size: 1.2em;
  box-shadow: 0 0 2em #000000;
  transition: all 250ms ease-out;
}
.CookieBanner-content {
  font-size: 0.875rem;
}
.CookieBanner-content a {
  color: #ffffff !important;
  text-decoration: underline;
}
.CookieBanner-dismiss {
  display: inline-block;
  font-size: 0.875rem;
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline;
}
.CookieBanner-buttonWrapper {
  display: flex;
  height: 100%;
  align-items: baseline;
  flex-wrap: wrap;
}
.CookieBanner-button {
  width: 100%;
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  .CookieBanner-button {
    width: auto;
    min-width: 160px;
    margin-right: 8px;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.CookieBanner-button:last-child {
  margin-right: 0;
  margin-bottom: 0;
}

.modal-footer {
  text-align: center;
  margin-top: 2em;
}

.cookie-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cookie-group {
  margin-top: 1.5rem;
  border: 1px #888888 solid;
  border-radius: 12px;
  padding: 1em;
  cursor: pointer;
  transition: all 250ms ease-out;
}
.cookie-group:hover, .cookie-group.active {
  border: 1px var(--color-primary) solid;
}
.cookie-group.active {
  background-color: var(--color-primary-container);
}

.cookie-label {
  cursor: pointer;
}

.CookieModal-description {
  color: #264153;
}

.CookieModal-cookies {
  color: #264153;
  margin-top: 0.5em;
}

#contact_form {
  color: #2d4151;
}
#contact_form label {
  color: #2d4151;
}
#contact_form .form-text {
  display: block;
  padding: 0 0.75em;
}

#contact_identity_zone input {
  margin-bottom: 0;
}

.cgv h3 {
  margin-top: 1em;
}

.blog-container {
  max-width: 1280px;
  flex-direction: column;
}

.article_card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1em;
  padding: 1em;
  border-radius: 1em;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.article_card h2 {
  text-align: left;
  font-size: 1.5em;
}
.article_card p, .article_card .asP {
  padding: 1em;
  border-radius: 1em;
  background-color: rgba(0, 0, 0, 0.05);
}
.article_card p strong, .article_card .asP strong {
  font-weight: 500;
}
.article_card .article-cta {
  display: inline-block;
  align-self: flex-end;
  font-weight: 500;
  padding: 0.15em 0.25em;
  transition: all 250ms ease-out;
}
.article_card:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.article_card:hover .article-cta {
  text-decoration: underline;
  color: #cf4a43;
}

article.blog {
  width: 100%;
  color: #264153;
}
article.blog strong {
  font-weight: 500;
}
article.blog h1 {
  font-size: 1.6em;
  text-align: left;
  margin-bottom: 0;
  padding-bottom: 0.25em;
}
article.blog h2 {
  text-align: left;
}
article.blog h3 {
  position: relative;
  color: #f5793b;
  margin-bottom: 0.33em;
  padding-left: 2.25em;
}
article.blog h3 .num {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: -0.5em;
  left: -0.55em;
  width: 2em;
  height: 2em;
  background-color: #f5793b;
  color: #ffffff;
  border-radius: 50%;
  font-size: 1.05em;
  text-align: center;
  box-shadow: 0.1em 0.15em 0.33em #db5715 inset;
}
article.blog .sub-title {
  padding-left: 1em;
  font-size: 0.9em;
}
article.blog p.summary {
  padding: 1em;
  border-radius: 1em;
  background-color: rgba(0, 0, 0, 0.05);
}
article.blog div.content {
  width: 100%;
  margin: 1em 0;
  padding: 1em;
}
article.blog .blog-content {
  display: flex;
  align-items: center;
}
article.blog .blog-content .blog-text {
  display: flex;
  flex-wrap: wrap;
  width: 66%;
  padding-right: 2em;
}
article.blog .blog-content .blog-picture {
  width: 33%;
}
article.blog .article-point {
  padding: 1em;
  width: 100%;
  text-align: justify;
  background-color: #f5f5f5;
  border-radius: 2em;
  margin-bottom: 2em;
  box-shadow: 0 0 0.5em #dddddd;
}
@media screen and (min-width: 1024px) {
  article.blog .article-point {
    width: 100%;
  }
}
article.blog .article-point p, article.blog .article-point .asP {
  margin: 0;
  border-left: 2px #f5793b solid;
  padding-left: 2em;
  margin-left: 0.5em;
}
article.blog .article-point a {
  font-weight: 500;
  color: #f5793b;
  text-decoration: underline;
}
article.blog .article-point li {
  margin-top: 0.25em;
}
article.blog .emphasis {
  font-size: 1.1em;
  padding: 1em;
}
article.blog .blog-illustration {
  max-width: 512px;
  margin: 0 auto;
}

#partenaires {
  border-top: 1px #cccccc solid;
}
#partenaires .carousel {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: space-around;
}
@media screen and (min-width: 1024px) {
  #partenaires .carousel {
    flex-direction: row;
  }
}
#partenaires .marque {
  display: flex;
  min-width: 150px;
  min-height: 150px;
  align-items: center;
  justify-content: center;
}
#partenaires img {
  width: 120px;
}

.blog-decoration {
  border-bottom: 1px #cccccc solid;
  border-radius: 20px;
  box-shadow: 3em 2em 3em #bbbbbb;
  padding-bottom: 3em;
  margin-bottom: 5em;
}

.testimony-zone {
  width: 100%;
}

.testimony-content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
  overflow: auto;
  padding: 2em 0;
}

.testimony-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 500px;
  max-width: 90%;
  overflow: auto;
  border: 2px #264153 solid;
  outline: 10px rgba(0, 0, 0, 0.15) solid;
  border-radius: 2em;
  background-color: #f3efe8;
  aspect-ratio: 16/9;
  font-size: 1.2em;
  padding: 1em;
}

@-webkit-keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
  }
  33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
  }
  49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
  }
  66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
  }
  83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
  }
}
@-o-keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
  }
  33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
  }
  49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
  }
  66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
  }
  83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
  }
}
@-moz-keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
  }
  33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
  }
  49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
  }
  66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
  }
  83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
  }
}
@keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
  }
  33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
  }
  49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
  }
  66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
  }
  83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
  }
}