@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400..500&display=swap');



/* FONTS */

/* Font serif */

/* Font sans */

@font-face {
  font-family: "Cera Pro";
  src: local("Cera Pro"), url("/assets/fonts/cerapro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cera Pro";
  src: local("Cera Pro"), url("/assets/fonts/cerapro-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cera Pro";
  src: local("Cera Pro"), url("/assets/fonts/cerapro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* RESET */

/* Modified version of Modern CSS Reset by Piccalilli https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */

h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */

h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input, button,
textarea, select {
  -webkit-appareance: none;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
}

/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */

:target {
  scroll-margin-block: 5ex;
}

/* CSS VARIABLES */

:root {

  /* Fonts */
  --font-sans: "Cera Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* Colors */
  --color-white-05: hsla(0, 0%, 100%, .05);/* White 5 */
  --color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */
  --color-white-15: hsla(0, 0%, 100%, .15);/* White 15 */
  --color-white-20: hsla(0, 0%, 100%, .2); /* White 20 */
  --color-white-50: hsla(0, 0%, 100%, .5); /* White 50 */
  --color-white-70: hsla(0, 0%, 100%, .7); /* White 70 */
  --color-white-90: hsla(0, 0%, 100%, .9); /* White 90 */
  --color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
  --color-white: var(--color-white-100); /* White */
  --color-grey-50:  hsla(0, 0%, 95%, 1); /* Light Grey */
  --color-grey-200: hsla(0, 0%, 89%, 1); /* Grey - 01 */
  --color-grey-300: hsla(0, 0%, 74%, 1);
  --color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
  --color-grey-500: hsla(180, 1%, 51%, 1);
  --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
  --color-grey-800: hsla(180, 2%, 22%, 1); /* Grey - 04 */
  --color-black-10: hsla(0, 0%, 10%, .1); /* Black 10 */
  --color-black-20: hsla(0, 0%, 10%, .2); /* Black 20 */
  --color-black-50: hsla(0, 0%, 10%, .5); /* Black 50 */
  --color-black-70: hsla(0, 0%, 10%, .7); /* Black 70 */
  --color-black-100: hsla(0, 0%, 10%, 1); /* Black 100 */
  --color-black: var(--color-black-100); /* Black */
  --color-primary-h: 177;
  --color-primary-s: 100%;
  --color-primary-l: 29%;
  --color-primary-10: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .1); /* Focus 10% */
  --color-primary-20: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .2); /* Focus 20% */
  --color-primary-40: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .4); /* Focus 40% */
  --color-primary-50: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .5); /* Focus 50% */
  --color-primary-70: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .7); /* Focus 70% */
  --color-primary-100: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 1); /* Focus 100% */
  --color-primary: var(--color-primary-100); /* Focus */
  --color-primary-hover: hsla(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 7%), 1); /* Focus - Accent */
  --color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
  --color-brand: var(--color-brand-100); /* Brand */
  --color-dtl-15: hsla(127, 47%, 58%, 0.15);
  --color-dtl-100: hsla(157, 100%, 29%, 1);
  --color-dtl: var(--color-dtl-100);
  --color-background: var(--color-white);
  --color-text: var(--color-black);
  --color-focus-ring: var(--color-primary-50);
  --color-disabled: var(--color-grey-400);

  /* Space scale */
  --space-1: .275em; /* typographic space */
  --space-4: .25rem;
  --space-8: .5rem;
  --space-12: .75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;

  /* Type scale */
  --text-xs: .75rem;  /* 12px */
  --text-sm: .875rem; /* 14px */
  --text-md: 1rem;    /* 16px */
  --text-lg: 1.5rem;  /* 24px */
  --text-xl: 2rem;    /* 32px */

  /* Leading */
  --leading-none: 1;
  --leading-sm: 1.25;
  --leading-md: 1.4285714286; /* 20/14 */
  --leading-lg: 1.5; /* 24/16 */

  /* Tracking */
  --tracking-wide: 0.01em;
  --tracking-wider: 0.02em;

  /* Layout */
  --gutter: 32px;
  --header-height: 3.5rem; /* 56px */
  --sidebar-width: 22.25rem; /* 356px */
  --flow-space: 1rem;
  --auto-grid-placement: auto-fill;
  --gap: var(--space-16);
  --wrapper-max-width: 52.875rem; /* 846px */
  --p-scrollbar-width: var(--gutter);

  /* Borders */
  --rounded-xs: 1px;
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-2xl: 20px;
  --rounded-full: 9999px;
  --border-width: 1px;
  --border-color: var(--color-black);
  --border: var(--border-width) solid var(--border-color);

  /* Shadows */
  --shadow: 0px 4px 20px 0px var(--color-black-10);  
  
  /* Prose */
  --max-width: 64ch;
  
  /* Transitions */
  --timing: 200ms;
  --easing: ease;

}

/* GLOBAL CSS */

/* GLOBAL CSS */

html {
  font-size: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  font: var(--text-md)/var(--leading-md) var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-rendering: optimizeSpeed;
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig"; 
  -webkit-font-feature-settings: "liga", "clig"; 
  font-feature-settings: "liga", "clig";
  background-color: var(--color-grey-50);
  color: var(--color-text, currentColor);
  accent-color: var(--color-primary);
  padding: var(--gutter);
}

/* Scrollbar */

* {
  scrollbar-color: hsla(180, 1%, 51%, .7) transparent;
}

/* If an element is [hidden] it needs to be max priority */

.hidden, [hidden] {
  display: none !important;
}

/* Disabled state */

.disabled, [disabled] {
  opacity: var(--alpha);
}

/* Placeholder */

::placeholder {
  font: inherit;
  color: var(--color-grey-700) !important;
}

/* Main */

main {
  position: relative;
  min-height: calc(100vh - var(--gutter) * 2);
}

main > header {
  --column-gap: 1rem;
  --row-gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* Section */

section {
  position: relative;
  width: 100%;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
  font-size: var(--text-md);
  font-weight: 400;
  text-wrap: balance;
  position: relative;
}

h1 > a, 
h2 > a, 
h3 > a, 
h4 > a, 
h5 > a, 
h6 > a {
  text-decoration: none;
  border-bottom: none;
}

*:not(.sr-only) + h2,
*:not(.sr-only) + h3 {
  margin-top: var(--space-4);
}

/* General typesetting */

p {
  max-width: 40em;
}

/* Lists */

ul:not([class]),
ol:not([class]) {
  list-style: none;
  padding-left: 0;
}

/* Blockquotes */

blockquote {
  padding-left: 0;
}

blockquote > * {
  padding-left: var(--space-12);
}

/* Separators */

hr {
  border: none;
  border-top: var(--border);
  margin-inline: 0;
}

hr,
hr + * {
  --flow-space: var(--space-4);
}

/* Sub and sup */

sub,
sup {
  font-size: 0.75em;
}

sub {
  vertical-align: sub;
}

sup {
  vertical-align: middle;
  position: relative;
  top: -1ex;
}

/* Details */

details {
  position: relative;
}

summary {
  -webkit-appearance: none;
  list-style: none;
  cursor: pointer;
  width: fit-content;
  display: flex;
  -webkit-user-select: none;
  user-select: none;
}

summary::-webkit-details-marker,
summary::marker {
 display: none; 
 content: "";
}

summary::after {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 2.5rem;
  background-color: var(--color-background);
  background-image: var(--icon-summary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem;
  position: absolute;
  right: 0;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

/* Media */

figure {
  width: fit-content;
  height: fit-content;
}

figcaption {
  font-size: var(--text-md);
  margin: .16666667em 0;
  position: relative;
}

figcaption::before {
  float: right;
  margin-left: var(--gap);
}

figure + p {
  margin-top: var(--space-4);
}

video {
  background-color: var(--color-gray);
  max-width: 100%;
  border-radius: var(--rounded-md);
}

/* Selects images that are likely to have a transparent BG and applies a */

/* theme-driven mask to them */

img[src$='.svg'],
img[src$='.png'] {
  background-color: transparent;
}

img {
  object-fit: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

[data-ratio="auto"] img {
  height: auto;
}

/* Links */

a {
  color: inherit;
  text-decoration: none;
}

a.link-full::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: outline var(--timing) var(--easing);
}

a.link-full:focus-visible {
  outline-width: 0;
}

a.link-full:focus-visible::after {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  text-decoration: underline;
}

/* Form, Input, Buttons */

form {
  display: flex;
  gap: var(--space-4);
}

input {
  font: inherit;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border: 1px solid var(--color-grey-200);
  cursor: pointer;
  --icon-color: var(--color-grey-400);
}

input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

input[type="checkbox"]:hover {
  border-color: var(--color-black-20);
  --icon-color: var(--color-grey-800);  
}

input[type="checkbox"]::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 1em;
  mask-image: var(--icon-check-2);
}

input[type="checkbox"]:checked::before {
  --icon-color: white;
}

button {
  cursor: pointer;
}

.field {
  position: relative;
}

[aria-invalid="true"]:focus-visible {
  outline-color: #ef8d8d;
}

button[aria-controls*="password"] {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  max-height: unset;
  height: 2rem;
  padding: var(--space-8);
  border: none;
}

button[aria-controls*="password"] > svg {
  width: 1rem;
  height: 1rem;
}

/* General interactive states */

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
}

/* High contrast selection style */

::selection {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Hide canvas */

canvas {
  display: none;
}

/* COMPOSITIONS */

/* AUTO-GRID COMPOSITION */

.auto-grid {
  --column-gap: var(--gap);
  --row-gap: var(--gap);
  display: grid;
  align-content: flex-start;
  grid-template-columns: repeat(
    var(--auto-grid-placement, auto-fill),
    minmax(var(--min, 50%), 1fr)
  );
  grid-gap: var(--row-gap) var(--column-gap);
  gap: var(--row-gap) var(--column-gap);
}

/* LAYOUT GRID */

.grid {
  --gap: var(--gutter);
  --column-gap: var(--gap);
  --row-gap: var(--gap);
  display: -ms-grid;
  display: grid;
  grid-gap: var(--column-gap) var(--row-gap);
  gap: var(--column-gap) var(--row-gap);
  grid-template-columns: 1fr;
  position: relative;
  width: 100%;
}

.grid > * {
  margin-bottom: var(--gap);
  display: flex;
  flex-direction: column;
  justify-content: var(--justify-content, flex-start);
  align-items: var(--align-items, baseline);
}

.grid-center {
  display: -ms-grid;
  display: grid;
  place-items: center;
  position: relative;
}

@media (min-width: 35rem) { /* >= 560px */

  .grid {
    -ms-grid-columns: repeat(6, 1fr);
    grid-template-columns: repeat(6, 1fr);
  }

  .grid > * {
    -ms-grid-column: span 6;
    grid-column: span 6;
  }

  .grid > *[style*="--columns:3"] {
    -ms-grid-column: span 3;
    grid-column: span 3;
  }

}

@media (min-width: 67.5rem) { /* >= 1080px */

  .grid {
    -ms-grid-columns: repeat(12, 1fr);
     grid-template-columns: repeat(12, 1fr);
  }

  .grid > * {
    -ms-grid-column: span var(--columns);
    grid-column: span var(--columns);
  }

}

/* FLEX-COLUMNS COMPOSITION */

.flex-columns {
  display: flex;
  flex-direction: column;
  margin-right: -1px;
  gap: var(--gutter);
}

@media (min-width: 60rem) { /* >= 960px */
  .flex-columns {
    flex-direction: row;
  }
  .flex-columns > * {
    flex: 1;
  }
}

/* SIDEBAR COMPOSITION */

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32);
}

.with-sidebar > :first-child,
.with-sidebar[data-side="right"] > :last-child {
  flex-basis: var(--sidebar-width);
  flex-grow: 1;
}

.with-sidebar > :last-child,
.with-sidebar[data-side="right"] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: min(50%, var(--sidebar-width));
}

/* MASONRY COMPOSITION */

.masonry > * {
  margin-bottom: var(--space-16);
  width: 100%;
}

.masonry > *:only-child {
  column-span: all;
}

.masonry > button:only-child {
  transform: translateY(30%);
}

@media (min-width: 40rem) {
  .masonry {
    column-count: 2;
  }
}

@media (min-width: 65rem) {
  .masonry {
    column-count: 3;
  }
}

@media (min-width: 90rem) {
  .masonry {
    column-count: 4;
  }
}

/* BLOCKS */

/* BADGE BLOCK */

.badge {
  display: inline-flex;
  border-radius: var(--badge-border-radius, var(--rounded-full));
  align-items: center;
  justify-content: center;
  padding: var(--badge-padding);
  background: var(--badge-primary-background, var(--color-grey-800));
  color: var(--badge-primary-color, var(--color-white));
  font-size: var(--badge-font-size, var(--text-md));
  font-weight: var(--badge-font-weight, 700);
  min-width: var(--badge-min-width, var(--space-24));
  height: var(--badge-height, var(--space-24));
}

/* BUTTON BLOCK */

.btn {
  --btn-background: var(--color-primary-100);
  --btn-color: var(--color-white);
  --btn-border-color: transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
  padding: .6em var(--space-16) .7em;
  max-height: 2.5rem;
  text-align: center;
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--leading-md);
  font-weight: 500;
  border-radius: var(--rounded-lg);
  cursor: pointer;
  background-color: var(--btn-background, var(--color-primary-100));
  color: var(--btn-color, var(--color-white));
  border: 1px solid var(--btn-border-color);
}

.btn.font-serif {
  padding-bottom: .65em;
}

.btn[disabled] {
  cursor: not-allowed;
  opacity: .6;
}

.btn--white[disabled] {
  --btn-background: var(--color-white);
  --btn-color: var(--color-grey-700) !important;
  opacity: .6;
}

.btn.active,
.btn[aria-pressed="true"],
input[type="checkbox"]:checked + .btn--primary {
  --btn-background: var(--color-primary-100);
  --btn-border-color: var(--color-primary-100);
  --btn-color: var(--color-white);
}

.btn--primary {
  --btn-background: transparent;
  --btn-border-color: var(--color-primary-10);
  --btn-color: var(--color-primary);
}

.btn--primary.active:hover,
.btn--primary[aria-pressed="true"]:hover {
  --btn-background: var(--color-primary-hover);
  --btn-border-color: var(--color-primary-hover);
}

.btn--secondary {
  --btn-background: var(--color-black-10);
  --btn-border-color: transparent;
  --btn-color: var(--color-black);
}

.btn--black {
  --btn-background: var(--color-black);
  --btn-color: var(--color-white);
}

.btn--black-10 {
  --btn-background: var(--color-black-10);
  --btn-color: var(--color-black);
}

.btn--grey,
.btn--grey-700 {
  --btn-background: var(--color-grey-700);
  --btn-color: var(--color-white);
}

.btn--white,
.btn--white[aria-pressed="true"],
.btn--white[aria-pressed="true"]:focus-visible {
  --btn-background: var(--color-white);
  --btn-color: var(--color-grey-700);
}

.btn--white[aria-pressed="true"]:focus-visible {
  outline: transparent;
}

.btn--white-10 {
  --btn-background: var(--color-white-10);
  --btn-color: var(--color-white-80);
}

.btn--white-20 {
  --btn-background: var(--color-white-20);
  --btn-color: var(--color-white-90);
}

.btn--transparent {
  --btn-background: transparent;
  --btn-color: var(--color-white);
}

.btn--outline {
  --btn-border-color: var(--color-white-20);
}

.btn--xs {
  padding: .3rem var(--space-12) .35rem;
  border-radius: var(--rounded-md);
  max-height: var(--space-32);
}

.btn--sm {
  padding: .375rem var(--space-12) .5rem;
  border-radius: var(--rounded-md);
}

.btn--icon {
  --icon-size: 1rem;
  padding: var(--space-16);
}

.btn--icon.btn--sm {
  padding: .375rem;
}

.btn--image {
  --btn-background: var(--color-white);
  --btn-color: var(--color-grey-800);
  --btn-border-color: var(--color-black-10);
  --btn-image-w: 2.5rem;
  overflow: hidden;
  padding-left: calc(var(--space-16) + var(--btn-image-w));
}

.btn--image::before {
  content: '';
  display: inline-block;
  background-image: var(--btn-image);
  background-size: cover;
  background-color: #FAF8F7;
  width: var(--btn-image-w);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.btn--image[aria-pressed="true"] {
  --btn-background: var(--color-primary-10);
  --btn-border-color: var(--color-primary-50);
  --btn-color: var(--color-primary);
}

.btn--image:hover,
.btn--image:active {
  color: var(--color-primary-hover);
}

.btn--image[data-comments]::after {
  content: attr(data-comments) / '('attr(data-comments) ' commentaires)';
  display: grid;
  place-items: center;
  background-image: var(--icon-comment-new);
  background-size: cover;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-white);
  font-size: var(--text-xs);
  margin-left: .25rem;
}

.btn--image[data-comments="1"]::after {
  content: attr(data-comments) / '(1 commentaire)';
}

@media (hover: hover) {
  .btn:hover {
    --btn-background: var(--color-primary-hover);
  }
  .btn[aria-pressed="true"]:hover {
    --btn-background: var(--color-primary-hover);
    --btn-border-color: var(--color-primary-hover);
  }
  .btn--primary:hover {
    --btn-background: var(--color-primary-10);
  }
  .btn--white:hover {
    --btn-background: var(--color-black-10);
  }
  .btn--white[aria-pressed="true"]:hover {
    --btn-background: var(--color-white);
    --btn-border-color: transparent;
  }
  .btn--white-10:hover {
    --btn-background: var(--color-white-05);
  }
  .btn--white-20:hover {
    --btn-background: var(--color-white-15);
  }
  .btn--black-10:hover {
    --btn-background: var(--color-black-20);
  }
  .btn--grey:hover {
    --btn-background: var(--color-grey-800);
  }
  .btn--secondary:hover {
    --btn-background: var(--color-black-20);
  }
  .btn--transparent:hover {
    --btn-background: var(--color-white-05);
  }
  .btn--image:hover {
    --btn-background: var(--color-primary-10);
  }
  .btn--image[aria-pressed="true"]:hover {
    --btn-background: var(--color-primary-20);
    --btn-border-color: var(--color-primary-50);
    --btn-color: var(--color-primary-100);
  }
}

.btn--dtl {
  order: 9999;
  --btn-background: var(--color-dtl-15);
  --btn-color: var(--color-dtl);
}

.btn.isSubmitting {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, .75), rgba(0, 0, 0, 1) 50%);
  mask-size: 400% 100%;
  animation: clip-slide 2s infinite cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes clip-slide {
  from { mask-position: right }
  to   { mask-position: left  }
}

/* CARD BLOCK */

.card {
  --padding: var(--space-16);
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--padding);
  background-color: var(--color-background);
  border-radius: var(--rounded-2xl);
  row-gap: var(--row-gap);
}

.card.new::before {
  content: "" / "Nouvelles modifications";
  color: transparent;
  position: relative;
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--rounded-full);
  outline: .1875rem solid var(--color-white);
  background-color: var(--color-primary-100);
  overflow: hidden;
  position: absolute;
  top: 3.125rem;
  right: 0.875rem;
  z-index: 1;
}

.card__title {
  position: initial;
}

.card__title > a {
  font: inherit;
  color: currentColor;
  word-break: break-word;
}

.card__meta {
  font-size: var(--text-sm);
  margin-bottom: var(--space-16);
}

.card__images {
  display: grid;
  position: relative;
  width: 100%;
  border: 4px solid var(--color-grey-50);
  border-radius: var(--rounded-xl);
  overflow: hidden;
  margin-bottom: var(--space-16);
  aspect-ratio: 408/220;
  background-color: var(--color-grey-50);
}

.card__images[data-icon]::before {
  --icon: var(--icon-document);
  --icon-size: 4.5rem;
  --icon-color: var(--color-grey-300);
  position: absolute;
  left: 50%;
  top: 47.5%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.card__images[data-count]:not([data-count="1"]) {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 50%);
  gap: 4px;
}

.card__images[data-count] > :first-child {
  grid-row-end: span 2;
}

.card__images[data-count="2"] > :last-child {
  grid-row-end: span 2;
}

.card__images > img {
  height: 100%;
  width: 100%;
  background-color: var(--color-white);
}

.card__images > img[src$='.svg'],
.card__images > img[src$='.png'] {
  background-color: var(--color-white);
}

.card__images[data-plus]::after {
  content: '+'attr(data-plus);
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  background-color: var(--color-black-70);
  color: var(--color-white);
  border-radius: var(--rounded-lg);
  padding: .4rem var(--space-12) var(--space-8);
  font-size: var(--text-sm);
  font-weight: 500;
  height: 2.25rem; /* 36px */
}

.card--cta {
  border: 2px solid transparent;
  cursor: pointer;
  align-items: center;
  text-align: center;
}

.card--cta svg {
  color: var(--color-grey-800);
}

.card--cta:hover {
  background-color: var(--color-primary-10);
  border-color: var(--color-primary-10);
}

.card--cta:hover svg,
.card--cta:hover .text-lg {
  color: var(--color-primary-100);
}

.card > footer a {
  position: relative;
  z-index: 2;
}

.card.physical-sample header {
  background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-white);
}

.card.physical-sample h3 {
  position: static;
}

/* COMMENTS BLOCK */

#comments-container {
  background-color: black;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4.5rem;
  width: var(--dialog-comments-w);
  padding: var(--space-24) var(--space-32);
}

.comments {
  scroll-behavior: smooth;
  overflow-y: auto;
  height: calc(100% - 3.5rem);
  margin-bottom: 1rem;
  margin-right: -2rem;
  padding-right: 2rem;
}

.comments.empty::after {
  content: attr(data-empty-message);
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  max-width: 24ch;
  margin: auto;
  font-size: var(--text-sm);
  color: var(--color-grey-400);
}

.comments.empty::before {
  --icon-size: 1.25rem;
  --icon-color: var(--color-white);
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 4.5rem));
  width: var(--icon-size);
  height: var(--icon-size);
  background: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--icon-size);
  mask-image: var(--icon-comment);
}

#new-comment {
  position: absolute;
  bottom: var(--space-24);
  left: var(--space-32);
  right: var(--space-32);
}

#new-comment [data-icon] {
  --column-gap: var(--space-12);
  font-weight: 500;
}

#comments-container form {
  --flow-space: 0.5rem;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  bottom: 5.5rem;
  background: #333;
}

#comments-container textarea:not(.comment__body) {
  position: sticky;
  bottom: 0;
  margin: 0;
  background: none;
  padding: 0;
  color: var(--color-white);
}

#comments-container textarea {
  resize: none;
}

#comments-container textarea:focus {
  outline: none;
}

::placeholder {
  color: var(--color-white-50);
}

#comments-container form footer {
  gap: var(--space-12);
}

#comments-container form footer > * {
  flex-grow: 1;
}

.track.waiting-comment,
.track.waiting-comment .drag-zone,
.vpv-pages-inner-container.waiting-comment .page-inner-container,
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {
  cursor: var(--icon-comment-cursor) -2 28, cell !important;
}

.comment-marker {
  --marker-size: 1.75rem;
  position: absolute;
  display: block;
  width: var(--marker-size);
  height: var(--marker-size);
  background: var(--icon-comment-default) no-repeat center / contain;
  scroll-margin-block-start: 4rem;
  cursor: pointer !important;
  z-index: 999;
  overflow: visible;
  transition: transform 0.1s ease-out;
  transform-origin: bottom left;
  margin-left: calc(var(--marker-size) * -0.025);
  margin-top: calc(var(--marker-size) / -1.025);
}

.comment-marker:hover,
.comment-marker.big {
  transform: scale(1.1);
}

.comment-marker.active,
.comment-marker:focus {
  background-image: var(--icon-comment-focus);
}

.comments > .comment:not([data-opened="true"]) {
  cursor: pointer;
}

.comment {
  --flow-space: var(--space-12);
  font-size: var(--text-sm);
  border: var(--border);
  border-width: 2px;
  border-radius: var(--rounded-lg);
  padding: var(--space-12);
  color: var(--color-grey-400);
  transition: border-color 0.1s ease-in-out;
}

.comment.highlight {
  border-color: #fff;
}

.comment header p {
  display: flex;
  gap: var(--space-8);
}

.comment header strong,
.comment footer {
  font-weight: 500;
  color: var(--color-white);
}

.comment header time {
  color: var(--color-primary);
  font-weight: 500;
  margin-left: auto;
}

.comment[data-status="unread"] {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-grey-700);
}

.comment[data-status="unread"] header p > :first-child::before {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--color-primary);
  margin-right: var(--space-8);
  margin-bottom: 0.075em;
}

.comment[data-status="unread"] header strong,
.comment[data-status="unread"] footer {
  color: var(--color-black);
}

.comment[data-status="unread"] header time {
  color: var(--color-primary);
}

.comment[data-opened="true"] {
  border-color: transparent;
}

.comment[data-opened="true"] .comment__replies {
  color: var(--color-primary);
}

.comment__id,
.comment__page,
.comment__date {
  flex-shrink: 0;
}

.comment__body {
  width: 100%;
  padding: 0;
  margin-bottom: 0;
  color: var(--color-grey-400);
  font: inherit;
  letter-spacing: inherit;
}

.comment__ctas > * {
  --border-color: transparent;
  margin-right: var(--space-4);
}

.comment__edit-ctas {
  display: flex;
  gap: var(--space-12);
}

.comment__edit-ctas > * {
  flex-grow: 1;
}

/* DESIGN TO LIGHT BLOCK */

/* Menu */

#menu [data-dtl="true"]::after,
.project-item[data-dtl="true"] h3::after {
  --icon-color: var(--color-dtl);
  --icon-size: 1rem;
  --icon: var(--icon-leaf);
  content: "";
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  background: var(--icon-color);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--icon-size);
  mask-image: var(--icon, var(--icon-circle));
  margin-left: var(--space-8);
}

.project-item [data-dtl="true"]::after {
  --icon-size: 1.25rem;
}

/* Page */

#dtl-page {
  position: relative;
  overflow-y: auto;
  max-height: calc(100vh - var(--gutter) * 2);
}

#dtl-page::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--background);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  filter: saturate(60%);
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0) 50%
  );
}

#dtl-page > * {
  max-width: 73.25rem; /* 1172px */
  margin-inline: auto;
}

#dtl-page hgroup::before {
  --icon-size: var(--space-64);
  margin-bottom: var(--space-32);
}

#dtl-page .card ul {
  list-style: initial;
  padding-left: 1.25em;
  padding-block: 0.25rem;
}

/* Button */

#dtl-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 4.75rem;
  height: 2.5rem;
  color: var(--color-white);
}

#dtl-btn::before {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
}

#dtl-btn[data-grade]::after,
#dtl-btn .new {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  width: 2rem;
  height: 2rem;
  user-select: none;
  border-radius: var(--rounded-sm);
}

#dtl-btn[data-new][data-grade]::after {
  display: none;
}

#dtl-btn .new {
  color: var(--color-white);
  background: var(--color-primary-50);
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 0.5rem 0;
  z-index: 10;
}

#dtl-btn .new::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid var(--color-black);
  border-radius: 50%;
  background: var(--color-primary);
  display: block;
  position: absolute;
  top: -0.333rem;
  right: -0.333rem;
}

/* Grades */

[data-grade]::after {
  content: attr(data-grade);
  color: transparent;
  border-radius: var(--rounded-sm);
  background-repeat: no-repeat;
  background-position: center;
}

[data-grade="A"]::after {
  background-image: var(--icon-grade-A);
  background-color: rgba(0, 148, 91, 0.2);
}

[data-grade="B"]::after {
  background-image: var(--icon-grade-B);
  background-color: rgba(94, 172, 13, 0.2);
}

[data-grade="C"]::after {
  background-image: var(--icon-grade-C);
  background-color: rgba(238, 175, 16, 0.2);
}

[data-grade="D"]::after {
  background-image: var(--icon-grade-D);
  background-color: rgba(242, 106, 79, 0.2);
}

[data-grade="E"]::after {
  background-image: var(--icon-grade-E);
  background-color: rgba(243, 45, 47, 0.2);
}

/* Panel */

#dtl-panel {
  --dtl-panel-w: 30rem;
  width: var(--dtl-panel-w);
  position: fixed;
  right: 2rem;
  top: 2rem;
  bottom: 5.5rem;
  color: var(--color-white);
  z-index: 999;
  overflow: hidden;
}

#dtl-panel.with-dialog {
  max-height: min(100vh - var(--gutter) * 2, 50rem);
  max-width: 25rem;
  top: 0;
  bottom: 0;
  margin-top: var(--gutter);
  z-index: 9999;
}

#dtl-panel > header {
  height: 3.5rem;
}

#dtl-panel .border-b {
  border-color: var(--color-white-10);
}

#dtl-panel [data-icon="close"] {
  --icon-size: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: inherit;
}

#dtl-panel [role="tablist"] {
  display: flex;
  padding: 0 var(--space-32);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#dtl-panel [role="tablist"]::-webkit-scrollbar {
  display: none;
}

#dtl-panel [role="tab"] {
  height: 2.5rem;
  padding: var(--space-12) 0.625rem;
  color: var(--color-grey-400);
  font-weight: 500;
  white-space: pre;
  border-bottom: 2px solid transparent;
}

#dtl-panel [role="tab"][aria-selected="true"] {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

#dtl-panel section {
  height: calc(100% - 3.5rem);
}

#dtl-panel [role="tablist"] + section {
  height: calc(100% - 6rem);
}

#dtl-panel h3 {
  font-size: var(--text-sm);
}

#dtl-panel [data-grade]::after {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  background-size: 2rem;
}

#note-globale input[type="range"] {
  width: 100%;
  height: 0.5rem;
  background: linear-gradient(
    to right,
    rgba(243, 45, 47, 1) 0%,
    rgba(243, 45, 47, 1) 20%,
    rgba(242, 106, 79, 1) 20%,
    rgba(242, 106, 79, 1) 40%,
    rgba(238, 175, 16, 1) 40%,
    rgba(238, 175, 16, 1) 60%,
    rgba(94, 172, 13, 1) 60%,
    rgba(94, 172, 13, 1) 80%,
    rgba(0, 148, 91, 1) 80%,
    rgba(0, 148, 91, 1) 100%
  );
  transform: scaleX(-1);
}

#note-globale input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 2px;
  border: none;
  border-radius: 2px;
  background: var(--color-white);
  -webkit-appearance: none;
  box-shadow: 0px 0px 2px 0px var(--color-black-50);
}

#note-globale input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 2px;
  border: none;
  border-radius: 2px;
  background: var(--color-white);
  -webkit-appearance: none;
  box-shadow: 0px 0px 2px 0px var(--color-black-50);
}

#note-globale input[type="range"]::-ms-thumb {
  height: 20px;
  width: 2px;
  border: none;
  border-radius: 2px;
  background: var(--color-white);
  -webkit-appearance: none;
  box-shadow: 0px 0px 2px 0px var(--color-black-50);
}

#positionnement {
  position: relative;
}

#positionnement dl {
  width: 100%;
  height: 192px;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg width='130' height='130' viewBox='0 0 130 130' fill='none' stroke='white' stroke-opacity='0.1' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M115.3 1V129'/%3E%3Cpath d='M102.6 1V129'/%3E%3Cpath d='M89.9 1V129'/%3E%3Cpath d='M77.2 1V129'/%3E%3Cpath d='M64.5 1V129'/%3E%3Cpath d='M51.8 1V129'/%3E%3Cpath d='M39.1 1V129'/%3E%3Cpath d='M26.4 1V129'/%3E%3Cpath d='M13.7 1V129'/%3E%3Cpath d='M1 13.8L129 13.8'/%3E%3Cpath d='M1 26.6L129 26.6'/%3E%3Cpath d='M1 40L129 40'/%3E%3Cpath d='M1 52.2L129 52.2'/%3E%3Cpath d='M1 65L129 65'/%3E%3Cpath d='M1 77.8L129 77.8'/%3E%3Cpath d='M1 90.6L129 90.6'/%3E%3Cpath d='M1 103.4L129 103.4'/%3E%3Cpath d='M1 116.2L129 116.2'/%3E%3Cpath d='M1 65L129 65' stroke='%235E6060' stroke-opacity='1'/%3E%3Cpath d='M64.5 1V129' stroke='%235E6060' stroke-opacity='1'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8.125rem;
  user-select: none;
}

#positionnement dt {
  position: absolute;
  top: 0;
  color: var(--color-grey-400);
  text-align: center;
}

#positionnement dt::after {
  position: absolute;
  color: var(--color-white);
}

#positionnement dd::before,
#positionnement dd::after {
  position: absolute;
}

#positionnement #design {
  top: calc(50% - 0.666em);
  right: calc(50% + 5rem);
  transform: translateY(-50%);
}

#positionnement #design::after {
  content: "Complexe";
  bottom: -1.333em;
  right: 0;
}

#positionnement #design + dd::before {
  content: "Design";
  top: calc(50% - 0.666em);
  left: calc(50% + 5rem);
  transform: translateY(-50%);
  color: var(--color-grey-400);
}

#positionnement #design + dd::after {
  content: "Sobre";
  top: calc(50% + 0.666em);
  left: calc(50% + 5rem);
  transform: translateY(-50%);
}

#positionnement #poids {
  left: 50%;
  transform: translateX(-50%);
}

#positionnement #poids::after {
  content: " Léger";
  position: static;
}

#positionnement #poids + dd::before {
  content: "Poids";
  bottom: 0;
  left: calc(50% - 1.5em);
  transform: translateX(-50%);
  color: var(--color-grey-400);
}

#positionnement #poids + dd::after {
  content: " Lourd";
  bottom: 0;
  left: calc(50% + 1.5em);
  transform: translateX(-50%);
}

#positionnement .dot {
  position: absolute;
  top: calc(50% + 0.6875rem);
  left: calc(50% - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-white);
  opacity: 0.5;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  transform: translate(calc(var(--x) * 8rem / 10), calc(var(--y) * -8rem / 10));
}

#positionnement .dot[aria-selected="true"] {
  box-shadow: 0 0 0 4px var(--color-white-20);
  opacity: 1;
}

#indicateur .grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: var(--space-32);
}

.gauge {
  --gauge-outer-size: 5rem;
  --gauge-inner-size: 4rem;
  width: var(--gauge-outer-size);
  height: var(--gauge-outer-size);
  border-radius: 50%;
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    #eeaf10 0deg,
    #5eac0d 72deg,
    #00945b 144deg,
    #00945b 180deg,
    #f32d2f 180deg,
    #f26a4f 216deg,
    #eeaf10 360deg
  );
  background-size: 100%;
  background-position: center;
  position: relative;
  appearance: none;
  display: block;
  text-align: center;
  justify-self: center;
  margin-bottom: 3rem;
}

.gauge::after {
  content: attr(data-value);
  display: block;
  padding: 1.125rem 1.25rem 1.125rem 0.875rem;
  font-size: var(--text-lg);
  width: var(--gauge-inner-size);
  height: var(--gauge-inner-size);
  border-radius: 50%;
  background: var(--color-black);
  position: absolute;
  top: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2);
  left: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2);
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  z-index: 10;
}

.gauge::before {
  content: "";
  display: block;
  width: calc(var(--gauge-outer-size) / 2);
  height: var(--gauge-outer-size);
  border-radius: 50%;
  border-radius: 0 var(--gauge-outer-size) var(--gauge-outer-size) 0;
  background: blue;
  transform-origin: center;
  transform: rotate(180deg) scale(1.03);
  position: absolute;
  bottom: 0;
  right: 50%;
  background: var(--color-black);
  z-index: 1;
}

.gauge[data-value^="-"]::before {
  transform: rotate(0deg) scale(1.03);
  left: 50%;
  right: unset;
}

.gauge label::before {
  content: "";
  display: block;
  width: calc(var(--gauge-outer-size) / 2);
  height: var(--gauge-outer-size);
  border-radius: 50%;
  border-radius: 0 var(--gauge-outer-size) var(--gauge-outer-size) 0;
  background: blue;
  transform-origin: left center;
  transform: rotate(calc(30deg * var(--value))) scale(1.03);
  background: var(--color-black);
  position: absolute;
  top: calc(-1 * var(--gauge-outer-size));
  left: 50%;
  z-index: 1;
}

.gauge[data-value^="-"] label::before {
  transform: rotate(calc(180deg + 30deg * var(--value))) scale(1.03);
}

.gauge label::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(-1 * var(--gauge-outer-size) - 2px);
  left: calc(50% - 1px);
  z-index: 11;
  height: 12px;
  width: 2px;
  border: none;
  border-radius: 2px;
  background: var(--color-white);
  -webkit-appearance: none;
  box-shadow: 0px 0px 2px 0px var(--color-black-50);
}

.gauge label {
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  font-weight: 500;
  padding: 0.5rem 0;
}

.gauge input[type="range"] {
  visibility: hidden;
}

/* DIALOG BLOCK */

.dialog {
  --dialog-max-w: calc(100vw - var(--gutter) * 2);
  --dialog-max-h: calc(100vh - var(--gutter) * 2);
  --dialog-header-h: 4.5rem;
  --dialog-footer-h: 4.5rem;
  --dialog-comments-w: 22.5rem;
  --dialog-background: var(--color-black);
  width: 100%;
  max-width: var(--dialog-max-w);
  height: 100%;
  max-height: var(--dialog-max-h);
  color: var(--color-grey-800);
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  background: var(--dialog-background);
  margin: auto;
}

.dialog.with-dtl {
  --dialog-max-w: calc(100vw - var(--gutter) * 2 - 27rem);
  margin-right: 29rem;
  margin-left: var(--gutter);
}

/* Header */

.dialog [data-pc-section='header'] {
  height: var(--dialog-header-h);
  padding: 1rem;
  color: var(--color-white);
  background: var(--color-white-10);
  display: flex;
  gap: var(--space-16);
}

@media screen and (max-width: 96rem) {
  .dialog#virtual-sample.with-dtl [data-pc-section='header'] h2 {
    text-align: left;
    left: 27.5rem;
    right: 9.5rem;
  }
}

.dialog:not(#physical-sample) [data-pc-section='header'] h2 {
  font-family: var(--font-serif);
  position: absolute;
  left: 15rem;
  right: 5rem;
  text-align: center;
  line-height: 2.5rem;
  max-height: 1lh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
}

.dialog [data-pc-name='pcclosebutton'] {
  color: var(--color-white);
}

.dialog__tabs {
  display: flex;
  gap: var(--space-4);
  background: var(--color-black);
  border-radius: var(--rounded-lg);
  outline: 4px solid var(--color-black);
  position: relative;
  z-index: 10;
}

.dialog__tabs .btn {
  align-items: center;
  font-size: var(--text-md);
}

.dialog__tabs .btn:hover {
  --btn-background: var(--color-white-10);
}

.dialog__tabs .btn[aria-pressed='true'] {
  --btn-background: var(--color-white);
  --btn-color: var(--color-text);
  --btn-border-color: var(--color-white);
}

/* Content */

.dialog__inner {
  padding: var(--space-16);
  background: var(--dialog-inner-background, #f7f7f7);
  height: 100%;
  overflow-y: auto;
}

#dynamic.dialog__inner {
  overflow-y: hidden;
}

.with-comments .dialog__inner {
  margin-right: var(--dialog-comments-w, 20rem);
}

.dialog__inner .tracks-header {
  height: 3.75rem;
  border-radius: var(--rounded-xl);
  padding-right: var(--space-8);
  flex-wrap: nowrap;
  gap: var(--space-8);
  position: sticky;
  top: 0;
  z-index: 1;
}

.dialog__inner .tracks-header .btn::before {
  content: '';
  display: block;
  position: absolute;
  top: -.75rem;
  left: -3rem;
  bottom: -.75rem;
  width: 2.5rem;
  background: linear-gradient(to right, transparent, var(--dialog-inner-background, #f7f7f7));
}

.dialog__inner .tracks {
  display: flex;
  gap: var(--space-8);
  width: 100%;
  margin-left: calc(-1 * var(--space-16));
  padding: var(--space-12) var(--space-16);
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

@supports selector(::scroll-button(*)) {
  .dialog__inner .tracks {
    anchor-name: --tracks;
    scroll-behavior: smooth;
    &::scroll-button(*) {
      --scroll-button-position: 8px;
      position-anchor: --tracks;
      position: fixed;
      align-self: anchor-center;
      z-index: 1;
      width: 2.5rem;
      height: 2.5rem;
      border: 1px solid var(--color-grey-500);
      border-radius: var(--rounded-lg);
      color: transparent;
      background-repeat: no-repeat;
      background-position: center;
      background-size: var(--icon-size, 1.25rem);
      background-image: var(--icon, var(--icon-arrow-right));
      background-color: var(--color-white);
      user-select: none;
      cursor: pointer;
      opacity: 1;
      transition: opacity 0.2s ease-out;
    }
    &::scroll-button(*):hover {
      border-color: var(--color-grey-700);
    }
    &::scroll-button(*):disabled {
      opacity: 0;
    }
    &::scroll-button(left) {
      --icon: var(--icon-chevron-single-left);
      content: "←" / "Scroller vers la gauche";
      left: calc(anchor(left) + var(--scroll-button-position));
    }
    &::scroll-button(right) {
      --icon: var(--icon-chevron-single-right);
      content: "→" / "Scroller vers la droite";
      right: calc(anchor(right) + var(--scroll-button-position));
    }
  }
  [data-browser*='edge' i] .tracks::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
  [data-browser*='edge' i] .tracks::-webkit-scrollbar-track {
    background: transparent; /* Match background */
  }
  [data-browser*='edge' i] .tracks::-webkit-scrollbar-thumb {
    background: hsla(180, 1%, 51%, .7); /* Customize scrollbar color */
    border-radius: 5px;
  }
  [data-browser*='edge' i] .tracks {
    scrollbar-color: auto;
  }
}

/* Windows fix */

[data-browser*='windows' i] .dialog__inner .tracks {
  transform: translateY(0.46875rem);
}

.dialog__inner .tracks > *:last-child {
  margin-right: var(--space-8);
}

.dialog [data-pc-section='content'] [role='tablist'] {
  height: 3.5rem;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  border-bottom: 1px solid var(--color-grey-700);
  padding-top: 7px;
}

.dialog [data-pc-section='content'] [role='tab'] {
  --tab-h: 3rem;
  --tab-min-w: none;
  --tab-py: var(--space-8);
  --tab-px: var(--space-12);
  --tab-border-w: 1px;
  --tab-color: var(--color-grey-400);
  --tab-background: transparent;
  --tab-border-color: transparent;
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--text-md);
  text-align: center;
  background-color: transparent;
  color: var(--tab-color);
  padding: var(--tab-py) var(--tab-px);
  margin: 0;
  cursor: pointer;
  gap: var(--space-4);
  min-width: var(--tab-min-w);
  height: var(--tab-h);
  border-bottom: var(--tab-border-w) solid var(--tab-border-color);
}

.dialog [data-pc-section='content'] [role='tab'][aria-selected='true'] {
  --tab-border-color: var(--color-white);
  --tab-color: var(--color-white);
}

.dialog [data-pc-section='content'] [role='tab']:focus-visible {
  z-index: 20;
}

.dialog [data-pc-section='content'] [role='tab'] .label {
  flex-grow: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: -0.1em;
}

/* Footer */

.dialog [data-pc-section='footer'] {
  display: flex;
  gap: var(--space-16);
  height: var(--dialog-footer-h);
  padding: 1rem;
  background: var(--color-black);
  color: var(--color-white);
}

/* Virtual Sample */

.dialog#virtual-sample {
  --dialog-inner-background: #f7f7f7;
}

.dialog#virtual-sample [data-pc-section='header'] h2 {
  left: 1rem;
  right: 1rem;
  margin-inline: 16rem;
  min-width: 14ch;
}

.dialog#virtual-sample #comments-container {
  top: var(--dialog-header-h);
}

.dialog#virtual-sample.dynamic #comments-container {
  top: 4.5rem;
}

.dialog#virtual-sample.static #comments-container {
  top: 8rem;
}

.dialog#virtual-sample.static [data-pc-section='footer'] {
  display: none;
}

.dialog#virtual-sample.static .dialog__inner {
  height: calc(100% - 3.5rem) !important;
}

/* Physical Sample */

.dialog#physical-sample {
  --dialog-header-h: 15rem;
  --dialog-background: var(--color-grey-50);
  padding: var(--space-32) var(--space-32) 0;
  overflow-y: auto;
}

.dialog#physical-sample [data-pc-section='header'] {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: var(--space-32);
  color: var(--color-white);
  background: linear-gradient(
      90deg,
      hsla(0, 0%, 10%, 0.5) 0%,
      hsla(0, 0%, 10%, 0.9) 50%,
      hsla(0, 0%, 10%, 0.9) 100%
    ),
    var(--cover), var(--color-black);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--rounded-xl);
}

.dialog#physical-sample [data-pc-name='pcclosebutton'] {
  top: var(--space-40);
  right: var(--space-40);
}

.dialog#physical-sample .overflow-y {
  border-radius: var(--rounded-xl) var(--rounded-xl) 0 0;
}

.dialog#physical-sample .masonry > :only-child {
  column-span: initial;
}

@media (min-width: 90rem) {
  .dialog#physical-sample .masonry {
    column-count: 3;
  }
}

/* Project Request Dialog */

#project-request-dialog,
#optimization-request-dialog {
  --dialog-max-w: 704px;
  --dialog-max-h: 712px;
  --dialog-header-h: 6rem;
  --dialog-background: var(--color-white);
  color: var(--color-black);
  align-items: stretch;
  overflow: hidden;
}

#optimization-request-dialog {
  --dialog-max-h: 676px;
  --dialog-header-h: 8rem;
}

#optimization-request-dialog [data-pc-section='header'] {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#project-request-dialog h2,
#optimization-request-dialog h2 {
  position: static !important;
  color: var(--color-black);
  margin-block: var(--space-16) !important;
}

#project-request-dialog [data-pc-name='pcclosebutton'],
#optimization-request-dialog [data-pc-name='pcclosebutton'] {
  display: none;
}

#project-request-dialog #project-dtl {
  position: relative;
  padding-left: var(--space-64);
}

#project-request-dialog #project-dtl.selected {
  border-color: var(--color-primary-20);
  background-color: var(--color-primary-10);
}

#project-request-dialog #project-dtl input[type='checkbox'] {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rounded-md);
  position: absolute;
  left: var(--space-12);
}

#optimization-request-dialog select {
  background-image: var(--icon-chevron-single-down-grey);
  background-position: center right 1rem;
  background-repeat: no-repeat;
}

#project-request-dialog [data-icon='leaf'],
#optimization-request-dialog [data-icon='leaf'] {
  --column-gap: var(--space-4);
  padding: 0.25rem var(--space-8) 0.375rem;
  background: var(--color-dtl-15);
  color: var(--color-dtl);
  border-radius: var(--rounded-md);
  line-height: 1;
  font-weight: 500;
}

#project-request-dialog [data-icon='leaf']::before,
#optimization-request-dialog [data-icon='leaf']::before {
  transform: translateY(0.125rem);
}

/* HEADER BLOCK */

.header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: var(--header-height);
	padding: 0 var(--gutter);
	margin-bottom: var(--space-24);
}

/* IMAGE BLOCK */

.image {
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.image.has-description::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 1rem;
  mask-image: var(--icon-description);
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.image[aria-selected="true"] {
  outline: 2px solid var(--color-focus-ring);
}

.image[aria-selected="true"]::after {
  content: attr(data-count);
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  border-radius: 50%;
  color: var(--color-white);
  font-weight: 700;
  background: var(--color-grey-800);
  display: grid;
  place-items: center;
  text-align: center;
  width: 1.5rem;
  height: 1.5rem;
}

.image .tags {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  right: var(--space-12);
  gap: var(--space-8);
}

/* KANBAN BLOCK */

.kanban {
  --header-height: 2.25rem; /* 36px */
  --header-bg-color: var(--color-grey-200);
  --header-title-bg-color: var(--color-grey-700);
  --gap: var(--gutter);
  position: relative;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  height: calc(100vh - var(--gutter) * 2 - var(--header-height) - 2.25rem);
}

.kanban > section {
  min-width: 20rem;
  position: relative;
}

.kanban .cards {
  padding-top: var(--space-16);
  max-height: calc(100% - var(--header-height));
  overflow-y: auto;
}

.kanban .card {
  row-gap: 0;
}

.kanban > section h2 {
  position: relative;
  background-color: var(--header-bg-color);
  border-radius: var(--rounded-md);
  font-size: var(--text-sm);
  height: var(--header-height);
}

.kanban > section h2 > span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  background-color: var(--header-title-bg-color);
  color: var(--color-white);
  height: 100%;
  width: fit-content;
  padding: 0 var(--space-12);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  font-weight: 500;
}

.kanban > section + section h2::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: calc(var(--header-height) / 2 - 1.5px);
  right: 100%;
  width: var(--gap);
  height: 3px;
  background-color: var(--color-grey-200);
  z-index: -1;
}

.kanban [data-status="done"] h2::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--space-4);
  bottom: 0;
  display: inline-block;
  width: var(--icon-size, var(--header-height));
  height: var(--icon-size, var(--header-height));
  background: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--icon-size, 1rem);
  mask-image: var(--icon, var(--icon-check));
}

.kanban [data-status="in-progress"] {
  --header-bg-color: var(--color-primary-20);
  --header-title-bg-color: var(--color-primary);
}

.kanban [data-status="in-progress"] h2::after {
  content: "";
  color: var(--color-primary);
  position: absolute;
  top: 0;
  right: var(--space-4);
  bottom: 0;
  display: inline-block;
  width: var(--icon-size, var(--header-height));
  height: var(--icon-size, var(--header-height));
  background: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--icon-size, 1rem);
  mask-image: var(--icon-point-active);
}

.kanban [data-status="in-progress"]::after {
  content: "En cours";
  position: absolute;
  top: 0;
  right: calc(var(--icon-size, var(--header-height)) + var(--space-4));
  color: var(--color-primary);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 2.125rem;
}

.kanban [data-status="uncompleted"] h2 {
  background: none;
}

.kanban [data-status="uncompleted"] h2::before {
  background-color: transparent;
  background-repeat: repeat-x;
  background-position: left center;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='2' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
  background-size: 0.5rem;
  right: calc(-1 * var(--gap));
  left: calc(-1 * var(--gap));
  width: auto;
}

.kanban [data-status="uncompleted"] h2 > span {
  border-radius: inherit;
}

.kanban [data-status="uncompleted"]::after {
  content: "En attente";
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-grey-50);
  color: var(--color-grey-700);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 2.125rem;
  padding: 0 var(--space-12);
}

/* NOTIFICATIONS BLOCK */

.notifications {
  --flow-space: var(--space-16);
}

.notification {
  --flow-space: var(--space-12);
  font-size: var(--text-sm);
  position: relative;
  cursor: pointer;
}

.notification[data-status="unread"]::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  outline: 2px solid var(--color-white);
  background: var(--color-primary);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

.notification p {
  max-width: 100%;
}

.notification header p {
  column-gap: 0;
}

.notification__type {
  display: flex;
}

.notification__type::before {
  margin-right: var(--space-8);
}

.notification__client {
  display: inline-block;
}

.notification__client::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--color-grey-700);
  border-radius: 50%;
  margin: 0.2em 0.5em;
}

.notification__body {
  --line-clamp: 2;
}

/* PILL BLOCK */

.pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  text-align: center;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--rounded-full);
  background-color: var(--background, var(--color-primary-100));
  color: var(--color, var(--color-white));
  white-space: pre;
}

.pill--secondary {
  --background: var(--color-primary-10);
  --color: var(--color-primary-100);
}

.pill[data-icon] {
  padding: var(--space-8) var(--space-16);
}

/* PDF VIEWER BLOCK */

.vpv-variables {
  /* Base styles */
  --vpv-base-radius: var(--rounded-xl);
  /* Viewer container */
  --vpv-container-width-sm: 48rem;
  /* Toolbar */
  --vpv-toolbar-size: 4.5rem;
}

.vpv-variables.vpv-variables__dark {
  /* Base styles */
  --vpv-base-border-color: var(--color-grey-700);
  /* Viewer container */
  --vpv-container-border-color: var(--vpv-base-border-color);
  /* Loader */
  --vpv-loader-backdrop-color: rgba(0, 0, 0, 0.8);
  /* Toolbar */
  --vpv-toolbar-background-color: var(--color-black);
  --vpv-toolbar-color: white;
  --vpv-toolbar-border-color: var(--vpv-base-border-color);
  /* Sidebar */
  --vpv-sidebar-content-background-color: var(--color-black);
  --vpv-sidebar-content_thumbnail-focused-border-color: var(--color-white-20);
  /* Drop file mask */
  --vpv-drop-zone-background: #1c2024;
  --vpv-drop-zone-border: #434c56;
  /* PDF Pages Content*/
  --vpv-pages-container-background: black;
  /* Popover */
  --vpv-popover-background-color: black;
  --vpv-popover-color: var(--color-white);
  --vpv-popover-border-color: transparent;
  /* Menu Dropdown */
  --vpv-dropdown-menu-content-background: #181818;
  --vpv-dropdown-menu-content-menu-hover-background: var(--color-white-10);
  --vpv-dropdown-menu-content-separator-background: var(--color-white-10);
  --vpv-dropdown-menu-content-border-color: var(--color-white-10);
  --vpv-dropdown-separator: var(--color-white-10);
  /* Search Input */
  --vpv-input-background-color: transparent;
  --vpv-input-border-color: var(--color-white);
  --vpv-input-placeholder-color: #596673;
  /* Modal of PDF Properties */
  --vpv-properties-content-background: var(
    --vpv-dropdown-menu-content-background
  );
  --vpv-properties-content-secondary-color: #c6ccd2;
  --vpv-properties-content-color: var(--vpv-toolbar-color);
  --vpv-properties-separator: var(--vpv-dropdown-separator);
  --vpv-properties-header: white;
  /* Modal of Print Progress */
  --vpv-print-progress-background: var(--vpv-dropdown-menu-content-background);
  /* Tooltip */
  --vpv-tooltip-background: #181818;
  --vpv-tooltip-color: white;
  --vpv-tooltip-border-color: var(--color-black);
  /* Outline */
  --vpv-outline-color: var(--color-white-10);
}

.vpv-container {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.vpv-body-wrapper,
.vpv-container .vpv-sidebar-wrapper {
  margin-top: 0 !important;
  margin-bottom: 4.5rem !important; /* --vpv-toolbar-size */
}

.vpv-container .vpv-pages-container-wrapper {
  background: black !important; /* --vpv-pages-container-background */
}

.vpv-splitter {
  max-width: 0;
}

/* Sidebar */

.vpv-container .vpv-sidebar-wrapper .vpv-sidebar-content-container {
  background: var(--color-black) !important; /* --vpv-sidebar-content-background-color */
  border-right-color: var(--color-grey-700) !important; /* --vpv-toolbar-border-color */
}

.vpv-container .vpv-sidebar-wrapper__opened {
  max-width: 9rem !important;
}

.vpv-sidebar-features {
  display: none;
}

.pdf-thumbnail-wrapper .pdf-thumbnail img,
.pdf-thumbnail-wrapper .pdf-thumbnail .placeholder {
  border-radius: var(--rounded-md);
}

/* Toolbar */

.vpv-container .vpv-toolbar-wrapper {
  border-bottom-width: 0 !important;
  border-top: 1px solid var(--color-grey-700);
  padding-left: 1rem !important;
  height: 4.5rem !important; /* --vpv-toolbar-size */
  background-color: var(--color-black) !important; /* --vpv-toolbar-background-color */
}

.vpv-toolbar-wrapper {
  top: unset !important;
  bottom: 0 !important;
}

.vpv-toolbar-start .vpv-toolbar-btn {
  display: none !important;
}

.vpv-toolbar-start::before {
  content: "Page";
}

.vpv-input {
  border-radius: var(--rounded-sm) !important;
  max-width: 1.5rem !important;
}

.vpv-input ~ span {
  color: var(--color-grey-400);
}

.vpv-toolbar-end {
  padding-right: 7.5rem;
}

.vpv-toolbar-end > button {
  display: none !important;
}

/* Footer buttons */

#toggle-comments,
#download-pdf {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-16);
  padding: 0.625rem;
}

#download-pdf {
  right: 4.5rem;
}

/* PROJECT BLOCK */

.project-item {
  background: var(--color-background);
  row-gap: 2.5rem;
  position: relative;
}

.project-item hgroup {
  flex: 1 1 0%;
  min-width: 20rem;
}

.project-item h3 {
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
  position: initial;
}

.project-item p {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.project-logo {
  order: -1;
  color: var(--color-grey-400);
  text-align: center;
  line-height: 4.5rem;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  outline: 1px solid var(--color-grey-50);
}

.project-steps {
  --color: var(--color-primary-100);
  --gap: var(--space-16);
  flex: 1 1 0%;
  display: flex;
  gap: var(--gap);
  margin-top: -1.5rem;
  position: relative;
  min-width: 55%;
  width: 100%;
  padding: 2rem 0;
}

.project-step {
  --color: var(--color-white);
  position: relative;
  flex: 1 1 0%;
  text-align: center;
}

.project-step:last-child {
  text-align: right;
}

.project-step:only-child,
.project-step:first-child {
  text-align: left;
}

.project-step[data-status="in-progress"]:first-child::before {
  content: "étapes à venir";
  font-size: var(--text-sm);
  font-weight: 500;
  width: 8rem;
  position: absolute;
  text-align: center;
  color: var(--color-grey-500);
  background: var(--color-white);
  bottom: -2rem;
  left: calc(100% + var(--gap));
  transform: translate(-50%, -0.2em);
  z-index: 10;
}

/* dotted line */

.project-step[data-status="in-progress"]:not(:last-child)::after,
.project-step:last-child::before {
  content: "";
  display: block;
  height: 1rem;
  position: absolute;
  background-repeat: repeat-x;
  background-position: right center;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
  background-size: 0.75rem;
  left: calc(50% + 1.875rem);
  right: calc(var(--gap) / -2);
  bottom: -1.875rem;
}

.project-step[data-status="in-progress"]:first-child::after {
  left: 5.5rem;
}

.project-step:last-child::before {
  left: calc(var(--gap) / -2);
  right: 6.75rem;
  background-position: left center;
}

/* solid line */

.project-step[data-status="done"]:not(:first-child)::before,
.project-step[data-status="in-progress"]:not(:first-child)::before,
.project-step[data-status="done"]::after  {
  content: '';
  display: block;
  height: 4px;
  background: var(--color-primary-10);
  position: absolute;
  bottom: -1.5rem;
}

.project-step[data-status="done"]:not(:first-child)::before,
.project-step[data-status="in-progress"]:not(:first-child)::before {
  border-radius: 0 2px 2px 0;
  left: calc(var(--gap) / -2);
  right: calc(50% + 1.875rem);
}

.project-step[data-status="done"]::after {
  border-radius: 2px 0 0 2px;
  right: calc(var(--gap) / -2);
  left: calc(50% + 1.875rem);
}

.project-step:first-child::after {
  left: 5.5rem;
}

.project-step[data-status="done"]:first-child .pill::after {
  margin-left: 3.25rem;
}

.project-step[data-status="uncompleted"]:last-child::before {
  margin-right: -3.25rem;
}

/* Hide all steps between in-progress and last step */

.project-step[data-status="in-progress"] ~ .project-step:not(:last-child) {
  display: none;
}

.project-step .pill {
  border-radius: var(--rounded-md);
  padding-inline: var(--space-12);
}

.project-step .pill::after {
  content: "";
  display: inline-block;
  width: var(--icon-size, 1.25rem);
  height: var(--icon-size, 1.25rem);
  background-color: var(--icon-color, var(--color-primary-100));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--size, 1.25rem);
  mask-image: var(--icon, var(--icon-point));
  position: absolute;
  bottom: -2rem;
}

.project-step[data-status="done"] > .pill,
.project-step[data-status="uncompleted"] > .pill {
  --background: transparent;
  color: transparent;
  width: 4rem;
}

.project-step[data-status="done"] .pill::after {
  mask-image: var(--icon-check-3);
}

/*.project-step[data-status="done"]:first-child .pill::after {
  left: calc(50% + .625rem);
}*/

.project-step[data-status="in-progress"] .pill::after {
  mask-image: var(--icon-point-active);
}

.project-step[data-status="uncompleted"] .pill::after {
  --icon: var(--icon-point);
  --icon-color: var(--color-grey-300);
}

.project-step .pill > span {
  margin-top: -.1em;
}

/* in-progress vertical stroke */

.project-step[data-status="in-progress"] .pill > span::after {
  content: '';
  display: block;
  position: absolute;
  width: 4px;
  height: 1.5rem;
  background: var(--color-primary-10);
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.project-details {
  flex-wrap: wrap !important;
}

.project-details > * {
  min-width: 17rem;
}

.project-details__description {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.project-details textarea {
  resize: none;
  flex-grow: 1;
  max-width: calc(100vw - var(--gutter) * 2 - var(--space-32));
}

.project-details__filters button:first-of-type {
  margin-right: calc(var(--space-12) + 1px);
}

.project-details__filters button:first-of-type::after {
  content: "";
  width: 1px;
  height: 1.7rem;
  background-color: var(--color-black-20);
  position: absolute;
  right: calc(-0.75rem);
}

/* SKELETON BLOCK */

/* Menu */

#menu details.skeleton::after {
  content: '';
  display: block;
  height: calc(44px * 5);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 332 88' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23F2F2F2' x='16' y='10' width='240' height='24' rx='8' ry='8'/%3E%3Crect fill='%23F2F2F2' x='16' y='54' width='160' height='24' rx='8' ry='8'/%3E%3C/svg%3E%0A");
  background-repeat: repeat-y;
  mask-image: linear-gradient(to bottom, black 50%, white);
  animation: skeleton-menu 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

@keyframes skeleton-menu {
  0%   { opacity: .25 }
  100% { opacity: .75 }
}

/* Section */

section.skeleton {
  height: 100%;
}

section.skeleton::before,
section.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='244' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
  background-repeat: repeat-y;
  background-size: 1080px 260px;
  background-position-x: left;
  mask-image: linear-gradient(to bottom, black 50%, white);
  animation: skeleton-section 1s -.25s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

section.skeleton::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='224' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1060' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1060' y='224' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
  background-size: 1080px 260px;
  background-position-x: right;
  animation: none;
  mask-image: none;
}

@media (min-width: 1530px) {
  section.skeleton::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='140' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
    background-size: 3468px 156px;
  }
  section.skeleton::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='3448' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='3448' cy='120' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='3448' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='3448' y='120' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
    background-size: 3468px 156px;
  }
}

@keyframes skeleton-section {
  0%   { opacity: .50 }
  100% { opacity: 1.0 }
}

/* SKIP-LINK BLOCK */

/* The skip link is visually hidden when it is not focused. */

/* It exists so when a user hits tab on load, they can quickly */

/* skip to the main content of the site—avoiding navigation etc */

.skip-link {
  z-index: 9999;
  display: inline-block;
  width: max-content;
  max-width: 10rem;
  right: var(--gutter);
  width: auto;
  line-height: 1;
  position: absolute;
}

.skip-link:focus,
.skip-link:focus-visible {
  background: var(--color-text);
  color: var(--color-background) !important;
}

.skip-link:not(:focus) {
  /* @extend .visually-hidden */
  border: 0;
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* TRACK BLOCK */

/* Container */

.track {
  --w: 100%;
  --h: calc(100% - 4.666rem);
  --x-steps: 14;
  --y-steps: 5;
  width: var(--w);
  height: var(--h);
  position: relative;
  margin-top: var(--space-16);
  border-radius: var(--rounded-lg);
  display: flex;
  gap: var(--gap);
}

.track figure {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.track img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--bg-color, transparent);
  margin: auto;
  border-radius: var(--rounded-lg);
}

.track fieldset {
  --p: 0rem;
  margin: 0;
  padding: 0;
  width: var(--w);
  height: var(--h);
  border: none;
}

/* Buttons */

.track .btn--icon {
  --icon-size: var(--space-24);
  --icon-color: var(--color-grey-700);
  width: var(--space-48);
  height: var(--space-48);
  max-height: var(--space-48);
  background: transparent;
  padding: var(--space-12);
  position: absolute;
}

.track .btn--icon:hover {
  background: var(--color-black-10);
}

.track .y-up {
  top: var(--p);
}

.track .y-up::before {
  transform: rotate(90deg);
}

.track .y-down {
  bottom: var(--p);
}

.track .y-down::before {
  transform: rotate(-90deg);
}

.track .y-up,
.track .y-down {
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

.track .x-down {
  left: var(--p);
}

.track .x-up {
  right: var(--p);
}

.track .x-up::before {
  transform: rotate(180deg);
}

.track .x-down,
.track .x-up {
  top: 50%;
  transform: translateY(-50%);
}

/* Helper */

.track #helper {
  --row-gap: .5rem;
  position: absolute;
  inset: -5.75rem -1rem -1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='540' fill='none' viewBox='0 0 500 540'%3E%3Cpath stroke='url(%23a)' stroke-width='2' d='M497 337c0 .64-.29 1.37-1.03 2.2-.75.82-1.9 1.68-3.51 2.57-3.21 1.76-8.01 3.5-14.28 5.16-12.53 3.33-30.7 6.34-53.22 8.88C379.95 360.87 317.73 364 249 364s-130.94-3.13-175.96-8.2c-22.51-2.53-40.69-5.54-53.22-8.87-6.27-1.67-11.07-3.4-14.28-5.16a13.54 13.54 0 0 1-3.51-2.58C1.29 338.37 1 337.64 1 337c0-.64.29-1.37 1.03-2.2.74-.82 1.9-1.68 3.51-2.57 3.21-1.76 8.01-3.5 14.28-5.16 12.53-3.33 30.7-6.34 53.22-8.88C118.06 313.13 180.27 310 249 310s130.94 3.13 175.96 8.2c22.51 2.53 40.69 5.54 53.22 8.87 6.27 1.67 11.07 3.4 14.28 5.16 1.6.89 2.77 1.75 3.51 2.58.74.82 1.03 1.55 1.03 2.19Z'/%3E%3Cpath stroke='url(%23b)' stroke-width='2' d='M248.9 1.09a.73.73 0 0 1 .1-.08l.1.08c.14.13.33.37.56.78.44.82.92 2.1 1.4 3.88.96 3.53 1.9 8.78 2.79 15.6 1.79 13.62 3.4 33.36 4.76 57.79C261.32 127.97 263 195.45 263 270c0 74.55-1.68 142.03-4.4 190.86-1.35 24.43-2.96 44.17-4.75 57.8-.9 6.81-1.83 12.06-2.8 15.6a18.76 18.76 0 0 1-1.4 3.87 3.08 3.08 0 0 1-.65.86 3.08 3.08 0 0 1-.66-.86c-.44-.82-.92-2.1-1.4-3.88-.96-3.53-1.9-8.78-2.79-15.6-1.79-13.62-3.4-33.36-4.76-57.79C236.68 412.03 235 344.55 235 270c0-74.55 1.68-142.03 4.4-190.86 1.35-24.43 2.96-44.17 4.75-57.8.9-6.81 1.83-12.06 2.8-15.6.47-1.77.95-3.05 1.4-3.87.22-.4.4-.65.55-.78Zm.06 537.92h.01Zm.07 0Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='249' x2='249' y1='301.5' y2='365' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.07' stop-color='%23666' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='225.5' x2='264' y1='270' y2='270' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.13' stop-color='%23666' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  justify-content: center;
  z-index: 100;
}

.track #helper > * {
  width: 100%;
  max-width: 25rem;
}

.track #helper > *:first-child {
  margin-top: -15rem;
}

.drag-zone {
  cursor: grab;
}

.grabbing {
  cursor: grabbing;
}

/* Empty */

.track-empty {
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-black-20);
}

/* UTILITY CLASSES */

/* BORDER UTILITY */

/* Borders */

.border-t { border-top:    var(--border) }

.border-b { border-bottom: var(--border) }

.border-l { border-left:   var(--border) }

.border-r { border-right:  var(--border) }

.border   { border:        var(--border) }

/* Border Colors */

.border-grey-200 { border-color: var(--color-grey-200) }

/* Border radius */

.rounded-xs   { border-radius: var(--rounded-xs)   }

.rounded-sm   { border-radius: var(--rounded-sm)   }

.rounded-md   { border-radius: var(--rounded-md)   }

.rounded-lg   { border-radius: var(--rounded-lg)   }

.rounded-xl   { border-radius: var(--rounded-xl)   }

.rounded-2xl  { border-radius: var(--rounded-2xl)  }

.rounded-full { border-radius: var(--rounded-gull) }

/* COLORS UTILITY */

/* Text colors */

.text-white {
  color: var(--color-white);
}

.text-white-50 {
  color: var(--color-white-50);
}

.text-white-70 {
  color: var(--color-white-70);
}

.text-grey-200 {
  color: var(--color-grey-200);
}

.text-grey-400 {
  color: var(--color-grey-400);
}

.text-grey-700 {
  color: var(--color-grey-700);
}

.text-grey-800 {
  color: var(--color-grey-800);
}

.text-background {
  color: var(--color-background);
}

.text-transparent {
  color: transparent;
}

.text-brand-100 {
  color: var(--color-brand-100);
}

.text-primary-100,
.text-primary {
  color: var(--color-primary);
}

/* Background colors */

.bg-white-100,
.bg-white {
  background-color: var(--color-white, white);
}

.bg-white-05 {
  background-color: var(--color-white-05);
}

.bg-white-10 {
  background-color: var(--color-white-10);
}

.bg-white-20 {
  background-color: var(--color-white-20);
}

.bg-grey-50 {
  background-color: var(--color-grey-50);
}

.bg-grey-200 {
  background-color: var(--color-grey-200);
}

.bg-grey-800 {
  background-color: var(--color-grey-800);
}

.bg-primary-100,
.bg-primary {
  background-color: var(--color-primary);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-black-50 {
  background-color: var(--color-black-50);
}

/* COUNTER UTILITY */

.counter {
  counter-reset: selected-items;
}

.counter > [aria-selected="true"]:first-of-type {
  outline: 2px solid red;
}

.counter > [aria-selected="true"] {
  counter-increment: selected-items;
}

/* FLEX COMPOSITION */

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--column-gap, var(--gutter, var(--space-8)));
  row-gap: var(--row-gap, var(--gutter, var(--space-8)));
}

.flex-col,
.flex-col-reverse {
  flex-direction: column;
  flex-wrap: nowrap;
  --row-gap: var(--space-16);
}

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

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

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

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

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

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

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

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.flex-1 {
  flex: 1 1 0%;
}

/* FLOW UTILITY */

/* Info: https://web.dev/design-system/css-utilities/#flow */

.flow > * + * {
  margin-top: var(--flow-space);
}

/* ICONS UTILITY */

:root {
  --icon-circle: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='8' stroke='currentColor' stroke-width='1.25'/%3E%3C/svg%3E%0A");
  --icon-point: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='currentColor'/%3E%3C/svg%3E%0A");
  --icon-point-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='currentColor'/%3E%3Ccircle cx='50%' cy='50%' r='8' fill='currentColor' opacity='0.2'/%3E%3C/svg%3E%0A");
  --icon-home: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 10L10 1.875L18.125 10M4.375 11.875V18.125H15.625V11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-calendar: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.125 4.375C2.79348 4.375 2.47554 4.5067 2.24112 4.74112C2 4.97554 1.875 5.29348 1.875 5.625V16.875C1.875 17.2065 2 17.5245 2.24112 17.7589C2.47554 18 2.79348 18.125 3.125 18.125H16.875C17.2065 18.125 17.5245 18 17.7589 17.7589C18 17.5245 18.125 17.2065 18.125 16.875V5.625C18.125 5.29348 18 4.97554 17.7589 4.74112C17.5245 4.5067 17.2065 4.375 16.875 4.375H14.375M1.875 9.375H18.125M5.625 1.875V6.875M14.375 1.875V6.875M5.625 4.375H11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-check: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-check-2: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-check-3: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.125C5.2203 15.2094 6.00426 14.4527 6.93901 13.9276C7.87376 13.4025 8.92787 13.1267 10 13.1267C11.0721 13.1267 12.1262 13.4025 13.061 13.9276C14 14.4527 14.7797 15.2094 15.3375 16.125M13.125 8.125C13.125 9.85089 11.7259 11.25 10 11.25C8.27411 11.25 6.875 9.85089 6.875 8.125C6.875 6.39911 8.27411 5 10 5C11.7259 5 13.125 6.39911 13.125 8.125ZM18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-megaphone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.85 14.4624C11.7448 15.3307 11.3125 16.1262 10.6412 16.687C10 17.2477 9.11024 17.5315 8.23708 17.4805C7.36393 17.4295 6.54305 17.0476 5.94162 16.4125C5.34019 15.7775 5.00346 14.937 5 14.0624V12.0749M17.3 16.3374L2.7125 11.2499C2.47448 11.1669 2.26713 11.0138 2.11767 10.8108C1.96821 10.6078 1.88362 10.3644 1.875 10.1124V8.74991C1.87603 8.49151 1.95711 8.23979 2.10709 8.02937C2.25707 7.81895 2.46858 7.66018 2.7125 7.57491L17.3 2.49991C17.3937 2.46828 17.4935 2.45931 17.5913 2.47374C17.6891 2.48817 17.782 2.5256 17.8626 2.58294C17.9431 2.64028 18.0089 2.7159 18.0545 2.8036C18.1 2.89129 18.1243 2.98856 18.125 3.08741V15.7499C18.1243 15.8488 18.1 15.946 18.0545 16.0337C18.0089 16.1214 17.9431 16.197 17.8626 16.2544C17.782 16.3117 17.6891 16.3491 17.5913 16.3636C17.4935 16.378 17.3937 16.369 17.3 16.3374Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-leaf: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' d='M6.67 15c9.96 0 10.76-8.48 10.83-12.5a.82.82 0 0 0-.84-.83C2.5 1.93 2.5 8.8 2.5 15m0 0v3.33m0-3.33s0-5 6.67-5.83'/%3E%3C/svg%3E");
  --icon-leaf-thin: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.75' d='M6.67 15c9.96 0 10.76-8.48 10.83-12.5a.82.82 0 0 0-.84-.83C2.5 1.93 2.5 8.8 2.5 15m0 0v3.33m0-3.33s0-5 6.67-5.83'/%3E%3C/svg%3E");
  --icon-inspiration: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2.26245V4.13745M15 4.04995L13.6754 5.38745M17.8504 7.92495H15.9754M5 4.04995L6.32539 5.38745M2.15039 7.92495H4.02539M14.3754 11.25C14.3783 10.4699 14.1726 9.70317 13.7796 9.02932C13.3865 8.35547 12.8205 7.79897 12.14 7.41746C11.4596 7.03595 10.6895 6.84332 9.90957 6.85952C9.12964 6.87572 8.36823 7.10016 7.70421 7.50959C7.04019 7.91903 6.49773 8.49856 6.13301 9.18815C5.7683 9.87774 5.5946 10.6523 5.6299 11.4316C5.66521 12.2109 5.90825 12.9666 6.33383 13.6204C6.75942 14.2741 7.35207 14.8022 8.05039 15.15V17.3C8.05365 17.4271 8.10645 17.5479 8.19752 17.6366C8.28859 17.7254 8.41073 17.775 8.53789 17.775H11.4629C11.59 17.775 11.7122 17.7254 11.8033 17.6366C11.8943 17.5479 11.9471 17.4271 11.9504 17.3V15.1125C12.6707 14.7539 13.2782 14.2036 13.706 13.5222C14.1338 12.8407 14.3654 12.0545 14.3754 11.25Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-user: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.875C5.2203 15.9594 6.00426 15.2027 6.93901 14.6776C7.87376 14.1525 8.92787 13.8767 10 13.8767C11.0721 13.8767 12.1262 14.1525 13.061 14.6776C14 15.2027 14.7797 15.9594 15.3375 16.875M13.125 8.875C13.125 10.6009 11.7259 12 10 12C8.27411 12 6.875 10.6009 6.875 8.875C6.875 7.14911 8.27411 5.75 10 5.75C11.7259 5.75 13.125 7.14911 13.125 8.875ZM18.125 10.75C18.125 15.2373 14.4873 18.875 10 18.875C5.51269 18.875 1.875 15.2373 1.875 10.75C1.875 6.26269 5.51269 2.625 10 2.625C14.4873 2.625 18.125 6.26269 18.125 10.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-logout: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.125 15.125V17.625C13.125 17.9565 13 18.2745 12.7589 18.5089C12.5245 18.7433 12.2065 18.875 11.875 18.875H3.125C2.79348 18.875 2.47554 18.7433 2.24112 18.5089C2 18.2745 1.875 17.9565 1.875 17.625V3.875C1.875 3.54348 2 3.22554 2.24112 3C2.47554 2.7567 2.79348 2.625 3.125 2.625H11.875C12.2065 2.625 12.5245 2.7567 12.7589 3C13 3.22554 13.125 3.54348 13.125 3.875V6.375M9.375 10.75H18.125M18.125 10.75L15.625 8.25M18.125 10.75L15.625 13.25' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-summary: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='%235E6060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-favorite: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.8126L3.1 10.5626C-0.65 6.81262 4.8625 -0.387383 10 5.43762C15.1375 -0.387383 20.625 6.83762 16.9 10.5626L10 16.8126Z' fill='currentColor'/%3E%3C/svg%3E%0A");
  --icon-chevron-single-down: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-chevron-single-down-grey: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='%235E6060' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-chevron-single-left: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.9377 1.875L6.25019 9.5625C6.1904 9.61861 6.14275 9.68638 6.11017 9.76163C6.0776 9.83688 6.06079 9.918 6.06079 10C6.06079 10.082 6.0776 10.1631 6.11017 10.2384C6.14275 10.3136 6.1904 10.3814 6.25019 10.4375L13.9377 18.125' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-chevron-single-right: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' style='transform:rotate(180deg)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.9377 1.875L6.25019 9.5625C6.1904 9.61861 6.14275 9.68638 6.11017 9.76163C6.0776 9.83688 6.06079 9.918 6.06079 10C6.06079 10.082 6.0776 10.1631 6.11017 10.2384C6.14275 10.3136 6.1904 10.3814 6.25019 10.4375L13.9377 18.125' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-votre-brief: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0625 5.8375C13.9088 5.60629 13.7056 5.41211 13.4677 5.26897C13.2298 5.12583 12.9631 5.0373 12.6869 5.0098C12.4106 5 12.1316 5.01648 11.8702 5.1099C11.6087 5.20332 11.3713 5.35364 11.175 5.55M1.875 18.125L8.85 11.7875M18.125 7.5C18.125 10.6066 15.6066 13.125 12.5 13.125C9.3934 13.125 6.875 10.6066 6.875 7.5C6.875 4.3934 9.3934 1.875 12.5 1.875C15.6066 1.875 18.125 4.3934 18.125 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-offre-commerciale: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10H14.375M5.625 13.75H14.375M3.125 5.625H16.875C17.5654 5.625 18.125 6.18464 18.125 6.875V16.875C18.125 17.5654 17.5654 18.125 16.875 18.125H3.125C2.43464 18.125 1.875 17.5654 1.875 16.875V6.875C1.875 6.18464 2.43464 5.625 3.125 5.625ZM7.5 1.875H12.5C12.8315 1.875 13.1495 2 13.3839 2.24112C13.6183 2.47554 13.75 2.79348 13.75 3.125V5.625H6.25V3.125C6.25 2.79348 6.3817 2.47554 6.61612 2.24112C6.85054 2 7.16848 1.875 7.5 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-brief-enrichi: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8751 7.5C12.5655 7.5 13.1251 6.94036 13.1251 6.25C13.1251 5.55965 12.5655 5 11.8751 5C11.1848 5 10.6251 5.55965 10.6251 6.25C10.6251 6.94036 11.1848 7.5 11.8751 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 13.75C7.22029 13.75 7.50011 13.4702 7.50011 13.125C7.50011 12.7798 7.22029 12.5 6.87511 12.5C6.52993 12.5 6.25011 12.7798 6.25011 13.125C6.25011 13.4702 6.52993 13.75 6.87511 13.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 9.375C7.56547 9.375 8.12511 8.81536 8.12511 8.125C8.12511 7.43465 7.56547 6.875 6.87511 6.875C6.18476 6.875 5.62511 7.43465 5.62511 8.125C5.62511 8.81536 6.18476 9.375 6.87511 9.375Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.1501 16.6C13.1362 16.3575 13.0519 16.1244 12.9076 15.929C12.7633 15.7337 12.5653 15.5846 12.3376 15.5C11.7722 15.3142 11.2917 14.9328 10.9824 14.4243C10.6731 13.9159 10.5553 13.3138 10.6502 12.7263C10.7451 12.1388 11.0465 11.6044 11.5 11.2192C11.9538 10.8341 12.53 10.6234 13.1251 10.625H15.4626C15.8635 10.6261 16.2588 10.5308 16.6152 10.3471C16.9715 10.1634 17.2784 9.89665 17.5101 9.56942C17.7417 9.24219 17.8913 8.86406 17.9461 8.46691C18 8.06976 17.9594 7.66525 17.8251 7.2875C17.3279 5.88371 16.4545 4.64357 15.3003 3.70256C14.146 2.76155 12.7553 2.15588 11.2801 1.95172C9.80497 1.74756 8.30206 1.95276 6.93562 2.5449C5.56917 3.13705 4.39176 4.09335 3.53201 5.30935C2.67226 6.52534 2.16325 7.95424 2.06059 9.43993C1.95793 10.9256 2.26558 12.4109 2.94991 13.7336C3.63425 15.0563 4.66895 16.1655 5.94096 16.9399C7.21298 17.7144 8.67338 18.1243 10.1626 18.125C10.8981 18.1271 11.6302 18.0261 12.3376 17.825C12.5974 17.7522 12.8224 17.5884 12.9716 17.3636C13.1207 17.1387 13.1841 16.8677 13.1501 16.6Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-echantillon-virtuel: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 18V8.12502M10 8.12502L2.01294 5M10 8.12502L17.9879 5M17.9875 5C17.9209 5 17.8298 4.8402 17.725 4.8L10.225 1.96249C10.154 1.93151 10 1.91553 10 1.91553C9.92257 1.91553 9.84597 1.93151 9.775 1.96249L2.275 4.84999C2.17591 4.87623 2.08542 4.92794 2 5C1.92519 5.10562 1.87666 5.23795 1.875 5.37499V14.525C1.87662 14.6498 1.91559 14.7713 2 14.8738C2.05817 14.9763 2.15852 15 2.275 15.1L9.775 18H10.225L17.725 15C17.8415 15 18 15 18 15C18.0844 14.7713 18.1234 14.6498 18.125 14.525V5.425C18.1356 5.2709 18 5.11868 18 5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-upload: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.714 15v1.429a2.857 2.857 0 0 0 2.857 2.857H16.43a2.857 2.857 0 0 0 2.857-2.857V15M5.714 5.714l4.286-5m0 0 4.286 5M10 .714v12.857' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
  --icon-description: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714294 1.42856H19.2857M0.714294 5.71427H15M0.714294 10H10.7143M0.714294 18.5714H19.2857M0.714294 14.2857H15' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-delete: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4286 7.85713L15 19.2857H5L3.57145 7.85713M1.42859 5H18.5714M6.37145 4.5857V2.11427C6.37145 1.73539 6.52196 1.37203 6.78986 1.10412C7.05777 0.836209 7.42114 0.685699 7.8 0.685699H12.0857C12.4646 0.685699 12.828 0.836209 13.0959 1.10412C13.3638 1.37203 13.5143 1.73539 13.5143 2.11427V4.97141' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-edit: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714233 19.2858H16.4285M9.28571 14.2858L5 15.0573L5.71428 10.7144L15.3286 1.12868C15.4614 1 15.6194 0.888509 15.7935 0.815983C15.9675 0.743456 16.1543 0.706116 16.3428 0.706116C16.5314 0.706116 16.7182 0.743456 16.8922 0.815983C17.0663 0.888509 17.2243 1 17.3571 1.12868L18.8714 2.64297C19.0053 2.77577 19.1116 2.93378 19.1841 3.10786C19.2567 3.28195 19.294 3.46867 19.294 3.65726C19.294 3.84584 19.2567 4.03257 19.1841 4.20665C19.1116 4.38074 19.0053 4.53874 18.8714 4.67154L9.28571 14.2858Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 10H1.875M1.875 10L6.25 5.625M1.875 10L6.25 14.375' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' style='transform:rotate(180deg)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 10H1.875M1.875 10L6.25 5.625M1.875 10L6.25 14.375' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-document: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7143 0.714294H3.57145C3.19257 0.714294 2.82921 0.864804 2.5613 1.13271C2.29339 1.40062 2.14288 1.76399 2.14288 2.14287V17.8572C2.14288 18.236 2.29339 18.5994 2.5613 18.8673C2.82921 19.1352 3.19257 19.2857 3.57145 19.2857H16.4286C16.8075 19.2857 17.1708 19.1352 17.4387 18.8673C17.7067 18.5994 17.8572 18.236 17.8572 17.8572V7.85715M10.7143 0.714294L17.8572 7.85715M10.7143 0.714294V7.85715H17.8572' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-document-thin: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7143 0.714294H3.57145C3.19257 0.714294 2.82921 0.864804 2.5613 1.13271C2.29339 1.40062 2.14288 1.76399 2.14288 2.14287V17.8572C2.14288 18.236 2.29339 18.5994 2.5613 18.8673C2.82921 19.1352 3.19257 19.2857 3.57145 19.2857H16.4286C16.8075 19.2857 17.1708 19.1352 17.4387 18.8673C17.7067 18.5994 17.8572 18.236 17.8572 17.8572V7.85715M10.7143 0.714294L17.8572 7.85715M10.7143 0.714294V7.85715H17.8572' stroke='%235E6060' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-comment: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10.625C5.97018 10.625 6.25 10.3452 6.25 10C6.25 9.65482 5.97018 9.375 5.625 9.375C5.27982 9.375 5 9.65482 5 10C5 10.3452 5.27982 10.625 5.625 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6875 10.625C10.0327 10.625 10.3125 10.3452 10.3125 10C10.3125 9.65482 10.0327 9.375 9.6875 9.375C9.34232 9.375 9.0625 9.65482 9.0625 10C9.0625 10.3452 9.34232 10.625 9.6875 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.75 10.625C14.0952 10.625 14.375 10.3452 14.375 10C14.375 9.65482 14.0952 9.375 13.75 9.375C13.4048 9.375 13.125 9.65482 13.125 10C13.125 10.3452 13.4048 10.625 13.75 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 1.875C8.5303 1.87546 7.08825 2.27455 5.82743 3.02977C4.56661 3.78499 3.53425 4.86805 2.84029 6.1636C2.14634 7.45914 1.81679 8.91866 1.88674 10.3867C1.95668 11.8547 2.42351 13.2763 3.2375 14.5L1.875 18.125L6.4375 17.3C7.53613 17.8369 8.74178 18.1188 9.96456 18.1249C11.1873 18.131 12.3957 17.8609 13.4996 17.335C14.6035 16.809 15.5745 16.0407 16.3401 15.0872C17.1057 14.1338 17.6462 13.0198 17.9214 11.8284C18.1966 10.637 18.1993 9.39878 17.9293 8.20616C17.6593 7.01354 17.1237 5.89723 16.3622 4.94046C15.6008 3.98368 14.6332 3.21111 13.5316 2.68034C12.43 2.14957 11.2228 1.87428 10 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-comment-default: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.973 27C12.1247 27 10.2642 26.6093 8.52348 25.8037C8.01058 25.598 7.53034 25.4045 7.18558 25.4045C6.78881 25.4069 6.25534 25.5908 5.74002 25.7686C4.68277 26.1315 3.36665 26.5839 2.39286 25.6138C1.4227 24.6424 1.87028 23.33 2.23076 22.2739C2.40859 21.7538 2.59125 21.2167 2.59125 20.8103C2.59125 20.4764 2.43036 20.0506 2.18359 19.4373C-0.0821271 14.5443 0.965448 8.64734 4.80857 4.80674C7.26179 2.35238 10.5267 1 14.0021 1C17.4775 1 20.7436 2.35117 23.1968 4.80553C28.2677 9.87634 28.2677 18.1261 23.1968 23.1969C20.7109 25.6839 17.3638 27 13.973 27Z' fill='%239DA0A0' stroke='%23373838' stroke-width='2'/%3E%3C/svg%3E%0A");
  --icon-comment-new: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.973 27C12.1247 27 10.2642 26.6093 8.52348 25.8037C8.01058 25.598 7.53034 25.4045 7.18558 25.4045C6.78881 25.4069 6.25534 25.5908 5.74002 25.7686C4.68277 26.1315 3.36665 26.5839 2.39286 25.6138C1.4227 24.6424 1.87028 23.33 2.23076 22.2739C2.40859 21.7538 2.59125 21.2167 2.59125 20.8103C2.59125 20.4764 2.43036 20.0506 2.18359 19.4373C-0.0821271 14.5443 0.965448 8.64734 4.80857 4.80674C7.26179 2.35238 10.5267 1 14.0021 1C17.4775 1 20.7436 2.35117 23.1968 4.80553C28.2677 9.87634 28.2677 18.1261 23.1968 23.1969C20.7109 25.6839 17.3638 27 13.973 27Z' fill='%2300968F' stroke='white'/%3E%3C/svg%3E%0A");
  --icon-comment-focus: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.973 27C12.1247 27 10.2642 26.6093 8.52348 25.8037C8.01058 25.598 7.53034 25.4045 7.18558 25.4045C6.78881 25.4069 6.25534 25.5908 5.74002 25.7686C4.68277 26.1315 3.36665 26.5839 2.39286 25.6138C1.4227 24.6424 1.87028 23.33 2.23076 22.2739C2.40859 21.7538 2.59125 21.2167 2.59125 20.8103C2.59125 20.4764 2.43036 20.0506 2.18359 19.4373C-0.0821271 14.5443 0.965448 8.64734 4.80857 4.80674C7.26179 2.35238 10.5267 1 14.0021 1C17.4775 1 20.7436 2.35117 23.1968 4.80553C28.2677 9.87634 28.2677 18.1261 23.1968 23.1969C20.7109 25.6839 17.3638 27 13.973 27Z' fill='%239DA0A0' stroke='%2300968F' stroke-width='2'/%3E%3C/svg%3E%0A");
  --icon-comment-cursor: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.973 26C11.1247 26 9.26419 25.6093 7.52348 24.8037C7.01058 24.598 6.53034 24.4045 6.18558 24.4045C5.78881 24.4069 5.25534 24.5908 4.74002 24.7686C3.68277 25.1315 2.36665 25.5839 1.39286 24.6138C0.422704 23.6424 0.870283 22.33 1.23076 21.2739C1.40859 20.7538 1.59125 20.2167 1.59125 19.8103C1.59125 19.4764 1.43036 19.0506 1.18359 18.4373C-1.08213 13.5443 -0.0345516 7.64734 3.80857 3.80674C6.26179 1.35238 9.52669 0 13.0021 0C16.4775 0 19.7436 1.35117 22.1968 3.80553C27.2677 8.87634 27.2677 17.1261 22.1968 22.1969C19.7109 24.6839 16.3638 26 12.973 26Z' fill='%23191919'/%3E%3C/svg%3E%0A");
  --icon-cursor: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5068 8.03528C17.702 7.95393 17.828 7.91781 17.9439 7.80197C18.0599 7.68613 18.125 7.52902 18.125 7.3652C18.125 7.20138 18.0599 7.04427 17.9439 6.92843C17.828 6.81259 17.7889 6.74318 17.5068 6.66046C17.2248 6.57774 3.51177 1.94191 3.51177 1.94191C3.29294 1.86704 3.05748 1.85502 2.83215 1.90721C2.60682 1.9594 2.40066 2.07371 2.23711 2.23714C2.07355 2.40057 1.95916 2.60657 1.90693 2.83173C1.8547 3.05688 1.86673 3.29217 1.94165 3.51083C1.94165 3.51083 6.68713 17.3199 6.7451 17.5076C6.80307 17.6953 6.87786 17.8286 6.99378 17.9444C7.10971 18.0602 7.26694 18.1253 7.43089 18.1253C7.59483 18.1253 7.75206 18.0602 7.86799 17.9444C7.98392 17.8286 8.01041 17.7629 8.09732 17.5076C8.18422 17.2523 10.5217 10.5154 10.5217 10.5154C10.5217 10.5154 17.3117 8.11664 17.5068 8.03528Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 18.125C12.5975 15.9812 11.4464 14.0502 9.75217 12.6765C8.0579 11.3028 5.93065 10.5757 3.75 10.625C3.12085 10.6233 2.49298 10.6819 1.875 10.8M18.125 13.6375C17.1182 13.2975 16.0626 13.1244 15 13.125C13.6549 13.1221 12.3235 13.3943 11.0875 13.925M16.8875 18.125H3.1375C2.44714 18.125 1.8875 17.5654 1.8875 16.875V3.125C1.8875 2.43464 2.44714 1.875 3.1375 1.875H16.8875C17.5779 1.875 18.1375 2.43464 18.1375 3.125V16.875C18.1375 17.5654 17.5779 18.125 16.8875 18.125ZM15 7.1875C15 8.39562 14.0206 9.375 12.8125 9.375C11.6044 9.375 10.625 8.39562 10.625 7.1875C10.625 5.97938 11.6044 5 12.8125 5C14.0206 5 15 5.97938 15 7.1875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-change: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 12.5L17.5 11.875M17.5 11.875L18.125 14.375M17.5 11.875C16.9448 13.4483 15.9363 14.822 14.6016 15.823C13.2669 16.824 11.6658 17.4075 10 17.5C8.46014 17.5003 6.95752 17.0266 5.69623 16.1432C4.43494 15.2599 3.47612 14.0097 2.95 12.5625M5 7.5L2.5 8.125M2.5 8.125L1.875 5.625M2.5 8.125C3.55 5.25 6.775 2.5 10 2.5C11.5474 2.50435 13.0555 2.9872 14.3177 3.88235C15.5798 4.7775 16.5342 6.04113 17.05 7.5' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-loop: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.50002 14.2875C6.97688 14.7358 6.31385 14.9877 5.62502 15C5.12053 15.0484 4.61159 14.9846 4.13463 14.8133C3.65767 14.6419 3.2245 14.3672 2.86613 14.0089C2.50777 13.6505 2.23308 13.2173 2.06174 12.7404C1.89039 12.2634 1.82663 11.7545 1.87502 11.25C1.82663 10.7455 1.89039 10.2366 2.06174 9.75961C2.23308 9.28265 2.50777 8.84948 2.86613 8.49112C3.2245 8.13275 3.65767 7.85806 4.13463 7.68672C4.61159 7.51537 5.12053 7.45161 5.62502 7.5C9.06252 7.5 10.9375 15 14.375 15C14.8795 15.0484 15.3885 14.9846 15.8654 14.8133C16.3424 14.6419 16.7755 14.3672 17.1339 14.0089C17.4923 13.6505 17.767 13.2173 17.9383 12.7404C18.1096 12.2634 18.1734 11.7545 18.125 11.25C18.1734 10.7455 18.1096 10.2366 17.9383 9.75961C17.767 9.28265 17.4923 8.84948 17.1339 8.49112C16.7755 8.13275 16.3424 7.85806 15.8654 7.68672C15.3885 7.51537 14.8795 7.45161 14.375 7.5H11.875L14.375 5' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-pause: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5V15M13 5V15' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-download: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.25 9.375L10 13.125M10 13.125L13.75 9.375M10 13.125V1.875M5.625 18.125H14.375' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-close: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 1.875L1.875 18.125M1.875 1.875L18.125 18.125' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --icon-grade-A: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.30393 3.96806L3.11993 16.1601C3.00793 16.4641 2.83193 16.7041 2.59193 16.8801C2.36793 17.0401 2.11993 17.1201 1.84793 17.1201C1.41593 17.1201 1.09593 17.0 0.887928 16.7601C0.679928 16.5201 0.575928 16.2241 0.575928 15.8721C0.575928 15.7281 0.6 15.5761 0.647928 15.4161L6.62393 1.06406C6.75193 0.744065 6.94393 0.496065 7.2 0.320064C7.47193 0.144065 7.75993 0.0720646 8.06393 0.104064C8.35193 0.104064 8.61593 0.192064 8.85593 0.368065C9.11193 0.528065 9.29593 0.760065 9.40793 1.06406L15.3119 15.1281C15.3919 15.3361 15.4319 15.5281 15.4319 15.7041C15.4319 16.1361 15.2879 16.4801 14.9999 16.7361C14.7279 17 14.4239 17.1201 14.0879 17.1201C13.7999 17.1201 13.5359 17.0321 13.2959 16.8561C13.0719 16.6801 12.8959 16.4401 12.7679 16.1361L7.60793 4.11207L8.30393 3.96806ZM3.86393 13.2321L5.18393 10.4721H11.6639L12.1199 13.2321H3.86393Z' fill='%2300945B'/%3E%3C/svg%3E%0A");
  --icon-grade-B: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1121 0.6C9.6481 0.6 10.7921 0.96 11.5441 1.6801C12.2961 2.4 12.6721 3.4641 12.6721 4.8721C12.6721 5.6241 12.4881 6.2881 12.1201 6.8641C11.7521 7.4241 11.2081 7.8641 10.4881 8.1841C9.7681 8.4881 8.8801 8.6401 7.8241 8.6401L7.9201 7.5601C8.4161 7.5601 8.9841 7.6321 9.6241 7.7761C10.2641 7.9041 10.8801 8.1441 11.4721 8.4961C12.0801 8.8321 12.5761 9.3121 12.9601 9.9361C13.3601 10.5441 13.5601 11.3281 13.5601 12.2881C13.5601 13.3441 13.3841 14.2081 13.0321 14.8801C12.6961 15.5521 12.2481 16.0721 11.6881 16.4401C11.1281 16.8081 10.5281 17.0641 9.8881 17.2081C9.2481 17.3361 8.6321 17.4 8.0401 17.4H2.0641C1.6481 17.4 1.2961 17.2641 1.0081 17C0.736098 16.7041 0.6 16.3521 0.6 15.9361V2.0641C0.6 1.6481 0.736098 1.3041 1.0081 1.0321C1.2961 0.744098 1.6481 0.6 2.0641 0.6H8.1121ZM7.6801 3.4321H3.4081L3.7201 3.0481V7.3921L3.4321 7.1761H7.7521C8.2161 7.1761 8.6321 7.0241 9.0 6.7201C9.3681 6.4161 9.5521 5.9761 9.5521 5.4C9.5521 4.7121 9.3761 4.2161 9.0241 3.9121C8.6881 3.5921 8.2401 3.4321 7.6801 3.4321ZM7.8721 10.0081H3.5041L3.7201 9.8161V14.8801L3.4801 14.6401H8.0401C8.7761 14.6401 9.3601 14.4481 9.7921 14.0641C10.2241 13.6641 10.4401 13.0721 10.4401 12.2881C10.4401 11.5681 10.2961 11.0481 10.0081 10.7281C9.7201 10.4081 9.3761 10.2081 8.9761 10.1281C8.5761 10.0481 8.2081 10.0081 7.8721 10.0081Z' fill='%235EAC0D'/%3E%3C/svg%3E%0A");
  --icon-grade-C: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6 1.35592C13.016 1.56392 13.256 1.89192 13.32 2.33992C13.4 2.78792 13.288 3.19592 12.984 3.56392C12.776 3.85192 12.504 4.01192 12.168 4.04392C11.848 4.07592 11.52 4.01192 11.184 3.85192C10.8 3.67592 10.392 3.53992 9.96 3.44392C9.544 3.34792 9.104 3.3 8.64 3.3C7.776 3.3 7 3.43592 6.312 3.70792C5.64 3.97992 5.064 4.37192 4.584 4.88392C4.104 5.37992 3.736 5.97192 3.48 6.65992C3.24 7.34792 3.12 8.10792 3.12 8.93992C3.12 9.91592 3.256 10.7639 3.528 11.4839C3.816 12.2039 4.208 12.8039 4.704 13.2839C5.2 13.7639 5.784 14.1239 6.456 14.3639C7.128 14.5879 7.856 14.6999 8.64 14.6999C9.072 14.6999 9.504 14.6599 9.936 14.5799C10.368 14.5 10.784 14.3559 11.184 14.1479C11.52 13.9879 11.848 13.9319 12.168 13.9799C12.504 14.0279 12.784 14.1959 13 14.4839C13.328 14.8839 13.44 15.3 13.344 15.7319C13.264 16.1479 13.024 16.4519 12.624 16.6439C12.208 16.8519 11.776 17.0279 11.328 17.1719C10.896 17.3 10.456 17.3959 10 17.4599C9.56 17.5399 9.104 17.5799 8.64 17.5799C7.488 17.5799 6.392 17.3959 5.352 17.0279C4.328 16.6599 3.408 16.1159 2.592 15.3959C1.792 14.6759 1.16 13.7799 0.696 12.7079C0.232 11.6199 0 10.3639 0 8.93992C0 7.70792 0.208 6.57192 0.624 5.53192C1.056 4.49192 1.656 3.59592 2.424 2.84392C3.208 2.07592 4.128 1.48392 5.184 1.06792C6.24 0.635922 7.392 0.419922 8.64 0.419922C9.344 0.419922 10.032 0.5 10.704 0.659922C11.376 0.819921 12 1.05192 12.6 1.35592Z' fill='%23EEAF10'/%3E%3C/svg%3E%0A");
  --icon-grade-D: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.7 0.6C8.852 0.6 9.876 0.816098 10.772 1.2481C11.668 1.6801 12.42 2.2881 13.028 3.0721C13.652 3.8401 14.116 4.7361 14.42 5.7601C14.74 6.7681 14.9 7.8481 14.9 9.0001C14.9 10.5521 14.62 11.9681 14.06 13.2481C13.5 14.5121 12.684 15.5201 11.612 16.2721C10.556 17.0241 9.252 17.4 7.7 17.4H1.964C1.548 17.4 1.196 17.2641 0.908 17C0.636 16.7041 0.5 16.3521 0.5 15.9361V2.0641C0.5 1.6481 0.636 1.3041 0.908 1.0321C1.196 0.744098 1.548 0.6 1.964 0.6H7.7ZM7.46 14.6401C8.468 14.6401 9.292 14.3841 9.932 13.8721C10.572 13.3441 11.036 12.6561 11.324 11.8081C11.628 10.9441 11.78 10.0081 11.78 9.0001C11.78 8.2481 11.692 7.5361 11.516 6.8641C11.356 6.1761 11.1 5.5761 10.748 5.0641C10.396 4.5361 9.948 4.1201 9.404 3.8161C8.86 3.5121 8.212 3.3601 7.46 3.3601H3.26L3.5 3.1441V14.9041L3.356 14.6401H7.46Z' fill='%23F26A4F'/%3E%3C/svg%3E%0A");
  --icon-grade-E: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.964 0.6H10.004C10.42 0.6 10.764 0.736098 11.036 1.0081C11.324 1.2641 11.468 1.6 11.468 2.0161C11.468 2.4161 11.324 2.7441 11.036 3.0001C10.764 3.2401 10.42 3.3601 10.004 3.3601H3.284L3.5 2.9521V7.6321L3.308 7.4401H8.924C9.34 7.4401 9.684 7.5761 9.956 7.8481C10.244 8.1041 10.388 8.4401 10.388 8.8561C10.388 9.2561 10.244 9.5841 9.956 9.8401C9.684 10.0801 9.34 10.2 8.924 10.2001H3.38L3.5 10.0081V14.8561L3.308 14.6401H10.004C10.42 14.6401 10.764 14.7841 11.036 15.0721C11.324 15.3441 11.468 15.6641 11.468 16.0321C11.468 16.4321 11.324 16.7601 11.036 17.0161C10.764 17.2721 10.42 17.4 10.004 17.4H1.964C1.548 17.4 1.196 17.2641 0.908 17C0.636 16.7041 0.5 16.3521 0.5 15.9361V2.0641C0.5 1.6481 0.636 1.3041 0.908 1.0321C1.196 0.744098 1.548 0.6 1.964 0.6Z' fill='%23F32D2F'/%3E%3C/svg%3E%0A");
}

[data-icon] {
  position: relative;
}

[data-icon]::before {
  content: "";
  display: inline-block;
  width: var(--icon-size, 1.25rem);
  height: var(--icon-size, 1.25rem);
  background: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--icon-size, 1.25rem);
  mask-image: var(--icon, var(--icon-circle));
}

[data-icon="home"] {
  --icon: var(--icon-home);
}

[data-icon="calendar"],
[data-icon="event"] {
  --icon: var(--icon-calendar);
}

[data-icon="leaf"] {
  --icon: var(--icon-leaf);
}

[data-icon="leaf-thin"] {
  --icon: var(--icon-leaf-thin);
}

[data-icon="megaphone"] {
  --icon: var(--icon-megaphone);
}

[data-icon="inspiration"] {
  --icon: var(--icon-inspiration);
}

[data-icon="user"] {
  --icon: var(--icon-user);
}

[data-icon="logout"] {
  --icon: var(--icon-logout);
}

[data-icon="favorite"] {
  --icon: var(--icon-favorite);
}

[data-icon="chevron-single-down"] {
  --icon: var(--icon-chevron-single-down);
}

[data-icon="chevron-single-left"] {
  --icon: var(--icon-chevron-single-left);
}

[data-icon="votre-brief"],
[data-icon="clientBrief"] {
  --icon: var(--icon-votre-brief);
}

[data-icon="offre-commerciale"],
[data-icon="proposal"] {
  --icon: var(--icon-offre-commerciale);
}

[data-icon="brief-enrichi"],
[data-icon="extendedBrief"],
[data-icon="industrialIdeation"] {
  --icon: var(--icon-brief-enrichi);
}

[data-icon="echantillon-virtuel"],
[data-icon="virtualSample"],
[data-icon="physicalSample"] {
  --icon: var(--icon-echantillon-virtuel);
}

[data-icon="upload"] {
  --icon: var(--icon-upload);
}

[data-icon="description"] {
  --icon: var(--icon-description);
}

[data-icon="delete"] {
  --icon: var(--icon-delete);
}

[data-icon="edit"] {
  --icon: var(--icon-edit);
}

[data-icon="arrow-left"] {
  --icon: var(--icon-arrow-left);
}

[data-icon="document"],
[data-icon="content"] {
  --icon: var(--icon-document);
}

[data-icon="comment"] {
  --icon: var(--icon-comment);
}

[data-icon="cursor"] {
  --icon: var(--icon-cursor);
}

[data-icon="image"] {
  --icon: var(--icon-image);
}

[data-icon="change"] {
  --icon: var(--icon-change);
}

[data-icon="loop"] {
  --icon: var(--icon-loop);
}

[data-icon="pause"] {
  --icon: var(--icon-pause);
}

[data-icon="download"] {
  --icon: var(--icon-download);
}

[data-icon="close"] {
  --icon: var(--icon-close);
}

/* OVERFLOW UTILITY */

.overflow-hidden {
  overflow: hidden;
}

.overflow-y {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

/* POSITION UTILITY */

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.sticky {
	position: -webkit-sticky;
	position: sitcky;
}

.fixed {
	position: fixed;
}

.inset-0  { inset:  0 }

.top-0    { top:    0 }

.bottom-0 { bottom: 0 }

.left-0   { left:   0 }

.right-0       { right:  0 }

.right-gutter  { right: var(--gutter) }

.bottom-gutter { bottom: var(--gutter) }

.-z-1 { z-index: -1 }

.z-max { z-index: 999 }

/* SCREEN READERS */

.sr-only {
  border: 0;
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* SIZE UTILITY */

.h-full {
	height: 100%;
}

.min-h-screen {
	min-height: 100vh;
	min-height: 100dvh;
}

.w-full {
	width: 100%;
}

.max-w {
	max-width: var(--max-w);
}

/* SPACING UTILITY */

/* Margins */

.m-0     { margin: 0 }

.mx-auto { margin-left: auto           ; margin-right: auto            }

.mx-px   { margin-left: 1px            ; margin-right: 1px             }

.mx-4    { margin-left: var(--space-4) ; margin-right: var(--space-4)  }

.mx-8    { margin-left: var(--space-8) ; margin-right: var(--space-8)  }

.mx-12   { margin-left: var(--space-12); margin-right: var(--space-12) }

.mx-16   { margin-left: var(--space-16); margin-right: var(--space-16) }

.mx-24   { margin-left: var(--space-24); margin-right: var(--space-24) }

.mx-32   { margin-left: var(--space-32); margin-right: var(--space-32) }

.my-4   { margin-top: var(--space-4) ; margin-bottom: var(--space-4)  }

.my-8   { margin-top: var(--space-8) ; margin-bottom: var(--space-8)  }

.my-12  { margin-top: var(--space-12); margin-bottom: var(--space-12) }

.my-16  { margin-top: var(--space-16); margin-bottom: var(--space-16) }

.my-24  { margin-top: var(--space-24); margin-bottom: var(--space-24) }

.my-32  { margin-top: var(--space-32); margin-bottom: var(--space-32) }

.mb-auto { margin-bottom: auto            }

.mb-0    { margin-bottom: 0               }

.mb-4    { margin-bottom: var(--space-4)  }

.mb-8    { margin-bottom: var(--space-8)  }

.mb-12   { margin-bottom: var(--space-12) }

.mb-16   { margin-bottom: var(--space-16) }

.mb-24   { margin-bottom: var(--space-24) }

.mb-32   { margin-bottom: var(--space-32) }

.ml-auto { margin-left: auto            }

.ml-4    { margin-left: var(--space-4)  }

.ml-8    { margin-left: var(--space-8)  }

.ml-12   { margin-left: var(--space-12) }

.ml-16   { margin-left: var(--space-16) }

.ml-24   { margin-left: var(--space-24) }

.mr-auto { margin-right: auto            }

.mr-4    { margin-right: var(--space-4)  }

.mr-8    { margin-right: var(--space-8)  }

.mr-12   { margin-right: var(--space-12) }

.mr-16   { margin-right: var(--space-16) }

.mr-24   { margin-right: var(--space-24) }

.-mt-px  { margin-top: -1px            }

.mt-auto { margin-top: auto            }

.mt-0    { margin-top: 0               }

.mt-4    { margin-top: var(--space-4)  }

.mt-8    { margin-top: var(--space-8)  }

.mt-12   { margin-top: var(--space-12) }

.mt-16   { margin-top: var(--space-16) }

.mt-24   { margin-top: var(--space-24) }

.mt-32   { margin-top: var(--space-32) }

.mt-48   { margin-top: var(--space-48) }

.mt-64   { margin-top: var(--space-64) }

/* Padding */

.p-4   { padding: var(--space-4)  }

.p-8   { padding: var(--space-8)  }

.p-12  { padding: var(--space-12) }

.p-16  { padding: var(--space-16) }

.p-24  { padding: var(--space-24) }

.p-32  { padding: var(--space-32) }

.p-48  { padding: var(--space-48) }

.p-64  { padding: var(--space-64) }

.px-4   { padding-left: var(--space-4) ; padding-right: var(--space-4)  }

.px-8   { padding-left: var(--space-8) ; padding-right: var(--space-8)  }

.px-12  { padding-left: var(--space-12); padding-right: var(--space-12) }

.px-16  { padding-left: var(--space-16); padding-right: var(--space-16) }

.px-24  { padding-left: var(--space-24); padding-right: var(--space-24) }

.px-32  { padding-left: var(--space-32); padding-right: var(--space-32) }

.py-4   { padding-top: var(--space-4) ; padding-bottom: var(--space-4)  }

.py-8   { padding-top: var(--space-8) ; padding-bottom: var(--space-8)  }

.py-12  { padding-top: var(--space-12); padding-bottom: var(--space-12) }

.py-16  { padding-top: var(--space-16); padding-bottom: var(--space-16) }

.py-24  { padding-top: var(--space-24); padding-bottom: var(--space-24) }

.py-32  { padding-top: var(--space-32); padding-bottom: var(--space-32) }

.pl-0 	{ padding-left: 0 }

.pl-4   { padding-left: var(--space-4)  }

.pl-8   { padding-left: var(--space-8)  }

.pl-12  { padding-left: var(--space-12) }

.pl-16  { padding-left: var(--space-16) }

.pl-24  { padding-left: var(--space-24) }

.pl-32  { padding-left: var(--space-32) }

.pl-40  { padding-left: var(--space-40) }

.pl-48  { padding-left: var(--space-48) }

.pr-0 	{ padding-right: 0 }

.pr-4   { padding-right: var(--space-4)  }

.pr-8   { padding-right: var(--space-8)  }

.pr-12  { padding-right: var(--space-12) }

.pr-16  { padding-right: var(--space-16) }

.pr-24  { padding-right: var(--space-24) }

.pr-32  { padding-right: var(--space-32) }

.pr-40  { padding-right: var(--space-40) }

.pr-48  { padding-right: var(--space-48) }

.pt-4   { padding-top: var(--space-4)  }

.pt-8   { padding-top: var(--space-8)  }

.pt-12  { padding-top: var(--space-12) }

.pt-16  { padding-top: var(--space-16) }

.pt-24  { padding-top: var(--space-24) }

.pt-32  { padding-top: var(--space-32) }

.pt-40  { padding-top: var(--space-40) }

.pt-48  { padding-top: var(--space-48) }

.pb-4   { padding-bottom: var(--space-4)  }

.pb-8   { padding-bottom: var(--space-8)  }

.pb-12  { padding-bottom: var(--space-12) }

.pb-16  { padding-bottom: var(--space-16) }

.pb-24  { padding-bottom: var(--space-24) }

.pb-32  { padding-bottom: var(--space-32) }

/* TEXT UTILITY */

/* Font family */

.font-serif {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-style: normal;
}

/* Fonts weights */

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

/* Font sizes */

.text-sm {
  font-size: var(--text-sm); /* 14px */
  line-height: 1.4285714286; /* 20px */
}

.text-md {
  font-size: var(--text-md); /* 16px */
  line-height: 1.5; /* 24px */
}

.text-lg { 
  font-size: var(--text-lg); /* 24px */
  line-height: 1.25; /* 30px */
}

.text-xl { 
  font-size: var(--text-xl); /* 32px */
  line-height: 1; /* 32px */
}

/* Case */

.uppercase {
  font-style: normal;
  font-weight: 400;
  line-height: 1.333;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

/* Text align */

.text-right  { text-align: right  }

.text-center { text-align: center }

/* User select */

.select-none {
  user-select: none;
}

/* Underline */

.underline {
  text-decoration: underline;
}

/* Line clamp */

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp, 2);
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

/* WRAPPER UTILITY */

.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--wrapper-max-width, 100rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
  z-index: 1;
}

button[aria-controls='menu'] {
  position: fixed;
  z-index: 101;
  width: 2.5rem;
  height: 2.5rem;
}
button[aria-controls='menu'] svg {
  width: 100%;
  height: 100%;
}
button[aria-controls='menu'][aria-expanded='true'] {
  margin-top: 1rem;
  padding: 0.625rem; /* 10px */
  left: var(--gutter);
  transform: translateX(calc(var(--sidebar-width) - 100% - 1rem));
}
button[aria-controls='menu'][aria-expanded='false'] {
  min-width: 3.5rem;
  min-height: 3.5rem;
  padding: 1.125rem;
  transform: rotate(180deg);
}
button[aria-controls='menu'][aria-expanded='false']
  + main
  > header:not([role='tablist']) {
  margin-left: 4rem;
  width: calc(100% - 4rem);
}

/* Menu */
#menu {
  --flow-space: var(--space-32);
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: var(--gutter);
  width: 100%;
  max-width: var(--sidebar-width);
  height: calc(100vh - var(--gutter) * 2);
  height: calc(100dvh - var(--gutter) * 2);
  padding: var(--gap);
  background: var(--color-background);
  overflow-y: auto;
}

/* Lang toggle */
.lang-toggle {
  font-family: var(--font-sans);
  height: 1.65rem;
}
.lang-toggle button {
  padding: 0;
}
.lang-toggle button.active {
  background-color: transparent !important;
  color: var(--color-primary);
}
.lang-toggle span.slash {
  padding: 0 0.2rem;
}
@media (max-width: 1023px) {
button[aria-controls='menu'][aria-expanded='true'] {
    left: 0;
    margin-top: 0.4rem;
}
#menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    border-radius: 0;
    height: 100vh;
    padding-top: 2.5rem;
}
button[aria-controls='menu'][aria-expanded='true'] + #menu::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    left: var(--sidebar-width);
    bottom: 0;
    z-index: -1;
    background: var(--color-black-50);
}
}
#menu [data-icon]::before {
  background-color: var(--color-grey-700);
}
#menu header {
  align-items: center;
  padding-left: var(--gap);
  min-height: var(--space-40);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  background: var(--color-background);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  column-gap: calc(var(--gutter) / 2);
}
#menu header::before {
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  bottom: -2rem;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    var(--color-background) 0%,
    var(--color-background) 75%,
    transparent 100%
  );
}
#menu nav {
  --flow-space: var(--space-32);
  flex: 1 1 0%;
}
#menu ul {
  --direction: column;
  --items: flex-start;
  --row-gap: var(--space-4);
  width: 100%;
}
#menu li,
#menu summary {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem; /* 40px */
  padding: 0.66rem var(--space-16);
  gap: var(--space-12);
  border-radius: var(--rounded-lg);
}
#menu li {
  position: relative;
  min-height: 2.75rem; /* 44px */
}
#menu li.disabled {
  opacity: 0.5;
}
#menu li.disabled a::before {
  cursor: not-allowed;
}
#menu li[data-count]::after {
  content: attr(data-count);
  display: inline-block;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-left: auto;
}
#menu li .pill {
  margin-left: auto;
}
#menu a {
  display: flex;
  align-items: center;
}
#menu li a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
#menu li:hover {
  background-color: var(--color-grey-50);
}
#menu .active {
  background-color: var(--color-primary-10);
}
#menu details {
  font-family: var(--font-serif);
  background-size: 1px 21px;
  background-image: repeating-linear-gradient(
    0deg,
    var(--color-grey-50),
    var(--color-grey-50) 1px,
    transparent 1px,
    transparent
  );
  background-repeat: repeat-x;
}
#menu details > summary {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-grey-700);
  background-color: var(--color-background);
  width: fit-content;
}
#menu details .new::after {
  content: '' / 'Nouvelles modifications';
  color: transparent;
  position: relative;
  display: inline-block;
  width: 0.375rem; /* 6px */
  height: 0.375rem; /* 6px */
  border-radius: var(--rounded-full);
  background-color: var(--color-primary-100);
  margin-left: var(--space-8);
  transform: translateY(-0.1em);
  overflow: hidden;
}

[role="tablist"][data-v-009fc00d] {
  --tabs: 2;
  --tab-w: 15rem; /* 240px */
  width: 100%;
  max-width: calc(var(--tabs) * var(--tab-w));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  border-radius: var(--rounded-md);
  background-color: var(--color-grey-200);
  flex-shrink: 1;
}
[role="tab"][data-v-009fc00d] {
  --tab-h: 2.5rem;
  --tab-py: var(--space-8);
  --tab-px: var(--space-12);
  --tab-border-w: 4px;
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--text-md);
  text-align: left;
  border-radius: var(--rounded-md);
  background-color: var(--background, var(--color-background));
  color: var(--color, var(--color-text));
  z-index: 2;
  padding: var(--tab-py) var(--tab-px);
  margin: 0;
  cursor: pointer;
  gap: var(--space-16);
  width: 100%;
  height: var(--tab-h);
  border: var(--tab-border-w) solid var(--color-grey-200);
  flex-shrink: 1;
}
[role="tab"][data-v-009fc00d]:focus-visible {
  z-index: 20;
}
[role="tab"] .label[data-v-009fc00d] {
  flex-grow: 1;
  font-family: var(--font-serif);
  margin-top: 0.1em;
}
[role="tab"] .count[data-v-009fc00d] {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: -0.1em;
}
[role="tab"] + [role="tab"][data-v-009fc00d] {
  margin-left: calc(var(--tab-border-w) / -2);
}
[role="tab"][aria-selected="true"][data-v-009fc00d] {
  --background: var(--color-background);
  z-index: 10;
}
[role="tab"][aria-selected="true"][data-v-009fc00d]:hover {
  background-color: var(--color-white-100);
}
[role="tab"][aria-selected="false"][data-v-009fc00d] {
  --background: var(--color-grey-200);
}
[role="tab"][aria-selected="false"][data-v-009fc00d]:hover {
  --background: var(--color-white-50);
}
[role="tab"][data-icon="favorite"][data-v-009fc00d]::before {
  --icon-color: var(--color-grey-400);
}
[role="tab"][data-icon="favorite"][aria-selected="true"][data-v-009fc00d]::before {
  --icon-color: var(--color-brand);
}
[role="tabpanel"][data-v-009fc00d] {
  width: 100%;
  overflow: auto;
}

section[data-v-3a86e1ce] {
  --flow-space: var(--space-16);
  min-height: calc(100vh - 8.5rem);
}
section[data-v-3a86e1ce]:not(.skeleton):empty::after {
  content: attr(data-empty-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  max-width: 24ch;
  height: 8rem;
  margin: auto;
  font-size: var(--text-sm);
  color: var(--color-grey-700);
  background-image: var(--icon-document-thin);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: var(--space-40);
}

main[data-v-0821427c] {
  max-width: 52.5rem;
  margin: auto;
}
main > header[data-v-0821427c] {
  flex-wrap: nowrap;
}
main > header [role='tablist'][data-v-0821427c] {
  margin-left: 0;
}

/* Tabs */
[role="tablist"][data-v-d455d8ed] {
  margin-left: 0;
}

#inspirations-dropdown {
  --row-gap: 0;
  align-items: flex-start;
  position: relative;
  background: var(--color-background);
  border-radius: var(--rounded-lg);
  height: 3.75rem;
  width: 20rem;
  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
}
#inspirations-dropdown::before {
  content: '';
  position: absolute;
  left: var(--space-8);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rounded-md);
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
[role='combobox'],
#inspirations-select_list {
  border: 1px solid var(--color-grey-200);
}
[role='combobox']:hover {
  outline: 1px solid var(--color-grey-400);
  border-color: var(--color-background);
}
[role='combobox'][aria-expanded='true'] {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
  border-color: transparent;
}
#inspirations-select,
[role='combobox'] {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.875rem var(--space-48) var(--space-8) var(--space-64);
  cursor: pointer;
}

/* Icon */
#inspirations-select svg {
  display: none; /* Hide default component svg */
}
#inspirations-select[data-icon]::before {
  --icon-color: var(--color-grey-700);
  position: absolute;
  right: var(--space-8);
  top: 0.625rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.625rem;
}
#inspirations-dropdown label {
  color: var(--color-grey-700);
  letter-spacing: var(--tracking-wider);
}

/* Options */
#inspirations-select_list {
  margin-top: var(--space-4);
  border-radius: var(--rounded-md);
  background: var(--color-background);
  box-shadow: var(--shadow);
  padding: var(--space-8);
}
#inspirations-select_list > * {
  font-family: var(--font-serif);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48);
  border-radius: var(--rounded-sm);
  position: relative;
  display: flex;
  align-items: center;
  height: 2.75rem;
  cursor: pointer;
}
#inspirations-select_list > * + * {
  margin-top: var(--space-4);
}
#inspirations-select_list > *::before {
  content: '';
  position: absolute;
  left: var(--space-8);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rounded-sm);
  background-image: var(--image);
  background-color: var(--color-grey-200);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#inspirations-select_list > *:hover {
  background-color: var(--color-grey-50);
}
#inspirations-select_list > *:focus,
#inspirations-select_list > *:focus-visible,
#inspirations-select_list > [data-p-focused='true'] {
  outline: 2px solid var(--color-focus-ring);
}
/* Check */
#inspirations-select_list > * > svg {
  position: absolute;
  left: 0.875rem;
  width: 1rem;
  height: 1rem;
  color: var(--color-grey-700);
}

.inspiration > header[data-v-d68c8a96] {
  --row-gap: var(--space-8);
  flex-direction: column;
  justify-content: center;
  clear: both;
  height: 15rem; /* 240px */
  background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
    var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-16);
  border-radius: var(--rounded-lg);
}
.inspiration__title.new[data-v-d68c8a96]::after {
  content: "Nouveauté";
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--rounded-sm);
  background-color: var(--color-primary-10);
  color: var(--color-primary-100);
  margin-left: var(--space-16);
  padding: var(--space-4) var(--space-12);
  transform: translateY(-0.1em);
}
.inspiration__date[data-v-d68c8a96],
.inspiration__description[data-v-d68c8a96] {
  color: var(--color-grey-700);
}

figure[data-v-53258185] {
  position: relative;
  grid-row: span var(--rows);
  width: 100%;
  height: 100%;
  border-radius: var(--rounded-2xl);
  overflow: hidden;
}
img[data-v-53258185] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
figure[data-v-53258185]:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-black-20);
  z-index: 1;
}
figure:hover .favorite[data-v-53258185] {
  display: initial;
}

/* Favorite button */
.favorite[data-v-53258185] {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.5rem;
  height: 3.5rem;
  margin: var(--space-8);
  padding: var(--space-8);
  color: var(--color-grey-400);
  display: none;
  z-index: 10;
}
.favorite[aria-pressed="false"][data-v-53258185]:hover::before {
  content: "Ajouter aux favoris";
  background: var(--color-background);
  padding: 1.3rem 3.5rem 1.25rem 1rem;
  position: absolute;
  z-index: -1;
  inset: -2px;
  left: unset;
  width: max-content;
  border-radius: var(--rounded-xl);
  color: var(--color-grey-700);
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  font-size: var(--text-sm);
}
.favorite[aria-pressed="true"][data-v-53258185] {
  color: var(--color-brand);
}

/* Header */
main > header[data-v-68750ea2] {
  gap: var(--space-16);
}
/* Tabs */
[role="tablist"][data-v-68750ea2] {
  margin-left: 0;
}

.physical-sample header[data-v-f8aaf674] {
  color: var(--color-white);
  background: linear-gradient(
      90deg,
      hsla(0, 0%, 10%, 0.5) 0%,
      hsla(0, 0%, 10%, 0.9) 50%,
      hsla(0, 0%, 10%, 0.9) 100%
    ),
    var(--cover), var(--color-black);
  background-repeat: no-repeat;
  background-size: cover;
}
.physical-sample header[data-v-f8aaf674] > * {
  padding-inline: var(--space-16);
}
.physical-sample header h3[data-v-f8aaf674] {
  position: initial;
}
/* PDF VIEWER BLOCK */
.vpv-variables[data-v-79f9a7fe] {
  /* Base styles */
  --vpv-base-radius: var(--rounded-xl);
  /* Viewer container */
  --vpv-container-width-sm: 48rem;
  /* Toolbar */
  --vpv-toolbar-size: 4.5rem;
}
.vpv-variables.vpv-variables__dark[data-v-79f9a7fe] {
  /* Base styles */
  --vpv-base-border-color: var(--color-grey-700);
  /* Viewer container */
  --vpv-container-border-color: var(--vpv-base-border-color);
  /* Loader */
  --vpv-loader-backdrop-color: rgba(0, 0, 0, 0.8);
  /* Toolbar */
  --vpv-toolbar-background-color: var(--color-black);
  --vpv-toolbar-color: white;
  --vpv-toolbar-border-color: var(--vpv-base-border-color);
  /* Sidebar */
  --vpv-sidebar-content-background-color: var(--color-black);
  --vpv-sidebar-content_thumbnail-focused-border-color: var(--color-white-20);
  /* Drop file mask */
  --vpv-drop-zone-background: #1c2024;
  --vpv-drop-zone-border: #434c56;
  /* PDF Pages Content*/
  --vpv-pages-container-background: black;
  /* Popover */
  --vpv-popover-background-color: black;
  --vpv-popover-color: var(--color-white);
  --vpv-popover-border-color: transparent;
  /* Menu Dropdown */
  --vpv-dropdown-menu-content-background: #181818;
  --vpv-dropdown-menu-content-menu-hover-background: var(--color-white-10);
  --vpv-dropdown-menu-content-separator-background: var(--color-white-10);
  --vpv-dropdown-menu-content-border-color: var(--color-white-10);
  --vpv-dropdown-separator: var(--color-white-10);
  /* Search Input */
  --vpv-input-background-color: transparent;
  --vpv-input-border-color: var(--color-white);
  --vpv-input-placeholder-color: #596673;
  /* Modal of PDF Properties */
  --vpv-properties-content-background: var(
    --vpv-dropdown-menu-content-background
  );
  --vpv-properties-content-secondary-color: #c6ccd2;
  --vpv-properties-content-color: var(--vpv-toolbar-color);
  --vpv-properties-separator: var(--vpv-dropdown-separator);
  --vpv-properties-header: white;
  /* Modal of Print Progress */
  --vpv-print-progress-background: var(--vpv-dropdown-menu-content-background);
  /* Tooltip */
  --vpv-tooltip-background: #181818;
  --vpv-tooltip-color: white;
  --vpv-tooltip-border-color: var(--color-black);
  /* Outline */
  --vpv-outline-color: var(--color-white-10);
}
.vpv-container[data-v-79f9a7fe] {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.vpv-body-wrapper[data-v-79f9a7fe],
.vpv-container .vpv-sidebar-wrapper[data-v-79f9a7fe] {
  margin-top: 0 !important;
  margin-bottom: 4.5rem !important; /* --vpv-toolbar-size */
}
.vpv-container .vpv-pages-container-wrapper[data-v-79f9a7fe] {
  background: black !important; /* --vpv-pages-container-background */
}
.vpv-splitter[data-v-79f9a7fe] {
  max-width: 0;
}

/* Sidebar */
.vpv-container .vpv-sidebar-wrapper .vpv-sidebar-content-container[data-v-79f9a7fe] {
  background: var(--color-black) !important; /* --vpv-sidebar-content-background-color */
  border-right-color: var(--color-grey-700) !important; /* --vpv-toolbar-border-color */
}
.vpv-container .vpv-sidebar-wrapper__opened[data-v-79f9a7fe] {
  max-width: 9rem !important;
}
.vpv-sidebar-features[data-v-79f9a7fe] {
  display: none;
}
.pdf-thumbnail-wrapper .pdf-thumbnail img[data-v-79f9a7fe],
.pdf-thumbnail-wrapper .pdf-thumbnail .placeholder[data-v-79f9a7fe] {
  border-radius: var(--rounded-md);
}

/* Toolbar */
.vpv-container .vpv-toolbar-wrapper[data-v-79f9a7fe] {
  border-bottom-width: 0 !important;
  border-top: 1px solid var(--color-grey-700);
  padding-left: 1rem !important;
  height: 4.5rem !important; /* --vpv-toolbar-size */
  background-color: var(--color-black) !important; /* --vpv-toolbar-background-color */
}
.vpv-toolbar-wrapper[data-v-79f9a7fe] {
  top: unset !important;
  bottom: 0 !important;
}
.vpv-toolbar-start .vpv-toolbar-btn[data-v-79f9a7fe] {
  display: none !important;
}
.vpv-toolbar-start[data-v-79f9a7fe]::before {
  content: "Page";
}
.vpv-input[data-v-79f9a7fe] {
  border-radius: var(--rounded-sm) !important;
  max-width: 1.5rem !important;
}
.vpv-input ~ span[data-v-79f9a7fe] {
  color: var(--color-grey-400);
}
.vpv-toolbar-end[data-v-79f9a7fe] {
  padding-right: 7.5rem;
}
.vpv-toolbar-end > button[data-v-79f9a7fe] {
  display: none !important;
}

/* Footer buttons */
#toggle-comments[data-v-79f9a7fe],
#download-pdf[data-v-79f9a7fe] {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-16);
  padding: 0.625rem;
}
#download-pdf[data-v-79f9a7fe] {
  right: 4.5rem;
}

#vpv-container {
  width: var(--dialog-max-w);
  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
  background: black;
  position: relative;
}
.with-comments .vpv-pages-container-wrapper {
  margin-right: var(--dialog-comments-w, 20rem);
}

.selector-dropdown {
  --selector-width: 21rem;
  --row-gap: 0;
  align-items: flex-start;
  position: relative;
  background: var(--color-background);
  border-radius: var(--rounded-lg);
  height: 3.75rem;
  min-width: var(--selector-width, 21rem);
  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-16);
}
.selector-dropdown.has-image,
.selector-dropdown.has-image
  :is(#selector-select, #selector-multiselect, [role='combobox']) {
  padding-left: var(--space-64);
}
.selector-dropdown.has-image:before {
  content: '';
  position: absolute;
  left: var(--space-8);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rounded-md);
  background-color: var(--dialog-inner-background, #f7f7f7);
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
[role='combobox'],
[id*='select_list'] {
  border: 1px solid var(--color-grey-200);
}
[role='combobox']:hover {
  outline: 0px solid var(--color-grey-400);
  border-color: var(--color-grey-400);
}
[role='combobox'][aria-expanded='true'] {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
  border-color: transparent;
}
#selector-select,
#selector-multiselect,
[role='combobox'] {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.875rem var(--space-48) var(--space-8) var(--space-16);
  cursor: pointer;
}
[role='combobox'] p,
.selector-dropdown
  [data-pc-section='labelcontainer']
  > [data-pc-section='label'] {
  max-height: 1lh;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#selector-select.active [role='combobox'] {
  border-color: var(--color-focus-ring);
}

/* Icon */
[data-pc-section='dropdown'] {
  display: none; /* Hide default component svg */
}
.selector-dropdown [data-icon]::before {
  --icon-color: var(--color-grey-700);
  position: absolute;
  right: var(--space-8);
  top: 0.625rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.625rem;
}
.selector-dropdown label {
  color: var(--color-grey-700);
  letter-spacing: var(--tracking-wider);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 1lh;
  padding-right: 1em;
}

/* Options */
[id*='select_list'] {
  margin-top: var(--space-4);
  border-radius: var(--rounded-md);
  background: var(--color-background);
  box-shadow: var(--shadow);
  padding: var(--space-8);
}
[id*='select_list'] > * {
  font-family: var(--font-serif);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48);
  border-radius: var(--rounded-sm);
  position: relative;
  display: flex;
  align-items: center;
  height: 2.75rem;
  cursor: pointer;
}
[id*='select_list'] > * + * {
  margin-top: var(--space-4);
}
[id*='select_list'] > *::before {
  content: '';
  position: absolute;
  left: var(--space-8);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rounded-sm);
  background-image: var(--image);
  background-color: var(--dialog-inner-background, #f7f7f7);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
[id*='select_list'] > *:hover {
  background-color: var(--color-grey-50);
}
[id*='select_list'] > *:focus,
[id*='select_list'] > *:focus-visible,
[id*='select_list'] > [data-p-focused='true'] {
  outline: 2px solid var(--color-focus-ring);
}
/* Check */
#selector-multiselect_list input[type='checkbox'] {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) + 1px);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rounded-sm);
}
#selector-multiselect_list input[type='checkbox']:checked {
  --icon-color: var(--color-focus-ring);
}
[id*='select_list'] > * > svg {
  position: absolute;
  left: 0.875rem;
  width: 1rem;
  height: 1rem;
  color: var(--color-grey-700);
}
[id*='select_list'] img {
  position: absolute;
  left: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  mix-blend-mode: multiply;
}
[id*='select_list'] [aria-selected='true'] img,
#selector-multiselect_list input[type='checkbox'] + [data-pc-section='box'] {
  display: none;
}
#selector-multiselect_list
  [aria-selected='false']
  input[type='checkbox']::before {
  --icon-color: transparent;
}
/* Overlay */
[data-pc-section='overlay'] [data-pc-section='header'] {
  display: none;
}

.track figure {
  position: relative;
}
.track .drag-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
}

#image-details {
  width: min(100vw - var(--gutter) * 2, 70rem);
  height: min(100vh - var(--gutter) * 2, 50rem);
  flex-direction: row !important;
}
#image-details [data-pc-section="header"] {
  position: absolute;
  width: 100%;
  max-width: min(480px, 50%);
  right: 0;
  z-index: 1102;
  padding: 1.5rem var(--space-32);
  height: auto;
  background: var(--color-background);
}
#image-details [data-pc-section="content"] {
  display: flex;
}
#image-details [data-pc-section="content"] img {
  object-fit: contain;
  max-height: 100%;
  z-index: 1;
}
#image-details [data-pc-section="content"] picture {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-grow: 1;
}
#image-details [data-pc-section="content"] picture::before {
  content: '';
  position: absolute;
  inset: -3rem;
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(3rem);
  opacity: .4;
}
#image-details [data-pc-section="content"] > * {
  width: 50%;
}
#image-details [data-pc-section="content"] > div {
  padding-top: 5rem;
  overflow-y: auto;
  max-width: 480px;
}
@media (max-width: 767px) {
#image-details [data-pc-section="content"] {
    flex-direction: column;
}
#image-details [data-pc-section="header"] {
    top: 50%;
    left: 0;
    max-width: 100%;
}
#image-details [data-pc-section="content"] > * {
    width: 100%;
    height: 50%;
}
#image-details [data-pc-section="content"] > div {
    max-width: 100%;
}
}

/* Accordion */
[data-pc-name="accordionheader"] {
  height: var(--space-40);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#add-images {
  --sidebar-width: 12.5rem;
  width: min(100vw - var(--gutter) * 2, 100rem);
  height: min(100vh - var(--gutter) * 2, 60rem);
  padding-top: var(--space-16);
  row-gap: var(--space-32);
}
#add-images [data-pc-section='content'] {
  height: calc(100% - 3.75rem);
}
#add-images nav li > span {
  position: relative;
  display: inline-block;
  min-height: var(--space-48);
  border-left: 1px solid var(--color-grey-400);
  padding: var(--space-12) var(--space-16);
  color: var(--color-grey-400);
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}
#add-images nav li:hover > span,
#add-images nav li.active > span {
  color: var(--color-grey-800);
  border-left-color: var(--color-grey-800);
}
#add-images nav > ul > li.active > span::before {
  content: '';
  width: 2px;
  position: absolute;
  top: 0;
  left: -1px;
  bottom: 0;
  background: var(--color-grey-800);
}
#add-images nav > ul > li:not(.active) ul {
  display: none;
}
#add-images nav > ul ul > li > span {
  min-height: var(--space-32);
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-32);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
}
#add-images nav > ul ul > li.active > span {
  border-left-width: 2px;
}
#add-images [data-pc-name='fileupload'] button {
  padding: 3rem;
  aspect-ratio: 1/1;
}
#add-images .image {
  aspect-ratio: 1/1;
  border-radius: var(--rounded-xl);
}
#add-images .image img {
  height: 100%;
  width: 100%;
}
#delete-image [data-pc-section='footer'] {
  display: flex;
  gap: var(--space-16);
  margin-top: var(--space-32);
}
#delete-image [data-pc-name='pcclosebutton'] {
  display: none;
}
#delete-image_header {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
}
.with-sidebar[data-side='right'] > * {
  height: 100%;
  overflow-y: auto;
}

fieldset {
  appearance: none;
  padding: 0;
  margin: 0;
  border: none;
}
button[data-icon="upload"] {
  padding: 6.875rem 4.875rem;
}
[data-pc-name="fileupload"] button:hover {
  background: var(--color-primary-10);
  border-color: var(--color-primary-20);
  color: var(--color-primary-100);
}
input[type="file"] {
  display: none;
}
[role="dialog"] {
  position: relative;
}
[data-pc-section="mask"] {
  background-color: var(--color-black-50);
}
[data-pc-section="header"] {
  height: var(--space-40);
}
[data-pc-section="title"] {
  font-weight: 500;
  font-size: var(--text-lg);
}
[data-pc-name="pcclosebutton"] {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  padding: 0.625rem;
  width: var(--space-40);
  height: var(--space-40);
}
[data-pc-name="pcclosebutton"] svg {
  width: 1.25rem;
  height: 1.25rem;
}
[data-pc-name="pcclosebutton"] span {
  display: none;
}
[data-pc-section="content"] {
  flex-grow: 1;
  overflow: hidden;
}

@media (max-width: 540px) {
#back-to-project[data-v-bd14792e] {
    display: none;
}
}

.wrapper[data-v-afaa6a72] {
  height: calc(100svh - var(--gutter) * 2);
  padding: 0;
}
form[data-v-afaa6a72]::before {
  content: 'Design to Pack';
  text-align: center;
  height: 8rem;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='144' height='53' class='logo-courval' viewBox='0 0 144 53'%3E%3Cdefs%3E%3Cpath id='a' d='M0 52h144V0H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(0 .5)'%3E%3Cpath fill='%23717373' d='M11.3210912 45.6153321c.5185261-.5146003 1.2495928-.7882083 2.1162459-.7882083 2.0521173 0 2.9700733 1.5293052 2.9700733 3.0441146 0 1.4713221-.9289495 3.0567984-2.9700733 3.0567984-2.0191368 0-2.9499185-1.5854763-2.9590798-3.0586104-.0054967-.9059864.2931596-1.7068785.8428339-2.2540943m2.1162459-1.8608963c-2.8161645 0-4.07675078 2.0638373-4.07675078 4.1077427 0 1.9913583 1.27524428 4.1367343 4.07675078 4.1367343 2.7868486 0 4.0657574-2.1326922 4.0767508-4.1149906.007329-1.1977141-.4067589-2.2722141-1.1634772-3.0241828-.7274022-.7229773-1.7351384-1.1053036-2.9132736-1.1053036M24.7888436 44.8379957c.8226792 0 1.5885587.3080354 2.1547232.869747l.1813925.1775733.8116857-.6957976-.207044-.2047529c-.7805375-.7719005-1.8249186-1.1977141-2.9407574-1.1977141-1.2147801 0-2.25.3950101-2.997557 1.1415429-.7567182.7574047-1.1671416 1.8192209-1.1543159 2.9879434.0109935 2.01129 1.2990635 4.0406997 4.1518729 4.0406997 1.1158388 0 2.1602199-.4258136 2.9407574-1.1977141l.1978827-.197505-.7823697-.7302251-.1868892.1811973c-.569829.5544637-1.36136.8715589-2.1693812.8715589-2.220684 0-3.0287052-1.6126559-3.0470276-2.9933793-.0036645-.8969266.2949918-1.6905708.8446661-2.2377866.5368485-.534532 1.2990635-.8153878 2.2023615-.8153878M42.926079 48.3760541h4.4175489v-1.0618162H42.926079v-2.3591888h4.6337541v-1.0835598H41.808408v7.9998606h5.8815146v-1.0944316H42.926079zM50.5802932 44.9340302h2.7263843v6.9380445h1.1286645v-6.9380445h2.7245521v-1.0509443h-6.5796009zM63.5113803 50.9481497h-1.0920196v-3.8667503h1.0920196c1.3357085 0 1.9550081.9458499 1.9733306 1.8826399.0109935.5598997-.1868892 1.0871838-.5423453 1.4459544-.3499592.3515228-.8428338.538156-1.4309853.538156m0-4.7836086h-2.0411238v5.7077148h2.0411238c.8648208 0 1.6013844-.2808558 2.1272394-.8135759.5240228-.530908.8135179-1.2973726.7951954-2.1055125-.0311482-1.342672-.9600977-2.7886264-2.9224348-2.7886264M72.2669585 49.6458847c0 .9567218-.6907574 1.3934072-1.3338763 1.3934072-.3499592 0-.6760993-.1214022-.9161237-.3424629-.2711727-.2500522-.414088-.6142588-.414088-1.0509443v-3.4808h-.939943v3.4808c0 .7048575.2455212 1.2991846.7127443 1.7213743.4122557.3714545.9655945.5780194 1.5574104.5780194 1.1304968 0 2.2756515-.7900202 2.2756515-2.2993937v-3.4808h-.9417752v3.4808ZM82.3146376 44.8379957c.8226792 0 1.5885587.3080354 2.1547231.869747l.1813926.1775733.8116856-.6957976-.2070439-.2047529c-.7805375-.7719005-1.8249186-1.1977141-2.9407574-1.1977141-1.2147801 0-2.25.3950101-2.997557 1.1415429-.7567182.7574047-1.1671417 1.8192209-1.1543159 2.9879434.0109934 2.01129 1.2990635 4.0406997 4.1518729 4.0406997 1.1158388 0 2.1602199-.4258136 2.9407574-1.1977141l.1978827-.197505-.7823697-.7302251-.1887215.1811973c-.5679968.5544637-1.3595277.8715589-2.1675489.8715589-2.220684 0-3.0287052-1.6126559-3.0470277-2.9933793-.0054967-.8969266.2949919-1.6905708.8446662-2.2377866.5350162-.534532 1.2990635-.8153878 2.2023615-.8153878M89.9250611 45.6153321c.518526-.5146003 1.2495928-.7882083 2.1162459-.7882083 2.0521173 0 2.9700733 1.5293052 2.9700733 3.0441146 0 1.4713221-.9289495 3.0567984-2.9700733 3.0567984-2.0191368 0-2.9499186-1.5854763-2.9590798-3.0586104-.0054967-.9059864.2931596-1.7068785.8428339-2.2540943m2.1162459-1.8608963c-2.8161645 0-4.0767508 2.0638373-4.0767508 4.1077427 0 1.9913583 1.2752443 4.1367343 4.0767508 4.1367343 2.7868485 0 4.0657573-2.1326922 4.0767508-4.1149906.007329-1.1977141-.4067589-2.2722141-1.1634772-3.0241828-.7274023-.7229773-1.7351384-1.1053036-2.9132736-1.1053036M104.800529 48.7777685c0 1.4640741-1.060871 2.1308802-2.04662 2.1308802-.536849 0-1.037052-.1866332-1.405334-.5254722-.41592-.3841382-.63579-.9404139-.63579-1.605408v-4.9050108h-1.117671v4.9050108c0 .9839013.3444625 1.8119729.991246 2.3972402.573493.5164123 1.343037.802704 2.167549.802704 1.572068 0 3.164291-1.0998676 3.164291-3.1999442v-4.9050108h-1.117671v4.9050108ZM122.360607 50.2429298l-2.607289-6.3708969h-1.216612l3.329194 8.0197923h.989414l3.327361-8.0197923h-1.21478zM130.002178 48.9658513l1.606881-3.6003903 1.606882 3.6003903h-3.213763Zm1.117671-5.093456-3.62785 7.9980486h1.223942l.819014-1.8319046h4.150041l.830008 1.8319046h1.222109l-3.62785-7.9980486h-.989414ZM139.753583 50.7883337v-6.9163008h-1.126832v7.9998606h5.37215v-1.0835598zM1.12683225 44.9447209h2.45337948c1.10667752 0 1.6105456.8516273 1.6105456 1.6434595 0 .4348735-.14474756.8407554-.40492671 1.137919-.28949512.3297791-.70541531.5037285-1.20561889.5037285H1.44381107L2.064943 49.293456h1.51526873c1.79193811 0 2.73004886-1.3644156 2.73004886-2.7107116 0-1.3462959-.93811075-2.7107115-2.73004886-2.7107115H0v7.9998606h1.12683225v-6.9271726Z'/%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23717373' d='M30.9979642 51.8731619h1.1268322v-7.9998606h-1.1268322zM36.7867671 48.4827793v3.3883894h1.1268322v-7.9980486h-1.1268322v3.547843h-4.344259l.6192997 1.0618162zM110.889271 44.9447209h2.464373c.470888 0 .868485.1485818 1.148819.4276256.273005.2736079.425082.6668061.421417 1.0799359-.007329.6885497-.296824 1.5129974-1.634365 1.5129974h-2.083265l.632125 1.0817479h.716409l2.607288 2.8248658h1.50794l-2.704397-2.9009687c.57899-.0942226 1.0682-.3297791 1.438314-.6976096.458062-.4584291.707248-1.1016795.699919-1.810161-.010994-1.2865008-.960098-2.5911213-2.750204-2.5911213h-3.591205v7.9998606h1.126832v-6.9271726Z' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='M80.4451954 30.3683044H63.5537052L55.107044 15.9015123l8.4466612-14.46679211h16.8914902l8.4466613 14.46679211-8.4466613 14.4667921Zm9.5221906-15.4941808L81.8816775 1.02702627c-.370114-.6360025-1.0553746-1.02738866-1.7974348-1.02738866H63.914658c-.7420603 0-1.4273209.39138616-1.7992671 1.02738866L54.0315147 14.8741236c-.3719463.6360025-.3719463 1.4187749 0 2.0547774l8.0838762 13.8470973c.3719462.6360025 1.0572068 1.0273887 1.7992671 1.0273887h16.1695847c.7420602 0 1.4273208-.3913862 1.7974348-1.0273887L89.967386 16.928901c.370114-.6360025.370114-1.4187749 0-2.0547774Z' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='m73.1178542 10.2746115.058632.063419c1.9311889 2.0982647 2.9096091 4.0642554 2.9096091 5.8418008 0 2.6907799-1.7186482 4.6458987-4.0877443 4.6458987-2.3672639 0-4.0877443-1.9551188-4.0877443-4.6458987 0-1.7775454.9802524-3.7435361 2.9114413-5.8418008l.058632-.063419c-1.9788274-1.85908429-4.0309447-3.19450836-4.0309447-3.19450836l-5.1504478 8.82249636 5.1504478 8.8206844h10.2990636l5.1504478-8.8206844-5.1504478-8.82249636s-2.0521173 1.33542407-4.0309447 3.19450836' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='M71.9992671 19.2502195c1.52443 0 2.4955212-1.3807234 2.4955212-3.0712941 0-1.5818524-1.1158388-3.2814831-2.4955212-4.7799847-1.3796824 1.4985016-2.4955212 3.1981323-2.4955212 4.7799847 0 1.6905707.9710912 3.0712941 2.4955212 3.0712941' mask='url(%23b)'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12rem;
  display: grid;
  place-items: flex-end;
  justify-content: center;
}
.error[data-v-afaa6a72] {
  color: #ee6767;
}

input.invalid[data-v-867ee985]:focus-visible {
  outline: 2px solid #ef8d8d;
}
.btn--pending[data-v-867ee985] {
  background-color: #ffdb88;
}
.btn--succeed[data-v-867ee985] {
  background-color: rgb(182, 211, 255);
}