/* #region Font importation */
@import url("https://use.typekit.net/cex1hfw.css");
/* #endregion */

/* #region Reset & Base */
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  --font-based-size: calc(var(--px-to-rem) / var(--rem-based-size) * 1rem);
  --grid-based-size: calc(
    var(--columns-to-rem) * var(--grid-column-width) +
      calc(var(--columns-to-rem) - 1) * var(--grid-gaps-x)
  );
}

:root {
  --color-black: #111111;
  --color-gray: #808080;

  --color-blue: #0147a7;
  --color-blue-800: #000033;
  --color-grey: #b2b2c2;
  --color-white: #ffffff;

  --inf-max: calc(1px * infinity);
  --inf-min: calc(-1px * infinity);

  --font-factor: 1;
  --rem-based-size: 18;
  /* 
  1512 -> 18
  -----------
  1176 -> 14
  2016 -> 24
  */
  --font-clamp: clamp(0.875rem, 0rem + 1.1905vw, 1.5rem);
  /* 
  same but max to 32px instead of 24px
  */
  --nav-font-clamp: clamp(0.875rem, 0rem + 1.1905vw, 2rem);

  --grid-columns-amount: 12;
  --grid-padding-x: 30px;
  --grid-gaps-x: calc(30 / var(--rem-based-size) * 1rem);
  --grid-column-width: calc(
    (
        100svw - 2 * var(--grid-padding-x) - (var(--grid-columns-amount) - 1) *
          var(--grid-gaps-x)
      ) /
      var(--grid-columns-amount)
  );

  font-size: calc(var(--font-factor, 1) * var(--font-clamp));
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;

  /* scroll-behavior: smooth; */
  scroll-padding-top: var(--grid-padding-x);

  @media screen and (max-width: 800px) {
    & {
      --font-factor: 1.25;
      --grid-gaps-x: calc(15.5 / var(--rem-based-size) * 1rem);
    }
  }
  @media screen and (max-width: 640px) {
    & {
      --grid-padding-x: var(--grid-gaps-x);
    }
  }
}

body {
  --body-bg: var(--color-white);
  min-height: 100svh;
  background-color: var(--body-bg);
  color: var(--color-black);
}
body.debug-grid::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;

  --color: #d9d9d922;
  background: repeating-linear-gradient(
    to right,
    var(--color) var(--grid-padding-x)
      calc(var(--grid-padding-x) + var(--grid-column-width)),
    transparent calc(var(--grid-padding-x) + var(--grid-column-width))
      calc(
        var(--grid-padding-x) + var(--grid-column-width) + var(--grid-gaps-x)
      )
  );
  background-size: 100svw;
}
ul,
ol {
  list-style-position: inside;

  &:not(.default):not(:is(.raw *)) {
    list-style: none;
  }
}

#pinnable-page {
  > main {
    min-height: 75lvh;
  }
}

.padx {
  padding-left: var(--grid-padding-x);
  padding-right: var(--grid-padding-x);
}

.mt025 {
  margin-top: calc(var(--grid-gaps-x) / 4);
}
.mt05 {
  margin-top: calc(var(--grid-gaps-x) / 2);
}
.mt1 {
  margin-top: var(--grid-gaps-x);
}
.mt2 {
  margin-top: calc(2 * var(--grid-gaps-x));
}
.mt4 {
  margin-top: calc(4 * var(--grid-gaps-x));
}
.mt8 {
  margin-top: calc(8 * var(--grid-gaps-x));
}
.mt16 {
  margin-top: calc(16 * var(--grid-gaps-x));
}
.mt32 {
  margin-top: calc(32 * var(--grid-gaps-x));
}
.centered {
  display: block;
  margin-inline: auto;
}

.gridded {
  display: grid;
  grid-template-columns: var(--grid-columns-amount);
  gap: var(--grid-gaps-x);
}

.button {
  --px-to-rem: 18;

  cursor: pointer;
  display: flex;
  width: fit-content;
  padding: min(16px, calc(16 * 1em / var(--px-to-rem)))
    min(50px, calc(50 * 1em / var(--px-to-rem)));
  /* background-color: rgb(from var(--this-theme) r g b / 0.75); */
  /* backdrop-filter: blur(5px); */
  background-color: var(--theme);
  color: var(--color-black);
  font-weight: 600;
  text-decoration: none;
  font-size: min(24px, var(--font-based-size));
  line-height: 133%;
  border-radius: calc(1px * infinity);

  &:is([data-following] > *) {
    margin: 0;
    /*cursor: none;*/
  }
}

.raw {
  line-height: 1.28em;

  p:not(:first-child) {
    margin-top: 1.25em;
  }
  h2,
  h3,
  h4 {
    line-height: 110%;
    font-weight: 600;
  }
  h2:not(:first-child) {
    margin-top: 1.5em;
  }

  a {
    color: inherit;
    &:not(:hover) {
      text-decoration: none;
    }
  }
}
/* #endregion */

/* #region Header */
#site-header {
  --items-entrance-duration: 0.25s;
  --px-to-rem: 25;

  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  padding: var(--grid-padding-x);
  font-weight: 600;
  color: var(--color-black);

  a {
    color: inherit;
    text-decoration: none;
    font-size: clamp(
      18px,
      calc(var(--nav-font-factor, 1) * var(--nav-font-clamp)),
      32px
    );
  }

  @media screen and (min-width: 800px) {
    /* Desktop */
    & {
      transition-property: top, translate, background-color;
      transition-duration: 0.25s;
      transition-timing-function: ease-in-out;

      width: 100%;

      pointer-events: none;
    }
    &.light {
      color: var(--color-white);
    }

    &:is([data-scroll-distance^="."][data-scroll-dir="1"] *) {
      top: 0;
      translate: 0 -100%;
    }
    &:is([data-scroll-vh^="."] *) {
      background-color: var(--color-white);
      color: var(--color-black);
    }

    input {
      display: none;
    }
    .home-anchor {
      opacity: 0;
      position: absolute;
      translate: calc(1px * infinity) calc(1px * infinity);
    }
    nav {
      pointer-events: all;
      width: fit-content;
      float: right;
    }

    ul {
      display: flex;
      gap: min(20px, var(--grid-padding-x));
    }
    ul a {
      transition: color 0.25s ease-in-out;
      &:hover {
        color: var(--transition-theme, inherit);
      }

      &[data-current] {
        --transition-theme: var(--theme);

        position: relative;
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          translate: 0 100%;
          height: 2px;
          inset-inline: 0;
          background-color: currentColor;
        }
      }
    }
  }

  @media screen and (max-width: 799px) {
    /* Mobile */
    & {
      --items-entrance-duration: 0.45s;
      --background-animation-duration: 0.25s;
      --logo-entrance-duration: 0.25s;
      --nav-font-factor: 1.5;

      /* For entrances */
      --secondary-animations-shift: calc(
        var(--background-animation-duration) + 0.15s
      );

      transition: top 0.25s;
    }

    nav {
      background-color: var(--theme, var(--color-white));
      position: fixed;
      inset: 0;
      overflow: hidden;
      display: grid;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transition: clip-path var(--background-animation-duration) ease-in-out;

      a {
        color: var(--color-black);
      }

      > ul {
        font-size: 2rem;
        padding-inline: var(--grid-gaps-x);

        li {
          display: flex;
          padding: 0.85rem 0;
          transition: var(--items-entrance-duration)
            calc(
              (var(--items-entrance-duration) / 10) * var(--index, 0) +
                var(--secondary-animations-shift)
            );

          &:not(:first-child) {
            border-top: 1px solid var(--color-black);
          }
          &:last-child {
            border-bottom: 1px solid var(--color-black);
          }
        }
      }
      .home-anchor {
        position: absolute;
        bottom: 0;
        left: var(--grid-padding-x);
        right: var(--grid-padding-x);
        transition: translate var(--logo-entrance-duration)
          var(--secondary-animations-shift) ease-in-out;
        display: flex;

        > svg {
          width: 100%;
        }
      }

      &:not(:is(input:checked + *)) {
        pointer-events: none;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

        li {
          translate: -100% 0;
          opacity: 0;
        }
        .home-anchor {
          translate: 0 100%;
        }
        li,
        .home-anchor {
          transition-delay: var(--background-animation-duration);
          transition-duration: 0s;
        }
      }
    }

    input {
      --bars-width: 2rem;
      --bars-gap: 15%;
      appearance: none;

      position: relative;
      z-index: 1;

      height: var(--bars-width);
      width: var(--bars-width);

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        height: round(5%, 1px);
        width: 100%;
        translate: 0 -50%;
        transition: var(--background-animation-duration);
        background-color: var(--color-black);

        will-change: translate, rotate;
      }
      &::before {
        top: calc(50% - var(--bars-gap));
      }
      &::after {
        top: calc(50% + var(--bars-gap));
      }

      &:checked {
        --bars-gap: 0px;

        &::before {
          rotate: 45deg;
        }
        &::after {
          rotate: -45deg;
        }
      }
      &:is(.light input):not(:checked) {
        &::before,
        &::after {
          background-color: var(--color-white);
        }
      }
    }
  }
}
/* #endregion */

/* #region Footer */

/* Prevent relealed content overflow */
body main:has(+ #site-footer) {
  position: relative;
  z-index: 10;
  background-color: var(--body-bg);
}

#site-footer {
  --footer-margin: 12rem;
  --footer-margin-mask-overflow: 12px;

  position: relative;
  margin-top: var(--footer-margin);

  &::before {
    content: "";
    position: absolute;

    bottom: calc(100% - var(--footer-margin-mask-overflow));
    left: 0;
    height: calc(var(--footer-margin-mask-overflow) * 2 + var(--footer-margin));
    width: 100%;

    background-color: var(--body-bg);
    z-index: 5;
  }

  .revealer {
    background-color: var(--theme);
    padding: var(--grid-padding-x) var(--grid-padding-x) 0;
    z-index: 6;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 8rem;

    clip-path: inset(0);

    nav {
      display: grid;
      grid-template: 1fr auto / repeat(2, auto);
      gap: 2rem 1rem;

      > .cities {
        grid-area: 1 / 1;
        display: flex;
        gap: var(--grid-gaps-x);
        align-items: center;
        justify-content: left;
        font-weight: 600;
      }
      > .networks {
        --px-to-rem: 20;
        font-size: var(--font-based-size);

        grid-area: 1 / 2;
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 1em;

        svg {
          height: 1em;
          width: 1em;
        }
      }
      > .misc {
        --px-to-rem: 20;
        grid-area: 2 / 2;
        /* color: var(--color-gray); */

        display: flex;
        flex-direction: column;
        align-items: end;
        line-height: normal;
        gap: var(--font-based-size);

        .cookies {
          all: inherit;
          cursor: pointer;
        }
        a,
        .cookies {
          --px-to-rem: 16;
          font-size: var(--font-based-size);
        }
      }

      a {
        color: inherit;
        &:not(:hover) {
          text-decoration: none;
        }
      }
    }
    @media screen and (max-width: 800px) {
      & {
        row-gap: 3.5rem;
      }
      nav {
        row-gap: 9.5rem;
        > .cities {
          flex-direction: column;
          align-items: flex-start;
        }

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

        > .misc {
          --px-to-rem: 15.5;
        }
      }
    }
  }

  .revealed {
    --revealed-bg: var(--color-white);
    --revealed-fg: var(--color-black);

    background-color: var(--revealed-bg);
    color: var(--revealed-fg);

    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;

    &.invert-scheme {
      --revealed-bg: var(--color-black);
      --revealed-fg: var(--color-white);
    }
  }
}
/* #endregion */

/* #region Huge Hero */
.huge-hero {
  height: 100svh;
  position: relative;
  display: flex;
  overflow: hidden;
}
.huge-hero__media {
  &,
  * {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
}
.huge-hero__logo {
  position: absolute;
  bottom: 0;
  left: var(--grid-padding-x);
  right: var(--grid-padding-x);
  z-index: 1;
  display: flex;

  @media screen and (min-width: 740px) {
    > * {
      --columns-to-rem: 3;
      width: var(--grid-based-size);
    }
  }
}
/* #endregion */

/* #region Shifted sections */
.shifted {
  display: grid;
  gap: var(--grid-gaps-x);

  &.shifted--reversable {
    > :first-child {
      grid-row-start: 2;
    }
    > :last-child {
      grid-row-start: 1;
    }
  }

  @media screen and (min-width: 720px) {
    & {
      grid-template-columns: repeat(2, 1fr);
      > * {
        grid-row: 1 / -1;
      }
    }
  }
}
/* #endregion */

/* #region Person */
.person {
  --px-to-rem: 18;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  background-color: var(--color-white);
  padding-bottom: 0.75em;

  font-size: min(24px, var(--font-based-size));

  > img {
    width: 100%;
    aspect-ratio: 9 / 10;
    object-fit: cover;
    object-position: bottom center;
    transition: object-position 0.25s ease-in-out;
  }

  > .identity {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.5rem;
    > *:not(.name),
    > .name > span {
      transition: opacity 0.25s ease-in-out;
    }

    ul {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.5rem;

      * {
        height: 100%;
        color: inherit;
      }
    }
    a {
      display: flex;
      img,
      svg {
        aspect-ratio: 1 / 1;
        height: 1em;
        width: 1em;
        object-fit: contain;
      }
    }
    .name {
      font-weight: 600;
    }
  }
  > .roles {
    width: fit-content;
    transition: opacity 0.25s ease-in-out;
  }

  /* @media screen and (hover: hover) { */
  &:not(:hover) {
    > img {
      object-position: top center;
      filter: grayscale(1);
    }
    > .identity {
      > *:not(.name),
      > .name > span:last-child {
        opacity: 0;
      }
    }
    > .roles {
      opacity: 0;
    }
  }
  /* } */
}
/* #endregion */

/* #region Logo Anchor */
.logo-anchor {
  --columns-to-rem: 3;
  max-width: var(--grid-based-size);
  position: fixed;
  bottom: 0;
  left: var(--grid-padding-x);
  right: var(--grid-padding-x);
  z-index: 1;
  display: flex;
  transition: translate 0.25s;
  z-index: 50;

  &:is([data-scroll-dir="1"] *) {
    translate: 0 100%;
  }

  @media screen and (max-width: 740px) {
    & {
      --columns-to-rem: 12;

      &:is([data-scroll-distance^="."] *) {
        translate: 0 100%;
      }
    }
  }
}
/* #endregion */

/* #region Project card */
.project-card {
  display: grid;
  color: inherit;
  text-decoration: none;
  width: 100%;

  > div {
    --px-to-rem: 20;
    margin-bottom: var(--font-based-size);

    width: 100%;
    aspect-ratio: 771 / 473;
    display: flex;

    > * {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  > p {
    --px-to-rem: 14;
    font-size: var(--font-based-size);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 0.5em;
  }
  > h3 {
    --px-to-rem: 20;
    font-size: var(--font-based-size);
    font-weight: 500;
    line-height: 100%;
  }

  @media screen and (max-width: 800px) {
    > p {
      margin-bottom: 0.5em;
    }
  }
}
/* #endregion */

/* #region Article card */
.article-card {
  --y-padding: var(--grid-padding-x);

  display: grid;
  gap: var(--grid-gaps-x);
  grid-template-columns: repeat(12, 1fr);

  border-block: 0.05rem solid var(--theme, var(--color-grey));
  &:not(:is(:last-child > *)) {
    border-bottom: 0;
  }

  header {
    grid-column: 1 / 7;

    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--grid-gaps-x);

    p {
      --px-to-rem: 16;

      font-size: var(--font-based-size);
      text-transform: uppercase;

      margin-top: var(--y-padding);
    }

    div {
      position: relative;

      img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center right;
        &:not([src]) {
          display: none;
        }
      }
    }
  }
  main {
    grid-column: 7 / 11;
    padding: var(--y-padding) 0;

    > h2 {
      --px-to-rem: 34;
      font-size: var(--font-based-size);
      grid-column: 1 / 5;
      line-height: 105.85%;
      font-weight: 600;
    }
    > p {
      margin-top: var(--grid-gaps-x);
      font-weight: 600;

      &::before {
        content: "« ";
      }
      &::after {
        content: " »";
      }
    }
  }
  footer {
    grid-column: 11 / -1;
    text-align: right;
    padding: var(--y-padding) 0;

    a {
      --px-to-rem: 16;
      font-size: var(--font-based-size);
      font-weight: 700;
      text-decoration: underline;
      color: inherit;
    }
  }

  @media screen and (hover: hover) {
    & {
      header img {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transition: clip-path 0.25s ease-in-out;
      }

      &:not(:hover) {
        header img {
          clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        }
      }
    }
  }

  @media screen and (max-width: 760px) {
    & {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
      padding: var(--y-padding) 0;
      gap: 0;

      * {
        padding: 0 !important;
        margin: 0 !important;
        grid-column: unset !important;
      }

      header {
        display: flex;
        flex-direction: column-reverse;

        > div {
          display: none;
        }
      }
      footer {
        margin-top: 2rem !important;
      }
    }
  }
}
/* #endregion */

/* #region Labeled Context */
.labeled-context {
  --px-to-rem: 16;
  > * {
    font-size: var(--font-based-size);
  }

  .label {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.2em;
  }
}
/* #endregion */

/* #region Homepage */
[data-id="1"] {
  .sub-hero {
    --columns-to-rem: 7;
    --px-to-rem: 34;
    font-size: var(--font-based-size);
    line-height: 105.88%;
    font-weight: 600;

    h1 {
      all: inherit;
      display: inline;
    }

    @media screen and (min-width: 720px) {
      & {
        grid-template-columns: 1fr var(--grid-based-size);
      }
    }
    @media screen and (max-width: 719px) {
      & {
        --px-to-rem: 22;
      }
    }
  }
  .revealed-cta {
    height: 100svh;
    position: relative;

    display: grid;
    place-content: center;

    &::before {
      /* content: ""; */
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .background {
      position: absolute;
      inset: 0;
      z-index: -1;
      display: grid;

      > * {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom;
      }
    }
  }
  .revealed > nav {
    color: var(--color-white);
  }
}
/* #endregion */

/* #region Agency page */
[data-id="2"] {
  .sub-hero {
    --px-to-rem: 34;
    font-size: var(--font-based-size);
    line-height: 105.88%;
    font-weight: 600;
    padding-bottom: calc(6 * var(--grid-gaps-x));
    margin-bottom: calc(2 * var(--grid-gaps-x));

    h1 {
      all: inherit;
      display: inline;
    }

    @media screen and (max-width: 719px) {
      & {
        --px-to-rem: 22;
      }
    }
  }

  .team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gaps-x);

    .raw {
      grid-column: -3 / -1;

      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--grid-gaps-x);

      margin-bottom: 4rem;
      font-weight: 600;

      > p {
        margin: 0;
      }
    }

    li.card {
      position: relative;
      &::after {
        content: "";
        pointer-events: none;

        position: absolute;
        inset: 0;
        background-color: var(--theme);
        opacity: var(--mask-opacity, 0);
      }
    }

    @media screen and (max-width: 950px) {
      & {
        grid-template-columns: repeat(3, 1fr);
      }
      li[aria-hidden="true"]:nth-of-type(2) {
        display: none;
      }
    }
    @media screen and (max-width: 775px) {
      & {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-wrap: break-word;
      }
      li[aria-hidden="true"] {
        display: none;
      }
      .person {
        --px-to-rem: 16;
      }
      .raw {
        grid-column: 1 / -1;
        display: initial;
        margin-top: 2rem;

        p:not(:first-child) {
          margin-top: 1em;
        }
      }
    }
  }

  .partners {
    > p {
      --px-to-rem: 34;
      font-size: var(--font-based-size);
      line-height: 105.88%;
      font-weight: 600;
    }
    > .associations {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      gap: 1rem 5rem;

      li,
      img {
        width: 100%;
      }
    }

    @media screen and (max-width: 960px) {
      > .associations {
        margin-top: 3rem;
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}
/* #endregion */

/* #region Metiers */
[data-id="3"] {
  .sub-hero {
    --px-to-rem: 34;
    font-size: var(--font-based-size);
    line-height: 105.88%;
    font-weight: 600;

    h1 {
      all: inherit;
      display: inline;
    }

    @media screen and (max-width: 719px) {
      & {
        --px-to-rem: 22;
      }
    }
  }

  .job {
    padding: var(--grid-padding-x);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gaps-x);
    background-color: var(--color-white);
    &:not([data-index="0"]) {
      margin-top: 50vh;
    }

    img {
      width: 100%;
      grid-column: 1 / 5;
    }
    main {
      grid-column: 7 / -1;
    }
    h2 {
      --px-to-rem: 120;
      text-align: right;
      font-size: var(--font-based-size);
      line-height: 95%;
    }
    .raw {
      --px-to-rem: 120;

      margin-top: var(--font-based-size);

      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--grid-gaps-x);

      color: var(--color-gray);

      > p {
        margin: 0;
      }
    }

    @media screen and (max-width: 920px) {
      h2 {
        --px-to-rem: 80;
      }
      .raw {
        --px-to-rem: 60;
      }
      main {
        grid-column: 6 / -1;
      }
    }

    @media screen and (max-width: 820px) {
      & {
        display: flex;
        flex-direction: column-reverse;
      }
      h2 {
        text-align: left;
      }
      .raw {
        margin-top: 0.25rem;
      }
    }

    @media screen and (max-width: 620px) {
      h2 {
        --px-to-rem: 45;
      }
      .raw {
        display: initial;
        > p {
          margin-top: 1rem;
        }
      }
    }
  }
}
/* #endregion */

/* #region Page projets (sommaire) */
[data-id="4"] {
  .page-hero {
    --px-to-rem: 34;
    margin-top: calc(var(--grid-padding-x) * 4.5);
  }
  .hero {
    font-size: var(--font-based-size);
    line-height: 105.88%;
    font-weight: 600;

    p,
    h1 {
      display: inline;
      all: inherit;
      padding: 0;
    }
  }
  @media screen and (max-width: 800px) {
    .page-hero {
      --px-to-rem: 22;
    }
  }

  /* Avoid the header's background to overlap the filters form */
  @media screen and (min-width: 800px) {
    #site-header {
      background: linear-gradient(
        to right,
        transparent 0 50%,
        var(--color-white) 50% 100%
      );
    }
  }

  /* 
    To anyone reading the following style: 
    Good luck and take 2 or 3 doliprane 1k
  */
  form {
    --pad-y: var(--grid-padding-x);
    --form-bg: var(--body-bg);
    --open-duration: 0.25s;
    --columns-to-rem: 6;

    background-color: var(--form-bg);

    display: grid;
    grid-template-columns: auto 1fr;
    padding-block: var(--pad-y);
    column-gap: var(--grid-gaps-x);

    position: absolute;
    top: calc(var(--pad-y) * -1);
    left: var(--grid-padding-x);
    width: var(--grid-based-size);
    z-index: 10;

    transition: background-color var(--open-duration);

    > *:not(.open-filters) {
      --px-to-rem: 14;
      font-size: max(14px, var(--font-based-size));
    }

    /* input */
    #open-filters {
      display: none;
    }
    /* input's label */
    .open-filters {
      font-size: var(--font-based-size);
      font-weight: 600;
      text-decoration: underline;

      min-width: var(--grid-column-width);
      cursor: pointer;
      z-index: 1;
    }

    /* reset button */
    > button {
      position: absolute;
      top: 100%;
      left: 0;

      background-color: transparent;
      outline: none;
      text-decoration: underline;
      border: none;
      font-size: inherit;
      color: inherit;
      font: inherit;
      text-align: left;
    }

    #filter-categories {
      position: absolute;
      top: var(--pad-y);
      left: 0;
      width: 100%;
      grid-column: 2 / 3;

      padding-top: 1.25em;
      padding-right: var(--grid-padding-x);

      > ul {
        display: flex;
        justify-content: flex-start;
        margin-bottom: var(--pad-y);
        gap: 1rem 4rem;
        flex-wrap: wrap;
      }
    }

    > button,
    #filter-categories {
      opacity: 1;
      height: fit-content;
      clip-path: polygon(
        var(--inf-min) 0%,
        var(--inf-max) 0%,
        var(--inf-max) 100%,
        var(--inf-min) 100%
      );
      padding-bottom: var(--pad-y);

      transition:
        opacity var(--open-duration) ease-in-out,
        clip-path var(--open-duration) ease-in-out;
    }
    #filter-categories::after {
      content: "";
      pointer-events: none;
      background-color: var(--form-bg);

      position: absolute;
      top: 0;
      width: 100svw;
      right: calc(-1 * var(--grid-padding-x));
      height: 100%;

      z-index: -1;
    }

    #filter-categories .category > p {
      text-transform: uppercase;
      font-weight: 600;
    }
    #filter-categories .category > ul {
      margin-top: 0.25em;
      display: grid;
      gap: 0.25rem;
    }

    > button,
    #filter-categories .filter > label {
      font-weight: 400;
      cursor: pointer;

      input {
        display: none;
      }
      &:has(:disabled) {
        color: var(--color-gray);
        cursor: not-allowed;
      }
      &:has(:checked) {
        font-weight: 700;
        &::before {
          content: "⨯";
        }
      }
      &:is(label) {
        transition: color 0.25s ease-in-out;
      }
    }

    &:not(:has([name="filter"]:checked)) > button {
      opacity: 0;
      pointer-events: none;
    }

    &:has(#open-filters:checked) .open-filters .open {
      display: none;
    }
    &:has(#open-filters:not(:checked)) {
      .open-filters .close {
        display: none;
      }

      #filter-categories,
      > button {
        opacity: 0;
        clip-path: polygon(
          var(--inf-min) 0%,
          var(--inf-max) 0%,
          var(--inf-max) 0%,
          var(--inf-min) 0%
        );
        pointer-events: none;
      }
    }
  }

  #projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--grid-gaps-x) * 2) var(--grid-gaps-x);
  }

  .content {
    position: relative;
  }

  @media screen and (max-width: 800px) {
    form {
      --pad-y: calc(var(--grid-padding-x) * 1.5);
      grid-template-columns: auto 1fr;
      grid-template-rows: repeat(2, auto);
      align-items: center;
      justify-items: end;

      #filter-categories {
        padding-right: 0;
        grid-column: 1 / -1;
        grid-row: 2 / 3;

        > ul {
          max-height: 85svh;
          overflow-y: scroll;
          flex-direction: column;
          flex-wrap: nowrap;
          padding-bottom: var(--pad-y);
        }
      }

      > button {
        position: static;
        padding-bottom: 0;
        justify-self: left;
      }
    }
  }

  @media screen and (max-width: 650px) {
    #projects {
      grid-template-columns: 1fr;
      gap: calc(4 * var(--grid-gaps-x));
    }
    form {
      position: static;
      top: unset;
      left: unset;
      width: unset;
    }
  }
}
/* #endregion */

/* #region Page projets (détails) */
[data-parent-id="4"] {
  [data-darken]::after {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;
    background-color: black;
    opacity: 0.2;
  }

  .subhero-headings {
    text-transform: uppercase;
    > * {
      font-weight: 600 !important;
    }
  }

  .subhero-desc {
    --px-to-rem: 34;
    font-size: var(--font-based-size);
    font-weight: 600;
    line-height: 106%;

    @media screen and (max-width: 720px) {
      --px-to-rem: 20;
    }
  }

  .subhero-points {
    display: flex;
    justify-content: space-between;
    gap: 1rem 0.5rem;
    flex-wrap: wrap;
    .context {
      color: var(--color-gray);
    }
  }
  .subhero-details-cta {
    --px-to-rem: 14;
    font-size: var(--font-based-size);
    display: inline-block;
    color: inherit;
  }

  .details-filters {
    padding-top: var(--grid-padding-x);

    .label {
      --px-to-rem: 18;

      font-size: clamp(18px, var(--font-based-size), 24px);
      font-weight: 500;
      text-decoration: underline;
      margin-bottom: 1em;
      text-transform: none;
    }

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

  .details-title,
  .details-subtitle {
    --px-to-rem: 36;
    font-size: var(--font-based-size);
    font-weight: 600;

    @media screen and (max-width: 800px) {
      --px-to-rem: 26;
    }
  }

  .details-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;

    > ul {
      --columns-to-rem: 2;
      display: grid;
      grid-template-columns: repeat(3, var(--grid-based-size));
      gap: var(--grid-gaps-x);
      .context {
        color: var(--color-gray);
      }
    }
  }

  #details > a {
    height: fit-content;
    border-radius: 0;
    margin-inline: auto;
    display: block;
  }

  @media screen and (max-width: 700px) {
    .details-meta {
      flex-direction: column;
      > ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
    }
    .subhero-points {
      flex-direction: column;
    }
  }

  .bonus {
    /* ? the .bonus section is absolutely positionned */
    display: flex;
    flex-direction: column;
    gap: 4rem;

    > * {
      min-height: 100vh;
    }

    /* Bonus gallery */
    .gallery {
      display: flex;
      align-items: flex-end;
      gap: 2rem 4rem;
      height: 100%;
      width: 100%;
      padding: var(--grid-padding-x);

      > p {
        --px-to-rem: 34;
        font-size: var(--font-based-size);
        font-weight: 600;
        align-self: flex-end;
        text-wrap: nowrap;
      }

      .gallery-slider {
        position: relative;
        width: 100%;

        > ul {
          display: flex;
          align-items: stretch;
          gap: 1.5rem;
          height: 65svh;
          background: var(--revealed-bg);

          position: absolute;
          bottom: 0;
          left: calc(100% * var(--progress, 0));
          translate: calc(-100% * var(--progress)) 0;

          transition: background 1s ease-in-out;

          li {
            display: flex;
            height: 100%;
            width: fit-content;
          }

          img,
          video {
            height: 100%;
            width: auto;
          }
        }
      }
    }

    /* Next project */
    .next-project {
      padding: var(--grid-padding-x);

      > * {
        display: flex;
        align-items: flex-end;
      }

      .project-card {
        width: 100%;
      }
    }
    .next-project-heading {
      --px-to-rem: 34;
      font-size: var(--font-based-size);
      font-weight: 600;
    }

    @media screen and (max-width: 800px) {
      .gallery {
        display: grid;
        grid-template-rows: repeat(2, auto);
        grid-template-columns: calc(100vw - 2 * var(--grid-padding-x));
        align-content: end;

        > p {
          text-wrap: wrap;
        }
        .gallery-slider {
          min-height: 60svh;
          overflow-x: hidden;

          > ul {
            height: 100%;
          }
        }
      }
      .next-project {
        align-content: end;
      }
    }
  }
}
/* #endregion */

/* #region Page ils-en-parlent */
[data-id="6"] {
  .hero {
    --px-to-rem: 34;
    padding-top: var(--grid-padding-x);
    font-size: var(--font-based-size);
    line-height: 105.88%;
    font-weight: 600;
    p,
    h1 {
      display: inline;
      all: inherit;
    }
  }
  @media screen and (max-width: 800px) {
    .hero {
      --px-to-rem: 22;
      padding-top: calc(var(--grid-padding-x) * 4.5);
    }
  }

  #article-loader {
    --px-to-rem: 16;
    font-size: var(--font-based-size);
    font-weight: 400;
    text-decoration: underline;
    background: transparent;

    text-transform: uppercase;
    text-align: center;
    cursor: pointer;

    display: block;
    border: none;
    margin: 8rem auto 0;
  }
}
/* #endregion */

/* #region Page contact */
[data-id="7"] {
  .city {
    background-color: var(--body-bg);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gaps-x);

    padding: var(--grid-padding-x);

    &:not([data-index="0"]) {
      margin-top: 50vh;
    }

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

    > img {
      grid-column: 1 / 5;
      width: 100%;
    }
    > main {
      grid-column: -7 / -1;
    }

    h2 {
      --px-to-rem: 120;
      font-size: var(--font-based-size);
      line-height: 95%;
      text-align: right;
    }
    .desc {
      --px-to-rem: 34;
      font-size: var(--font-based-size);
      font-weight: 600;
      margin-block: 4em 1em;
    }
    .contact {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--grid-gaps-x);
      color: var(--color-gray);
      font-weight: 600;
    }

    @media screen and (max-width: 1000px) {
      > main {
        grid-column: 6 / -1;
      }
    }
    @media screen and (max-width: 800px) {
      & {
        display: flex;
        flex-direction: column-reverse;

        h2 {
          --px-to-rem: 60;
          text-align: left;
        }
        .desc {
          --px-to-rem: 24;
          margin-block: 2em 1em;
        }
      }
    }
    @media screen and (max-width: 640px) {
      & {
        .desc {
          --px-to-rem: 20;
        }

        .contact {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}
/* #endregion */

/* #region Page mentions légales */
[data-id="104"] {
  .content {
    padding-top: calc(var(--grid-padding-x) * 8);

    h1 {
      --px-to-rem: 34;
      font-size: var(--font-based-size);
      font-weight: 600;
    }
  }

  #pinnable-page > main {
    min-height: 100svh;
  }
}
/* #endregion */

/* #region Page Le Lab */
[data-id="105"] {
  .sub-hero {
    --px-to-rem: 34;
    font-size: var(--font-based-size);
    line-height: 105.88%;
    font-weight: 600;

    h1 {
      all: inherit;
      display: inline;
    }

    @media screen and (max-width: 719px) {
      & {
        --px-to-rem: 22;
      }
    }
  }
}
/* #endregion */