/* #region Font importation */
@font-face {
  font-family: "Konsens";
  font-weight: normal;
  font-style: 400;
  src: url(/site/1/assets/fonts/Konsens/woff2/konsens-regular-webfont.woff2)
    format(woff2);
}
@font-face {
  font-family: "Konsens";
  font-weight: 600;
  font-style: normal;
  src: url(/site/1/assets/fonts/Konsens/woff2/konsens-semibold-webfont.woff2)
    format(woff2);
}
@font-face {
  font-family: "Konsens";
  font-weight: 800;
  font-style: normal;
  src: url(/site/1/assets/fonts/Konsens/woff2/konsens-bold-webfont.woff2)
    format(woff2);
}
/* #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);
}

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-green: #0fb;
  --color-gray: #777777;
  --color-lightgray: #ebebeb;

  --font-factor: 1;
  --rem-based-size: 32;

  --grid-columns-amount: 12;
  --grid-design-gutter: 40;
  --grid-design-padding: var(--grid-design-gutter);

  --grid-padding-x: calc(
    var(--grid-design-padding) / var(--rem-based-size) * 1rem
  );
  --grid-gaps-x: calc(var(--grid-design-gutter) / 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)
  );

  /* 
  1920px --> 32px
  -----------------
  840 --> 14px
  2580 --> 43px
  */
  font-size: calc(
    var(--font-factor, 1) * clamp(0.875rem, 0rem + 1.6667vw, 2.6875rem)
  );
  font-family: "Konsens", sans-serif;
  font-weight: normal;

  scroll-padding-top: 4rem;
  scroll-behavior: smooth;
}

@media screen and (max-width: 760px) {
  :root {
    /* 1 + [mobile-width] / [desktop-width] */
    --font-factor: calc(1 + 375 / 1920);
    /* --grid-design-gutter: 30; */
    --grid-design-padding: 20;
  }
}

body {
  background-color: var(--color-white);
  color: var(--color-black);
  position: relative;
  min-height: 100svh;
}

body.debug-grid {
  --color: #d9d9d956;
  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;
}

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

ul,
ol {
  list-style: none inside;
}

button {
  font-family: inherit;
}

button:not(.unstyled),
.btn {
  --px-to-rem: 14;
  --base-padding-x: 3.5em;
  --hover-padding-difference: 0.5;

  background-color: var(--color-black);
  color: var(--color-white);
  font-size: calc(var(--font-based-size) * var(--font-factor));
  padding: 1.42em var(--base-padding-x);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
  border: none;

  transition: 0.5s ease-in-out;

  &:hover {
    background-color: var(--color-green);
    color: var(--color-black);
    padding-left: calc(
      (1 + var(--hover-padding-difference)) * var(--base-padding-x)
    );
    padding-right: calc(
      (1 - var(--hover-padding-difference)) * var(--base-padding-x)
    );
  }

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

figure:not(.unstyled),
.figure {
  position: relative;
  display: flex;

  > *:not(figcaption) {
    width: 100%;
    aspect-ratio: 1526 / 808;
    object-fit: cover;
  }
  > figcaption,
  > .figcaption {
    --px-to-rem: 16;
    position: absolute;
    bottom: 0;
    left: 0;
    text-transform: uppercase;
    background-color: var(--color-green);
    color: var(--color-black);
    font-weight: 600;
    padding: 0.25em 0.5em;
    font-size: var(--font-based-size);

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

.pad-x {
  padding-left: var(--grid-padding-x);
  padding-right: var(--grid-padding-x);
}
.m-top {
  margin-top: calc(var(--mtop-rate, 2.5) * 1rem * var(--font-factor));
}
.p-top {
  padding-top: calc(var(--ptop-rate, 2.5) * 1rem * var(--font-factor));
}

.grid-based {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-amount), 1fr);
  column-gap: var(--grid-gaps-x);
  padding-left: var(--grid-padding-x);
  padding-right: var(--grid-padding-x);
}

.h2-abs-left {
  position: relative;
  & > h2,
  & > .as-h2 {
    --px-to-rem: 20;

    font-size: var(--font-based-size);
    text-transform: uppercase;
    margin-bottom: 2em;
    font-weight: 600;
  }

  @media screen and (min-width: 700px) {
    & > h2,
    & > .as-h2 {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.full-w {
  width: 100%;
  * {
    width: 100%;
  }
}

.big-keyword {
  --px-to-rem: 80;
  font-size: var(--font-based-size);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 130%;
  margin: 0 0.5em;
}

.nav-links {
  a {
    transition: color 0.25s ease-in-out;
    &.selected {
      font-weight: 600;
      pointer-events: none;
    }
  }
  &:has(a:hover) > *:not(:has(a:hover)) a {
    color: var(--color-gray);
  }
}

.tag {
  text-transform: uppercase;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 0.3rem 0.25rem 0.25rem 0.25rem;
  line-height: 1;
  font-weight: 600;
}

/* #endregion */

/* #region Raw text */
.raw {
  ul,
  ol {
    list-style: initial;
    margin: 1em 0;
    margin-left: 1em;
    font-size: 0.83em;

    & > li:not(:first-child) {
      margin-top: 0.25em;
    }
  }
  p {
    margin: 1rem 0;
    font-size: 0.83em;

    &:is(h2 + *) {
      margin-top: 0.85em;
    }

    @media screen and (max-width: 800px) {
      font-size: 0.95em;
    }
  }

  .video__cont,
  .imgmultiins {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  &,
  > div {
    > *:first-child:is(p, ul, ol, h2, h3, h4, h5, h6) {
      margin-top: 0;
      padding-top: 0;
    }
    > *:last-child:is(p, ul, ol, h2, h3, h4, h5, h6) {
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }
  h2,
  h3 {
    font-size: 1em;
    font-weight: 600;
  }
  b,
  strong {
    font-weight: 600;
  }

  blockquote {
    font-size: 1.66em;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 2rem 0;

    /* blockquote's author */
    & + p {
      font-size: 0.85em;
      font-weight: 400;
      margin-top: 0.75em;
    }
  }

  a {
    text-decoration: underline;
  }

  &.raw--small-quotes {
    blockquote {
      font-size: 1rem;
      text-transform: initial;
      margin-bottom: 0;

      &::before {
        content: "“";
      }
      &::after {
        content: "“";
      }
    }
  }
}
@media (min-width: 700px) {
  .page-actuality--details .raw:not(.raw--small-medias) .imgmultiins,
  .page-actuality--details .raw:not(.raw--small-medias) .video__cont {
    margin-left: calc((var(--grid-column-width) + var(--grid-gaps-x)) * -1);
    margin-right: calc((var(--grid-column-width) + var(--grid-gaps-x)) * -1);
  }
}

/* #endregion */

/* #region Animatable Logo */

.logo {
  position: relative;
  aspect-ratio: 159/46;

  --rectange-aspect: 8.853 / 45.192;

  --rectangle-border-size: 15%;

  --clip-l: var(--rectangle-border-size);
  --clip-l-inverted: calc(100% - var(--clip-l));

  --clip-L: calc(var(--clip-l) * var(--rectange-aspect));
  --clip-L-inverted: calc(100% - var(--clip-L));

  > span {
    position: absolute;
    background-color: var(--color-black);
    height: 100%;
    width: auto;
    aspect-ratio: var(--rectange-aspect);

    clip-path: polygon(
      var(--clip-l) 0,
      var(--clip-l-inverted) 0,
      100% var(--clip-L),
      100% var(--clip-L-inverted),
      var(--clip-l-inverted) 100%,
      var(--clip-l) 100%,
      0 var(--clip-L-inverted),
      0 var(--clip-L)
    );

    transition: 0.25s ease-in-out;
  }
}
.logo[data-style="original"],
.logo:not([data-style]) {
  > span {
    &:nth-child(1) {
      left: 0;
      rotate: 90deg;
      transform-origin: bottom right;
      translate: -100% 0;
    }
    &:nth-child(2) {
      left: 50%;
      top: 50%;
      translate: 150% -40%;
      rotate: 45deg;
    }
    &:nth-child(3) {
      top: 0;
      left: 100%;
      translate: -100% 0;
    }
  }
}

.logo[data-style="burger"],
.logo[data-style="original"].logo--menu:hover {
  > span {
    rotate: 90deg;
    left: 50%;

    &:nth-child(1) {
      top: 0;
      translate: 0 -50%;
      transform-origin: left center;
    }
    &:nth-child(2) {
      top: 50%;
      translate: -50% -50%;
      transform-origin: center center;
    }
    &:nth-child(3) {
      top: 100%;
      translate: -100% -50%;
      transform-origin: right center;
    }
  }
}

.logo[data-style="cross"],
#global-header:has(#nav-toggler:checked)
  .logo[data-style="original"].logo--menu {
  > span {
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    transform-origin: center center;

    &:nth-child(1) {
      rotate: 45deg;
    }
    &:nth-child(2) {
      opacity: 0;
    }
    &:nth-child(3) {
      rotate: -45deg;
    }
  }
}

/* #endregion */

/* #region Main Header */
#global-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
  align-items: baseline;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;

  --px-to-rem: 18;
  font-size: var(--font-based-size);
  font-weight: 600;
  text-transform: uppercase;
  padding: 1.02em var(--grid-padding-x);

  .logo {
    --px-to-rem: 46;
    height: var(--font-based-size);
    cursor: pointer;
  }

  > nav ul {
    display: flex;
    align-items: baseline;
    justify-content: right;

    gap: 1em;
  }

  > input {
    display: none;
  }

  > label {
    pointer-events: all;
  }

  &,
  > a,
  > nav {
    transition-property: opacity, background-color;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
  }

  &:has(#nav-toggler:checked) {
    background-color: var(--color-white);
  }
  &:not(:has(#nav-toggler:checked)) {
    pointer-events: none;

    > a,
    > nav {
      opacity: 0;
      pointer-events: none;
    }
  }

  @media screen and (max-width: 700px) {
    & {
      --px-to-rem: 35;

      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
      grid-template-areas:
        "btn"
        "."
        "home"
        "menu";
      justify-items: center;
      justify-content: center;
      align-content: start;
      gap: 1rem;

      > a {
        grid-area: home;
      }
      > nav {
        grid-area: menu;
        > ul {
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 1rem;
          padding-bottom: 2rem;
        }
      }
      > label {
        grid-area: btn;
      }

      .logo {
        height: 8.54vw;
      }
    }
  }
}
/* #endregion */

/* #region Main Footer */
.global-footer {
  --px-to-rem: 18;
  padding: 1.2rem;
  text-transform: uppercase;
  font-size: var(--font-based-size);
  font-weight: 600;

  &.global-footer--absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
  }

  > nav {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;

    > * {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem 2rem;

      &.social {
        justify-content: end;
        gap: 0.5rem;
      }
    }
  }

  @media screen and (max-width: 700px) {
    & > nav {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2rem;
      font-size: 0.85rem;

      > *:nth-child(odd) {
        justify-self: start;
      }
      > *:nth-child(even) {
        justify-self: end;
      }

      > ul:not(.social) {
        display: none;
      }
    }
  }
  @media screen and (min-width: 701px) {
    & > nav > *:not(ul):not(ol) {
      display: none;
    }
  }
}
/* #endregion */

/* #region [HERO] Title as mask */
@keyframes maskLineEntrance {
  from {
    translate: 0 20%;
    opacity: 0;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}
@keyframes maskSubHeadingEntrance {
  from {
    color: transparent;
  }
  to {
    color: inherit;
  }
}

.title-as-mask {
  position: relative;
  > .media {
    width: 100%;
    height: 100svh;
    position: sticky;
    top: 0;
    left: 0;
    display: flex;

    > * {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center bottom;
    }
  }
  > .heading {
    --gap: 2rem;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    text-transform: uppercase;

    display: grid;
    grid-template-rows:
      1fr
      auto;

    > * {
      background-color: var(--color-white);
    }

    > .suptitle {
      --px-to-rem: 20;
      font-size: var(--font-based-size);
      font-weight: 600;
      text-align: center;

      display: flex;
      align-items: end;
      justify-content: center;

      padding: 0 var(--grid-padding-x) var(--gap);
    }
    > .title {
      --px-to-rem: 200;
      font-size: var(--font-based-size);
      font-weight: 600;
      mix-blend-mode: screen;
      padding: 0 var(--grid-padding-x);
      padding-bottom: var(--grid-padding-x);
      line-height: 90%;

      > *:nth-child(even) {
        text-align: right;
        display: block;
      }
    }
  }

  &.with-reveal {
    height: 200svh;
  }

  &.with-entrance > .heading {
    --line-animation-duration: 600ms;
    --line-animation-extra-delay: 25ms;

    --subheading-animation-duration: 200ms;
    --subheading-animation-extra-delay: -150ms;

    &:has(> .title > span:nth-child(1)) {
      --line-amount: 1;
    }
    &:has(> .title > span:nth-child(2)) {
      --line-amount: 2;
    }
    &:has(> .title > span:nth-child(3)) {
      --line-amount: 3;
    }
    &:has(> .title > span:nth-child(4)) {
      --line-amount: 4;
    }
    &:has(> .title > span:nth-child(5)) {
      --line-amount: 5;
    }
    > .title > span {
      opacity: 0;
      display: block;

      animation: maskLineEntrance var(--line-animation-duration)
        cubic-bezier(0.5, 0, 0.5, 1) forwards;
      animation-delay: calc(
        var(--index, 0) *
          (var(--line-animation-duration) + var(--line-animation-extra-delay))
      );

      &:nth-child(1) {
        --index: 0;
      }
      &:nth-child(2) {
        --index: 1;
      }
      &:nth-child(3) {
        --index: 2;
      }
      &:nth-child(4) {
        --index: 3;
      }
      &:nth-child(5) {
        --index: 4;
      }
    }
    > .suptitle {
      color: transparent;

      animation: maskSubHeadingEntrance var(--subheading-animation-duration)
        ease-in-out forwards;
      animation-delay: calc(
        var(--line-amount, 0) * var(--line-animation-duration) +
          max(0, var(--line-amount, 0) - 1) *
          var(--line-animation-extra-delay) +
          var(--subheading-animation-extra-delay)
      );
    }
  }

  @media screen and (max-width: 790px) {
    & {
      --media-size: 61vh;
      &.with-reveal {
        height: calc(100svh + var(--media-size));
      }

      > .media {
        aspect-ratio: 1 / 1.25;
        height: var(--media-size);
      }
      > .heading {
        display: flex;
        flex-direction: column-reverse;
        height: var(--media-size);

        > .suptitle {
          --px-to-rem: 35;
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: transparent;

          opacity: var(--mobile-opacity, 1);
        }
        > .title {
          font-size: 11.1vw;
          flex-grow: 1;
          display: grid;
          align-content: end;
          line-height: normal;
        }
      }
    }
  }
}
/* #endregion */

/* #region [HERO] Tagged */
.tagged-hero {
  position: relative;

  > .tagged__img {
    width: 100%;
    display: grid;

    > * {
      width: 100%;
    }
  }
  > .tagged__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: start;

    > .tagged__sticky {
      position: sticky;
      bottom: 0;
      left: 0;
      padding: 0.15rem 0.4rem;
      background-color: var(--color-green);
      width: fit-content;
      height: fit-content;

      &:not(:has(> *)),
      &:not(:empty) > * {
        --px-to-rem: 32;
        font-size: var(--font-based-size);
        text-transform: uppercase;
        font-weight: 600;
      }
    }
  }

  @media screen and (max-width: 500px) {
    > .tagged__img > * {
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }
}

/* #endregion */

/* #region Long Heading */

.long_heading {
  display: grid;
  gap: 1.5rem;

  > .long_heading__content {
    --px-to-rem: 80;
    font-size: var(--font-based-size);
    line-height: 112.5%;
    max-width: 13.22em;
    font-weight: normal;
  }

  > .long_heading__cta {
    width: fit-content;
  }

  @media screen and (max-width: 720px) {
    & {
      > .long_heading__content {
        --px-to-rem: 50;
      }
    }
  }
}

/* #endregion */

/* #region Styled Article */
.styled-article {
  > header {
    > .meta {
      --px-to-rem: 16;
      display: flex;
      align-items: end;
      gap: 1em;
      font-size: var(--font-based-size);

      > p:last-child {
        color: var(--color-gray);
      }
    }

    > .title {
      --px-to-rem: 80;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
      font-size: var(--font-based-size);
      font-weight: normal;
      line-height: 112.5%;
    }

    > .cover {
      &,
      & > * {
        width: 100%;
      }
    }
  }
  > main {
    .raw {
      --px-to-rem: 24;
      font-size: var(--font-based-size);
      padding: 0 calc(var(--grid-column-width) + var(--grid-gaps-x));

      > * {
        font-size: inherit;
      }
    }
    section:has(> img) {
      &,
      > img {
        width: 100%;
      }
    }
  }

  @media screen and (max-width: 700px) {
    & {
      > header > .title {
        --px-to-rem: 45;
      }
      > main > .raw {
        padding: 0;
      }
    }
  }
}
/* #endregion */

/* #region Centered Paragraph */
.centered_paragraph {
  --content-columns: 6;
  --limited-content-columns: min(
    var(--grid-columns-amount),
    var(--content-columns)
  );
  padding: 0;
  > * {
    grid-column: calc(
        (var(--grid-columns-amount) - var(--limited-content-columns) + 1) / 2
      ) /
      calc(
        (var(--grid-columns-amount) + var(--limited-content-columns) + 1) / 2
      );
  }

  > .centered_paragraph__cta {
    margin-top: 1.25rem;
    width: fit-content;

    @media screen and (min-width: 800px) {
      &.centered_paragraph__cta--right {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }

  @media screen and (max-width: 550px) {
    & {
      --content-columns: 12;
      &:is(.rub1 *) {
        --content-columns: 10;
      }
    }
  }
}
/* #endregion */

/* #region Realisations Revealer */
.real-revealer {
  grid-template-rows: repeat(2, auto);
  justify-content: end;

  > ul {
    grid-column: 1 / calc(var(--grid-columns-amount) + 1);
    grid-row: 1 / 2;

    > li {
      display: grid;
      place-content: center;
      margin: 2rem 0;
      pointer-events: none;

      > * {
        pointer-events: initial;
      }

      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-top: 0;
      }
    }
  }

  > .real-cta {
    grid-row: 2 / 3;
    grid-column: 1 / calc(var(--grid-columns-amount) + 1);
    display: flex;
    align-items: center;
    justify-content: end;
  }

  @media screen and (min-width: 760px) {
    & > ul {
      grid-column: 3 / calc(var(--grid-columns-amount) - 1);

      > li {
        position: sticky;
        top: 0;
        margin: 0;
        height: 100svh;
      }
    }
  }
}
/* #endregion */

/* #region Actu Card */
.actu-card {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  text-decoration: none;

  figure > *:not(figcaption) {
    aspect-ratio: 1057 / 650 !important;
  }
  figcaption {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
  }

  .actu-card__info {
    display: grid;
    gap: 0.15rem;

    .actu__date {
      --px-to-rem: 16;
      font-size: var(--font-based-size);
      color: var(--color-gray);
    }
    .actu__title {
      --px-to-rem: 30;
      font-size: var(--font-based-size);
    }

    @media screen and (max-width: 750px) {
      .actu__date {
        --px-to-rem: 25;
      }
      .actu__title {
        --px-to-rem: 32.5;
      }
    }
  }
}
/* #endregion */

/* #region Actu presentation (homepage) */
.actu-presentation {
  > ul {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--grid-columns-amount), 1fr);
    gap: var(--grid-gaps-x);

    > :first-child {
      grid-column: 1 / 8;
    }
    > :last-child {
      grid-column: 9 / 13;
    }
  }

  .actu-cta {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 2rem;
  }

  @media screen and (max-width: 750px) {
    & > ul {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, auto);
      font-size: 2rem;
      > * {
        grid-column: 1 / 2 !important;
      }
    }
  }
}
/* #endregion */

/* #region Quote */
.quote {
  display: grid;
  align-content: center;
  gap: 0.35rem;

  > blockquote {
    --px-to-rem: 200;
    font-size: var(--font-based-size);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 90%;

    > span {
      display: block;
      &:nth-child(even) {
        text-align: right;
      }
    }
  }
  > .quote-author {
    --px-to-rem: 22;
    font-size: var(--font-based-size);
    justify-self: end;
    text-transform: uppercase;
    font-weight: 600;
  }

  @media screen and (max-width: 760px) {
    > blockquote {
      font-size: 10svw;
      line-height: 100%;
    }
    > .quote-author {
      font-size: 3.75svw;
    }
  }
}
/* #endregion */

/* #region Filling quote */
.filling-quote {
  display: grid;
  grid-template-rows: repeat(2, 100vh) calc(100vh * var(--extra-scroll, 0));

  &::after {
    content: "";
    pointer-events: none;
    background-color: var(--fill, var(--color-green));
    position: sticky;
    top: 0;
    z-index: -1;
  }

  > .quote-spacer {
    position: sticky;
    top: 0;

    display: grid;
    align-content: center;
    gap: 1rem;
    overflow-x: hidden;

    .quote {
      position: relative;
    }
    .quote-author {
      position: absolute;
      bottom: 6rem;
      right: calc(var(--grid-padding-x) * 1.25);
    }
    @media screen and (max-width: 760px) {
      .quote-author {
        bottom: unset;
        top: 100%;
      }
    }
  }
}

/* #endregion */

/* #region Realisation card */
.real-card {
  img {
    aspect-ratio: 90 / 53 !important;
  }

  .real-label--on_hover {
    transition: opacity 0.15s;
  }

  .real-label--hide,
  &.exiting .real-label {
    opacity: 0 !important;
    pointer-events: none;
  }

  @media screen and (hover: hover) {
    &:not(:hover).real-label--on_hover {
      opacity: 0;
      pointer-events: none;
    }
  }
}
/* #endregion */

/* #region Realisation categories */
.real-category {
  > header {
    padding: 0;
    > .info {
      grid-column: 1 / 5;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > h2 {
        --px-to-rem: 40;
        font-size: var(--font-based-size);
        text-transform: uppercase;
        font-weight: 600;
      }

      &.info--singleton {
        grid-column: 1 / calc(var(--grid-columns-amount) + 1);
        display: grid;
        grid-template-columns: 25% 1fr 25%;
        grid-template-rows: 1fr;
        align-items: start;
        margin-bottom: 0.5rem;

        &::after {
          content: "";
        }
        > .category-desc {
          /*margin-top: 0.5em;*/
        }
      }
      &:not(.info--singleton) > .category-desc {
        --px-to-rem: 20;

        font-size: var(--font-based-size);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1;
        background-color: var(--color-white);
        overflow: hidden;

        max-height: 0;
        padding: 0;

        transition:
          max-height 0.25s ease-in-out,
          padding 0.25s ease-in-out;
      }

      > input {
        display: none;
      }

      > label {
        cursor: pointer;
        font-size: 1.25rem;
        transition: rotate 0.25s ease-in-out;
      }

      > input:checked {
        ~ label {
          rotate: 45deg;
        }
        ~ .category-desc {
          max-height: 50svh !important;
          padding: 0.75rem 0.25rem !important;
        }
      }
    }
    > .all {
      grid-column: 5 / calc(var(--grid-columns-amount) + 1);
      display: flex;
      align-items: center;
      justify-content: end;
    }
  }

  > main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gaps-x);

    > a,
    > a > img {
      width: 100%;
      &:is(img) {
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
  }

  @media screen and (max-width: 800px) {
    > header > .info.info--singleton {
      grid-template-columns: 25% 1fr;
    }
  }
  @media screen and (max-width: 680px) {
    > header {
      grid-template-columns: repeat(2, 1fr);

      &:not(:has(.info--singleton)) > * {
        grid-column: unset !important;
      }

      > .info.info--singleton {
        grid-template-columns: unset;
        gap: 0.25rem;
        grid-template-rows: repeat(2, auto);
      }
    }
  }
  @media screen and (max-width: 560px) {
    > header {
      position: relative;
      > .info {
        position: initial;
        gap: 0.5rem;

        &:not(.info--singleton) > .category-desc {
          --px-to-rem: 25;
          top: 120%;
        }
      }
    }
    > main {
      grid-template-columns: 1fr;
    }
  }
}

/* #endregion */

/* #region Realisation categories navigation */
.real-category__navigation {
  --px-to-rem: 18;

  position: absolute;
  top: 1.5rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 var(--grid-padding-x);

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

  .selected {
    font-weight: 600;
  }

  > ul {
    display: flex;
    gap: 0 1rem;
    flex-wrap: wrap;
  }

  @media screen and (max-width: 600px) {
    & {
      position: initial;
      font-size: 1rem;
      padding: 0;
      margin: 1rem 0;

      &,
      > ul {
        text-align: center;
        flex-direction: column;
        gap: 0.5em;
      }
    }
  }
}
body:not(:has(#global-header #nav-toggler:checked)) .real-category__navigation {
  pointer-events: none;
  a {
    pointer-events: all;
  }
}
/* #endregion */

/* #region Realisation location */
.real-loc {
  --px-to-rem: 32;
  font-size: var(--font-based-size);
  text-transform: uppercase;
  display: block;
  line-height: 100%;
  margin-top: 2rem;
}
/* #endregion */

/* #region Realisation details */
.real-details {
  > .raw {
    grid-column: 1 / 7;
  }
  > .real-info {
    grid-column: 10 / 13;
  }

  > .real-ctas {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    gap: 1rem;

    grid-column: 1 / -1;
  }

  @media screen and (max-width: 800px) {
    > :not(.real-ctas) {
      grid-column: 3 / -3;
    }
  }
  @media screen and (max-width: 620px) {
    > :not(.real-ctas) {
      grid-column: 1 / -1;
    }
  }
}
/* #endregion */

/* #region Realisation info */
.real-info {
  .info-list {
    --px-to-rem: 20;

    list-style: none;
    margin: 0;
    font-size: var(--font-based-size);

    p {
      font-size: inherit;
      margin: 0;
    }
    strong {
      text-transform: uppercase;
      margin-top: 0.5em;
      line-height: 100%;
    }
  }

  @media screen and (max-width: 800px) {
    .info-list {
      font-size: 0.85rem;
    }
  }
}

/* #endregion */

/* #region Realisation videos */
.real-videos ul {
  --content-columns: min(8, var(--grid-columns-amount));

  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  gap: 2rem;

  width: calc(
    var(--grid-column-width) * var(--content-columns) +
      calc(var(--content-columns) - 1) * var(--grid-gaps-x)
  );

  * {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  a {
    display: flex;
    position: relative;
  }
  img {
    height: 100%;
    object-fit: cover;
  }
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    height: 15%;
    aspect-ratio: 1 / 1;
    width: auto;

    path {
      fill: var(--color-black);
    }
    circle {
      fill: var(--color-white);
    }
  }
}
/* #endregion */

/* #region Realisation credits */
.real-picts-credits {
  --px-to-rem: 20;
  font-size: var(--font-based-size);
  margin-top: 1.5em;
}
/* #endregion */

/* #region Auto Gallery */
.auto-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem var(--grid-gaps-x);
  direction: rtl;

  &.auto-gallery--lefted {
    direction: ltr;
  }

  figcaption {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
  }

  img {
    aspect-ratio: unset;
    width: 100%;
    height: auto;
  }

  figure:has(img.horizontal),
  img.horizontal:not(:is(figure > *)) {
    grid-column: 1 / -1;
  }

  @media screen and (max-width: 500px) {
    & {
      grid-template-columns: 1fr;
    }
  }
}
/* #endregion */

/* #region Realisations cta (to other realisations) */
.real-sender {
  > p {
    --px-to-rem: 20;
    font-size: var(--font-based-size);
    text-transform: uppercase;
    font-weight: 600;
  }
  > nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gaps-x);
  }
}
/* #endregion */

/* #region Date Scroller */
.date-scroller > * {
  --px-to-rem: 540;
  height: calc(110svh + var(--font-based-size));

  display: grid;
  grid-template-rows: auto 1fr;

  .date {
    font-size: calc(var(--font-based-size) * var(--font-factor));
    text-align: center;
    font-weight: 400;
    line-height: 1em;
    height: 1em;

    /* To remove white-spaces */
    display: flex;
    justify-content: center;

    z-index: -10;
    overflow: hidden;

    color: var(--color-lightgray);

    .digit {
      --font-shift: 0px;
      display: inline-block;
      translate: 0
        min(0px, calc((var(--after-overlap, 0px) - var(--font-shift)) * -1));

      &.digit--different {
        --clip: max(0px, calc(var(--before-overlap, 0px) - var(--font-shift)));
        clip-path: polygon(0% 0%, 100% 0%, 100% var(--clip), 0% var(--clip));
        background-color: var(--color-white);
      }
    }
    &.active {
      background-color: var(--color-white);
    }
  }

  &:not(:first-child) {
    .date:not(.active) > .digit:not(.digit--different) {
      color: transparent;
    }
  }

  .content {
    height: 100%;
  }
  .date-context {
    --px-to-rem: 20;

    font-size: calc(var(--font-based-size) * var(--font-factor));
    grid-column: 7 / 11;

    & > *:first-child:before {
      content: "";

      display: inline-block;
      width: 1em;
      height: 0.25em;
      margin-right: 0.75em;

      background-color: var(--color-green);
      border-radius: 999px;
    }

    & > * {
      font-size: inherit;
    }
  }

  .date-medias {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;

    & > *:nth-child(odd) {
      justify-self: start;
      max-width: calc(var(--grid-column-width) * 3 + var(--grid-gaps-x) * 2);
    }
    & > *:nth-child(even) {
      justify-self: end;
      max-width: calc(var(--grid-column-width) * 4 + var(--grid-gaps-x) * 3);
    }

    img,
    video {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  &:nth-child(even) {
    .date-medias {
      grid-column: 2 / -1;
    }
  }

  &:first-child > .content {
    padding-top: 15svh;
  }

  @media screen and (max-width: 975px) {
    & {
      --px-to-rem: 225;
      height: auto;
      min-height: 100lvh;

      .content {
        align-content: start;
      }

      .content > .date-context {
        grid-column: 1 / -4;
        margin-bottom: 1em;
        font-size: 0.85rem;
      }
      .content > .date-medias {
        grid-column: 1 / -1;
        height: fit-content;
      }
      .date-medias img {
        max-width: 70% !important;
        gap: 0.25em !important;
      }
    }

    &:not(:last-child) .content {
      padding-bottom: 2rem;
    }
  }
}
/* #endregion */

/* #region Cards grid */
.cards-grid > ul {
  --amount-divider: 2;
  display: grid;
  grid-template-columns: repeat(
    calc(var(--grid-columns-amount) / var(--amount-divider)),
    1fr
  );
  gap: var(--grid-gaps-x);

  > * {
    width: 100%;
  }

  @media screen and (max-width: 800px) {
    & {
      --amount-divider: 4;
    }
  }
  @media screen and (max-width: 600px) {
    & {
      --amount-divider: 6;
    }
  }
}
/* #endregion */

/* #region Team members' card */
.team-member {
  .pdp > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
  }

  .member-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    display: flex;
    background-color: transparent;
    border: none;
    outline: none;

    > p {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      color: var(--color-black);
      background-color: var(--color-green);
      text-transform: uppercase;
      font-weight: 600;
      padding: 0.25em 0.5em;

      transition: opacity 0.15s ease-in-out;
    }

    @media screen and (hover: hover) {
      &:not(:disabled) {
        cursor: pointer;
      }
      &:not(:hover) > p {
        opacity: 0;
      }
    }
  }

  .member-info {
    --content-width: 80%;
    --transition-duration: 0.5s;
    --single-step-duration: calc(var(--transition-duration) / 2);

    position: fixed;

    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    translate: 100% 0;
    padding-left: calc(100% - var(--content-width));
    opacity: 0;

    transition-property: opacity, translate;
    transition-duration: var(--single-step-duration), 0s;
    transition-delay: var(--single-step-duration), var(--transition-duration);

    background-color: rgba(0, 0, 0, 0.25);
    z-index: 120;

    display: grid;
    grid: auto 1fr / 1fr;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: var(--content-width);
      height: 100%;

      translate: 100% 0;

      background-color: var(--color-white);
      z-index: -1;

      transition: translate;
      transition-duration: var(--single-step-duration);
    }

    > header,
    > main {
      padding: var(--grid-padding-x);
    }

    > * {
      translate: 100% 0;
      transition-property: translate;
      transition-duration: var(--single-step-duration);
    }

    > label {
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100% - var(--content-width));
      height: 100%;
      cursor: pointer;

      transition: none;
    }

    > header {
      --px-to-rem: 20;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1em;

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

      .name {
        --px-to-rem: 32;
        text-transform: uppercase;
        font-size: var(--font-based-size);
        font-weight: 600;
        margin-bottom: 0.25em;
      }

      > button {
        height: 50%;
        aspect-ratio: 1 / 1;
        background-color: transparent;
        border: none;
        cursor: pointer;
        > * {
          height: 100%;
          width: 100%;
        }
      }
    }

    > main {
      padding-top: 0;
      height: 100%;

      display: grid;
      grid-template-columns: repeat(8, 1fr);
      align-items: end;
      gap: var(--grid-gaps-x);

      .pdp {
        display: flex;
        aspect-ratio: 1 / 1;
        grid-column: 1 / 4;
      }
      .details {
        height: 100%;
        grid-column: 4 / -1;
        position: relative;

        .raw {
          --px-to-rem: 20;
          font-size: var(--font-based-size);
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          overflow-y: scroll;

          padding-top: calc(100svh - 38.5svw);

          > * {
            font-size: inherit;
          }
        }
      }
    }

    @media screen and (max-width: 830px) {
      & {
        --content-width: 90%;
        align-content: stretch;

        > main {
          .details {
            height: 100%;
          }
          .raw {
            padding-top: 0 !important;
            display: grid;
            align-content: end;
          }
        }
      }
    }

    @media screen and (max-width: 530px) {
      & {
        > main {
          grid-template-columns: 1fr;
          grid-template-rows: auto 1fr;

          > * {
            grid-column: unset !important;
          }

          > .pdp {
            max-width: 20svh;
          }
          .raw {
            --px-to-rem: 25 !important;
            align-content: start;
          }
        }
      }
    }
  }

  &.expand {
    .member-info {
      translate: 0 0;
      opacity: 1;

      transition-delay: 0s, 0s;

      > *,
      &::before {
        translate: 0 0;
        transition-delay: var(--single-step-duration);
      }
    }
  }
}

body:has(.team-member.expand) {
  overflow-y: hidden;
}
/* #endregion */

/* #region Hack -> "," or <br /> */
.title-as-mask .heading > .suptitle {
  > span {
    display: none;
  }
  @media screen and (min-width: 720px) {
    & > span {
      display: initial;
      &::after {
        content: ",";
        margin-right: 0.25em;
      }
    }
    & br {
      display: none;
    }
  }
}
/* #endregion */

/* #region [Page] Homepage */
@media screen and (max-width: 720px) {
  .rub1 > main > section {
    &:first-of-type {
      --mtop-rate: 4;

      > .m-top {
        --mtop-rate: 8 !important;
      }
    }

    &.real-revealer + * {
      --mtop-rate: 6;

      > .m-top {
        --mtop-rate: 6 !important;
      }
    }

    &.actu-presentation {
      --mtop-rate: 6 !important;
    }
  }
}

[lang="en"] .rub1 .title-as-mask .heading > .title {
  --px-to-rem: 190;
}
/* #endregion */

/* #region [Page] Atelier */
#page-workshop main {
  > .title-as-mask {
    z-index: 10;
  }
  > nav {
    --px-to-rem: 18;

    position: fixed;
    /* Fixed relatively to the header's height */
    top: 1.45rem;
    right: var(--grid-padding-x);
    z-index: 5;

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

    > ul {
      display: flex;
      gap: 0.75em;
    }

    @media screen and (max-width: 720px) {
      & {
        display: none;
      }
    }
  }
}
/* #endregion */

/* #region [Page] Actu & [Page] Mentions (same layout) */
.page-actuality > main,
.mentions > main {
  --content-columns: 8;
  align-items: end;

  > * {
    grid-row: 1 / -1;
  }

  > nav {
    position: sticky;
    bottom: var(--grid-padding-x);
    right: var(--grid-padding-x);
    text-align: right;
    text-transform: uppercase;
    height: fit-content;

    grid-column: calc(var(--content-columns) + 1) / -1;
  }

  > div,
  > article {
    grid-column: 1 / calc(var(--content-columns) + 1);
  }

  .actu-listing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--grid-gaps-x) * 2) var(--grid-gaps-x);

    > :first-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (max-width: 630px) {
    & {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      > nav {
        position: static;
        margin: 0.75rem auto 0;

        > ul {
          display: flex;
          flex-wrap: wrap;
          font-size: 1rem;
          gap: 0.5em;

          flex-direction: column;
          text-align: center;
        }
      }
      > div {
        > section:first-child {
          --mtop-rate: 1;
        }
      }

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

/* #region [Page] Actu details */
.page-actuality--details main {
  > nav:not(:hover) {
    color: var(--color-gray);
  }
}
.page-actuality--details .styled-article {
  > footer {
    > p {
      text-transform: uppercase;
      font-size: 0.75rem;
      font-weight: 600;
    }
    > ul {
      width: 100%;
      display: grid;
      grid: auto / repeat(2, 1fr);
      gap: var(--grid-gaps-x);
    }
  }

  @media screen and (max-width: 700px) {
    > footer > ul {
      grid: auto / 1fr;
    }
  }
}
/* #endregion */

/* #region [Page] Contact */
#contact-page main {
  --first-columns-amount: 6;
  > :first-child {
    grid-column: 1 / var(--first-columns-amount);
  }
  > :last-child {
    grid-column: var(--first-columns-amount) / -1;

    padding-top: 23.78%;
  }

  > section:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    h1 {
      font-weight: 400;
      font-size: 2.5rem;
    }
    .contact-info {
      --px-to-rem: 20;

      font-size: calc(var(--font-based-size) * var(--font-factor));
      position: sticky;
      left: var(--grid-padding-x);
      bottom: var(--grid-padding-x);
      width: calc(var(--grid-column-width) * 2 + var(--grid-gaps-x));
    }
  }

  .label::after {
    content: unset;
  }
  label:not(:has(input[type="checkbox"])) .label {
    display: none;
  }

  @media screen and (max-width: 900px) {
    & {
      display: flex;
      flex-direction: column;
    }
    .contact-info {
      position: initial !important;
      width: unset !important;
    }
    > :last-child {
      padding-top: 4rem;
    }
  }
}
/* #endregion */

/* #region Form */
form {
  --px-to-rem: 16;
  font-size: calc(var(--font-based-size) * var(--font-factor));

  .errors {
    margin: 0.25em 0;
    font-size: 0.75em;
    color: red;
    font-style: italic;
  }

  .auto-fields {
    display: grid;
    gap: 1rem calc(var(--grid-column-width) + var(--grid-gaps-x) * 2);

    > :has(textarea, input[type="checkbox"]) {
      grid-column: 1 / -1;
    }

    @media screen and (min-width: 500px) {
      & {
        grid: auto / repeat(2, 1fr);
      }
    }
  }

  > .submition {
    display: flex;
    gap: 1rem;
    margin: 1.25rem 0;
  }

  label {
    display: flex;
    flex-direction: column;

    &:not(:has(input[type="checkbox"])) {
      --px-to-rem: 20;
      font-size: var(--font-based-size);
    }
    &:has(:required) > .label::after {
      content: "*";
    }

    &:has(input[type="checkbox"]) {
      display: grid;
      grid: auto / auto 1fr;
      column-gap: 0.5em;
      align-items: center;

      > * {
        grid-column: 1 / -1;
      }
      > input {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }
      > .label {
        grid-column: 2 / -1;
        grid-row: 1 / 2;
      }
    }
  }

  textarea,
  input {
    border: none;
    border-bottom: 0.08rem solid var(--color-black);
    font-size: inherit;
    font-family: inherit;
    background-color: transparent;
    padding: 0.25em 0;
    outline: none;

    &::placeholder {
      color: inherit;
      text-transform: uppercase;
    }
  }

  textarea {
    resize: vertical;
    min-height: 200px;
  }

  > button[type="submit"] {
    margin: 1rem 0;
  }
}
/* #endregion */

/* #region [Page] Sencite */
@media screen and (min-width: 720px) {
  #sencite > main > .sencite-quotes {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns-amount), 1fr);
    gap: var(--grid-gaps-x);

    > div {
      grid-column: 3 / -3;
    }
  }
}
/* #endregion */